| 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; |
| 11 -webkit-shape-inside: rectangle(0, 0, 100%, 100%); | 11 shape-inside: rectangle(0, 0, 100%, 100%); |
| 12 } | 12 } |
| 13 .content * { | 13 .content * { |
| 14 color: green; | 14 color: green; |
| 15 width: 100px; | 15 width: 100px; |
| 16 overflow-wrap: break-word; | 16 overflow-wrap: break-word; |
| 17 } | 17 } |
| 18 .inline-block.content * { | 18 .inline-block.content * { |
| 19 display: inline-block; | 19 display: inline-block; |
| 20 } | 20 } |
| 21 .float.content * { | 21 .float.content * { |
| (...skipping 85 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 107 </div> | 107 </div> |
| 108 | 108 |
| 109 <p>Grid</p> | 109 <p>Grid</p> |
| 110 <div class='region grid'> | 110 <div class='region grid'> |
| 111 <div class='content grid'> | 111 <div class='content grid'> |
| 112 <div>xxxx</div> | 112 <div>xxxx</div> |
| 113 </div> | 113 </div> |
| 114 </div> | 114 </div> |
| 115 </body> | 115 </body> |
| 116 </html> | 116 </html> |
| OLD | NEW |