third_party/WebKit/LayoutTests/css3/flexbox/flex-no-flex.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 body {
   5     margin: 0;
   6 }
   7 .flexbox {
   8     display: flex;
   9     background-color: #aaa;
  10     position: relative;
  11 }
  12 .flexbox :nth-child(1) {
  13     background-color: blue;
  14 }
  15 .flexbox :nth-child(2) {
  16     background-color: green;
  17 }
  18
  19 .row {
  20     width: 200px;
  21     height: 200px;
  22 }
  23 .row div {
  24     flex: 1 auto;
  25 }
  26 .noflex .row :nth-child(1) {
  27     width: 50px;
  28     flex: none;
  29 }
  30
  31 .column {
  32     flex-direction: column;
  33     width: 200px;
  34     height: 200px;
  35 }
  36 .column div {
  37     flex: 1 auto;
  38 }
  39 .noflex .column :nth-child(1) {
  40     height: 50px;
  41     flex: none;
  42 }
  43
  44 </style>
  45 <script>
  46 function runTest()
  47 {
  48     document.body.className = "noflex";
  49     checkLayout('.flexbox');
  50 }
  51 </script>
  52 <script src="../../resources/check-layout.js"></script>
  53 <body onload="runTest()">
  54
  55 <div class="flexbox row">
  56     <div data-expected-width="50"></div>
  57     <div data-expected-width="150"></div>
  58 </div>
  59
  60 <div class="flexbox column">
  61     <div data-expected-height="50"></div>
  62     <div data-expected-height="150"></div>
  63 </div>
  64
  65 </body>
  66 </html>