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

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 #testcase > div {
   5     height: 50px;
   6     width: 50px;
   7     background-color: green;
   8     outline: 2px solid darkgreen;
   9 }
  10 #testcase > div > div {
  11     flex: 1;
  12 }
  13 </style>
  14 <script src="../../resources/check-layout.js"></script>
  15 <body onload="checkLayout('#testcase')">
  16 <p>This test passes if the three green boxes are on the same horizontal line.</p>
  17
  18 <div id="testcase" style="position: relative">
  19 <div data-offset-y="0" data-offset-x="0" data-expected-width="50" data-expected-height="50" style="display: inline-block">
  20 </div><div data-offset-y="0" data-offset-x="50" data-expected-width="50" data-expected-height="50" style="display: inline-flex;">
  21     <div data-expected-width="25"></div>
  22     <div data-expected-width="25"></div>
  23 </div><div data-offset-y="0" data-offset-x="100" data-expected-width="50" data-expected-height="50" style="display: inline-block"></div>
  24 </div>
  25 </body>
  26 </html>