flexbox-float-2b.xhtml (1461B)
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>