OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html lang="en"> | 2 <html lang="en"> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 .region, .content { | 5 .region, .content { |
6 font: 50px/1 Ahem, sans-serif; | 6 font: 50px/1 Ahem, sans-serif; |
7 } | 7 } |
8 .region { | 8 .region { |
9 width: 100px; | 9 width: 100px; |
10 height: 100px; | 10 height: 100px; |
(...skipping 48 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
59 padding: 0; margin: 0; | 59 padding: 0; margin: 0; |
60 } | 60 } |
61 .old-flexbox.content * { | 61 .old-flexbox.content * { |
62 display: -webkit-inline-box; | 62 display: -webkit-inline-box; |
63 } | 63 } |
64 .new-flexbox.content * { | 64 .new-flexbox.content * { |
65 display: -webkit-inline-flex; | 65 display: -webkit-inline-flex; |
66 } | 66 } |
67 .grid.content * { | 67 .grid.content * { |
68 display: inline-grid; | 68 display: inline-grid; |
69 grid-definition-rows: 100px; | 69 grid-template-rows: 100px; |
70 grid-definition-columns: 100px; | 70 grid-template-columns: 100px; |
71 } | 71 } |
72 .grid.content * { | 72 .grid.content * { |
73 grid-row-start: 1; | 73 grid-row-start: 1; |
74 grid-column-start: 1; | 74 grid-column-start: 1; |
75 } | 75 } |
76 </style> | 76 </style> |
77 </head> | 77 </head> |
78 <body> | 78 <body> |
79 <p>This test covers inline blocks and floats inside of regions with a shape-
inside set. | 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> | 80 It requires the Ahem font. For each test case, you should see a 2x2 green sq
uare.</p> |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
121 <div>xxxx</div> | 121 <div>xxxx</div> |
122 </div> | 122 </div> |
123 | 123 |
124 <p>Grid</p> | 124 <p>Grid</p> |
125 <div class='region grid'></div> | 125 <div class='region grid'></div> |
126 <div class='content grid'> | 126 <div class='content grid'> |
127 <div>xxxx</div> | 127 <div>xxxx</div> |
128 </div> | 128 </div> |
129 </body> | 129 </body> |
130 </html> | 130 </html> |
OLD | NEW |