webkit-box-anon-flex-items-1b.html (2289B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Test for contiguous inline content getting wrapped in a single block, 6 inside of -webkit-box with "overflow:hidden". 7 </title> 8 <style> 9 .container { 10 display: -webkit-box; 11 overflow: hidden; 12 -webkit-box-pack: justify; 13 width: 300px; 14 border: 1px solid black; 15 font: 10px sans-serif; 16 margin-bottom: 10px; 17 } 18 .container > * { 19 background: lightgray; 20 } 21 </style> 22 </head> 23 <body> 24 <!-- The following containers each have a bunch of contiguous inline-level 25 content. In each case, all of the inline content ("a" through "z") should 26 get wrapped into a single anonymous block. --> 27 <div class="container"> 28 a 29 <i>i</i><img src="bogus"><img src="bogus" alt="alt"> 30 <canvas height="5" width="5"></canvas> 31 <video height="5" width="5"></video> 32 <div style="display:inline-block">ib</div> 33 <div style="display:inline-table">it</div> 34 z 35 <div>block</div> 36 <div>block</div> 37 </div> 38 39 <div class="container"> 40 <div>block</div> 41 a 42 <i>i</i><img src="bogus"><img src="bogus" alt="alt"> 43 <canvas height="5" width="5"></canvas> 44 <video height="5" width="5"></video> 45 <div style="display:inline-block">ib</div> 46 <div style="display:inline-table">it</div> 47 z 48 <div>block</div> 49 </div> 50 51 <div class="container"> 52 <div>block</div> 53 <div>block</div> 54 a 55 <i>i</i><img src="bogus"><img src="bogus" alt="alt"> 56 <canvas height="5" width="5"></canvas> 57 <video height="5" width="5"></video> 58 <div style="display:inline-block">ib</div> 59 <div style="display:inline-table">it</div> 60 z 61 </div> 62 63 <!-- This container tests how flex items are formed when table parts are placed 64 directly inside of a -webkit-box, alongside inline-level content. 65 (Table-fixup should produce an anonymous table around each contiguous run 66 of table-parts, and we should get an anonymous block around each piece of 67 raw text.) --> 68 <div class="container"> 69 a 70 <div style="display: table-cell">tc</div> 71 <div style="display: table-cell">tc</div> 72 b 73 <div style="display: table-row">tr</div> 74 <div style="display: table-cell">tc</div> 75 c 76 <div style="display: table-row">tr</div> 77 <div style="display: table-row-group">trg</div> 78 d 79 <table><tbody><tr><td>t</td></tr></tbody></table> 80 e 81 </div> 82 </body> 83 </html>