| 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 .region.inline-block { -webkit-flow-from: inline-block-flow; } | |
| 19 .content.inline-block { -webkit-flow-into: inline-block-flow; } | |
| 20 | |
| 21 .region.float { -webkit-flow-from: float-flow; } | |
| 22 .content.float { -webkit-flow-into: float-flow; } | |
| 23 | |
| 24 .region.list { -webkit-flow-from: list-flow; } | |
| 25 .content.list { -webkit-flow-into: list-flow; } | |
| 26 | |
| 27 .region.table { -webkit-flow-from: table-flow; } | |
| 28 .content.table { -webkit-flow-into: table-flow; } | |
| 29 | |
| 30 .region.old-flexbox { -webkit-flow-from: old-flexbox-flow; } | |
| 31 .content.old-flexbox { -webkit-flow-into: old-flexbox-flow; } | |
| 32 | |
| 33 .region.new-flexbox { -webkit-flow-from: new-flexbox-flow; } | |
| 34 .content.new-flexbox { -webkit-flow-into: new-flexbox-flow; } | |
| 35 | |
| 36 .region.grid { -webkit-flow-from: grid-flow; } | |
| 37 .content.grid { -webkit-flow-into: grid-flow; } | |
| 38 | |
| 39 .inline-block.content * { | |
| 40 display: inline-block; | |
| 41 } | |
| 42 .float.content * { | |
| 43 float: left; | |
| 44 } | |
| 45 .list.content ul { | |
| 46 margin: 0; | |
| 47 padding: 0; | |
| 48 display: inline-block; | |
| 49 list-style: none; | |
| 50 } | |
| 51 .table.content table { | |
| 52 display: inline-table; | |
| 53 border-collapse: collapse; | |
| 54 } | |
| 55 .table.content tr { | |
| 56 dispay: inline-table; | |
| 57 } | |
| 58 .table.content td, .table.content tr { | |
| 59 padding: 0; margin: 0; | |
| 60 } | |
| 61 .old-flexbox.content * { | |
| 62 display: -webkit-inline-box; | |
| 63 } | |
| 64 .new-flexbox.content * { | |
| 65 display: -webkit-inline-flex; | |
| 66 } | |
| 67 .grid.content * { | |
| 68 display: inline-grid; | |
| 69 grid-template-rows: 100px; | |
| 70 grid-template-columns: 100px; | |
| 71 } | |
| 72 .grid.content * { | |
| 73 grid-row-start: 1; | |
| 74 grid-column-start: 1; | |
| 75 } | |
| 76 </style> | |
| 77 </head> | |
| 78 <body> | |
| 79 <p>This test covers inline blocks and floats inside of regions with a shape-
inside set. | |
| 80 It requires the Ahem font. For each test case, you should see a 2x2 green sq
uare.</p> | |
| 81 | |
| 82 <p>Inline blocks</p> | |
| 83 <div class='region inline-block'></div> | |
| 84 <div class='content inline-block'> | |
| 85 <div>xxxx</div> | |
| 86 </div> | |
| 87 | |
| 88 <p>Floats</p> | |
| 89 <div class='region float'></div> | |
| 90 <div class='content float'> | |
| 91 <div>xxxx</div> | |
| 92 </div> | |
| 93 | |
| 94 <p>Lists</p> | |
| 95 <div class='region list'></div> | |
| 96 <div class='content list'> | |
| 97 <ul> | |
| 98 <li>xx</li> | |
| 99 <li>xx</li> | |
| 100 </ul> | |
| 101 </div> | |
| 102 | |
| 103 <p>Tables</p> | |
| 104 <div class='region table'></div> | |
| 105 <div class='content table'> | |
| 106 <table> | |
| 107 <tr><td>x</td><td>x</td></tr> | |
| 108 <tr><td>x</td><td>x</td></tr> | |
| 109 </table> | |
| 110 </div> | |
| 111 | |
| 112 <p>Old FlexBox</p> | |
| 113 <div class='region old-flexbox'></div> | |
| 114 <div class='content old-flexbox'> | |
| 115 <div>xxxx</div> | |
| 116 </div> | |
| 117 | |
| 118 <p>New FlexBox</p> | |
| 119 <div class='region new-flexbox'></div> | |
| 120 <div class='content new-flexbox'> | |
| 121 <div>xxxx</div> | |
| 122 </div> | |
| 123 | |
| 124 <p>Grid</p> | |
| 125 <div class='region grid'></div> | |
| 126 <div class='content grid'> | |
| 127 <div>xxxx</div> | |
| 128 </div> | |
| 129 </body> | |
| 130 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 159933010:
Remove everything region-specific from LayoutTests. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master