| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html lang="en"> | |
| 3 <head> | |
| 4 <style> | |
| 5 .region, .content { | |
| 6 font: 50px/1 Ahem, sans-serif; | |
| 7 } | |
| 8 .region { | |
| 9 width: 100px; | |
| 10 height: 100px; | |
| 11 shape-inside: rectangle(0, 0, 100%, 100%); | |
| 12 } | |
| 13 .content * { | |
| 14 color: green; | |
| 15 width: 100px; | |
| 16 overflow-wrap: break-word; | |
| 17 } | |
| 18 .inline-block.content * { | |
| 19 display: inline-block; | |
| 20 } | |
| 21 .float.content * { | |
| 22 float: left; | |
| 23 } | |
| 24 .list.content ul { | |
| 25 margin: 0; | |
| 26 padding: 0; | |
| 27 display: inline-block; | |
| 28 list-style: none; | |
| 29 } | |
| 30 .table.content table { | |
| 31 display: inline-table; | |
| 32 border-collapse: collapse; | |
| 33 } | |
| 34 .table.content tr { | |
| 35 dispay: inline-table; | |
| 36 } | |
| 37 .table.content td, .table.content tr { | |
| 38 padding: 0; margin: 0; | |
| 39 } | |
| 40 .old-flexbox.content * { | |
| 41 display: -webkit-inline-box; | |
| 42 } | |
| 43 .new-flexbox.content * { | |
| 44 display: -webkit-inline-flex; | |
| 45 } | |
| 46 .grid.content * { | |
| 47 display: -webkit-inline-grid; | |
| 48 -webkit-grid-rows: 100px; | |
| 49 -webkit-grid-columns: 100px; | |
| 50 } | |
| 51 .grid.content * { | |
| 52 -webkit-grid-row: 1; | |
| 53 -webkit-grid-column: 1; | |
| 54 } | |
| 55 </style> | |
| 56 </head> | |
| 57 <body> | |
| 58 <p>This test covers inline blocks and floats inside of regions with a shape-
inside set. | |
| 59 It requires the Ahem font. For each test case, you should see a 2x2 green sq
uare.</p> | |
| 60 | |
| 61 <p>Inline blocks</p> | |
| 62 <div class='region inline-block'> | |
| 63 <div class='content inline-block'> | |
| 64 <div>xxxx</div> | |
| 65 </div> | |
| 66 </div> | |
| 67 | |
| 68 <p>Floats</p> | |
| 69 <div class='region float'> | |
| 70 <div class='content float'> | |
| 71 <div>xxxx</div> | |
| 72 </div> | |
| 73 </div> | |
| 74 | |
| 75 <p>Lists</p> | |
| 76 <div class='region list'> | |
| 77 <div class='content list'> | |
| 78 <ul> | |
| 79 <li>xx</li> | |
| 80 <li>xx</li> | |
| 81 </ul> | |
| 82 </div> | |
| 83 </div> | |
| 84 | |
| 85 <p>Tables</p> | |
| 86 <div class='region table'> | |
| 87 <div class='content table'> | |
| 88 <table> | |
| 89 <tr><td>x</td><td>x</td></tr> | |
| 90 <tr><td>x</td><td>x</td></tr> | |
| 91 </table> | |
| 92 </div> | |
| 93 </div> | |
| 94 | |
| 95 <p>Old FlexBox</p> | |
| 96 <div class='region old-flexbox'> | |
| 97 <div class='content old-flexbox'> | |
| 98 <div>xxxx</div> | |
| 99 </div> | |
| 100 </div> | |
| 101 | |
| 102 <p>New FlexBox</p> | |
| 103 <div class='region new-flexbox'> | |
| 104 <div class='content new-flexbox'> | |
| 105 <div>xxxx</div> | |
| 106 </div> | |
| 107 </div> | |
| 108 | |
| 109 <p>Grid</p> | |
| 110 <div class='region grid'> | |
| 111 <div class='content grid'> | |
| 112 <div>xxxx</div> | |
| 113 </div> | |
| 114 </div> | |
| 115 </body> | |
| 116 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 159863002:
Remove CSS regions support, keeping a bare minimum to support "region-based" multicol. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master