layout/reftests/flexbox/flexbox-float-2b.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <!--
   7      This test verifies that 'float' on a grandchild of a flex container _will_
   8      cause the element to be floated.
   9
  10      This differs from the "2a" variant in that the flex items are <div>s
  11      rather than <span>s (though that shouldn't matter, because <span> as a
  12      flex item should become "display:block").
  13 -->
  14 <html xmlns="http://www.w3.org/1999/xhtml">
  15   <head>
  16     <style>
  17       div.flexbox {
  18         display: flex;
  19         font-family: sans-serif;
  20         width: 400px;
  21         margin-bottom: 2px;
  22         background: lightgreen;
  23         justify-content: space-around;
  24       }
  25     </style>
  26   </head>
  27   <body>
  28     <!-- These cases have a floated span as a grandchild of the flex container.
  29          The span should float within its flex item. -->
  30     <div class="flexbox">
  31       <div>aaa<span style="float: left">lll</span>bbb</div>
  32     </div>
  33     <div class="flexbox">
  34       <div>aaa<span style="float: right">rrr</span>bbb</div>
  35     </div>
  36
  37     <!-- These cases have a floated div as a grandchild of the flex container.
  38          The div should float within its flex item. -->
  39     <div class="flexbox">
  40       <div>aaa<div style="float: left">lll</div>bbb</div>
  41     </div>
  42     <div class="flexbox">
  43       <div>aaa<div style="float: right">rrr</div>bbb</div>
  44     </div>
  45   </body>
  46 </html>