third_party/WebKit/LayoutTests/css3/flexbox/floated-flexbox.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 .flexbox {
   5     display: flex;
   6     background-color: #aaa;
   7     border: 5px solid blue;
   8     float:left;
   9 }
  10 .flexbox :nth-child(1) {
  11     background-color: salmon;
  12 }
  13 .flexbox :nth-child(2) {
  14     background-color: lime;
  15 }
  16 </style>
  17 <script src="../../resources/check-layout.js"></script>
  18 <body onload="checkLayout('.flexbox')">
  19
  20 <div data-expected-width=130 data-expected-height=30 class=flexbox>
  21     <div style="background-color:pink; width: 20px; height: 20px;"></div>
  22     <div style="background-color:red; width: 100px; height: 20px;"></div>
  23 </div>
  24
  25 <div style="clear: left; position: relative">
  26     <div style="width: 100px; height: 100px; background-color: green; float: left"></div>
  27     <div data-expected-height=30 data-offset-x=100 data-offset-y=0 class="flexbox" style="float: none">
  28         <div data-expected-height=20 data style="height: 20px; flex: 1"></div>
  29         <div data-expected-height=20 style="height: 20px; flex: 1"></div>
  30     </div>
  31 </div>
  32
  33 </body>
  34 </html>