flexbox-float-2a.xhtml (1271B)
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 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <style> 13 div.flexbox { 14 display: flex; 15 font-family: sans-serif; 16 width: 400px; 17 margin-bottom: 2px; 18 background: lightgreen; 19 justify-content: space-around; 20 } 21 </style> 22 </head> 23 <body> 24 <!-- These cases have a floated span as a grandchild of the flex container. 25 The span should float within its flex item. --> 26 <div class="flexbox"> 27 <span>aaa<span style="float: left">lll</span>bbb</span> 28 </div> 29 <div class="flexbox"> 30 <span>aaa<span style="float: right">rrr</span>bbb</span> 31 </div> 32 33 <!-- These cases have a floated div as a grandchild of the flex container. 34 The div should float within its flex item. --> 35 <div class="flexbox"> 36 <span>aaa<div style="float: left">lll</div>bbb</span> 37 </div> 38 <div class="flexbox"> 39 <span>aaa<div style="float: right">rrr</div>bbb</span> 40 </div> 41 </body> 42 </html>