flexbox-float-1a.xhtml (1306B)
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 direct child of a flexbox won't 8 actually cause it to be floated. 9 --> 10 <html xmlns="http://www.w3.org/1999/xhtml"> 11 <head> 12 <style> 13 div.flexbox { 14 display: flex; 15 width: 400px; 16 margin-bottom: 2px; 17 font-family: sans-serif; 18 background: lightgreen; 19 justify-content: space-around; 20 } 21 </style> 22 </head> 23 <body> 24 <!-- These cases have a span as a direct child of the flexbox. The span 25 should become display:block (and hence form its own flex item), 26 but it shouldn't actually float. 27 --> 28 <div class="flexbox"> 29 aaa<span style="float: left">[[[</span>bbb 30 </div> 31 <div class="flexbox"> 32 aaa<span style="float: right">]]]</span>bbb 33 </div> 34 <div class="flexbox"> 35 aaa<span style="float: left">[[[</span> 36 </div> 37 <div class="flexbox"> 38 aaa<span style="float: right">]]]</span> 39 </div> 40 <div class="flexbox"> 41 <span style="float: left">[[[</span>bbb 42 </div> 43 <div class="flexbox"> 44 <span style="float: right">]]]</span>bbb 45 </div> 46 </body> 47 </html>