| OLD | NEW | 
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> | 
| 2 <html> | 2 <html> | 
| 3 <head> | 3 <head> | 
| 4     <style> | 4     <style> | 
| 5     .border { | 5     .border { | 
| 6         border-left: 5px solid blue; | 6         border-left: 5px solid blue; | 
| 7         border-top: 10px solid blue; | 7         border-top: 10px solid blue; | 
| 8         border-right: 15px solid blue; | 8         border-right: 15px solid blue; | 
| 9         border-bottom: 20px solid blue; | 9         border-bottom: 20px solid blue; | 
| 10         width: 50px; | 10         width: 50px; | 
| 11         height: 70px; | 11         height: 70px; | 
| 12         border-style: solid; | 12         border-style: solid; | 
| 13     } | 13     } | 
| 14     .padding { | 14     .padding { | 
| 15         padding: 10px 15px 20px 5px; | 15         padding: 10px 15px 20px 5px; | 
| 16     } | 16     } | 
| 17     .border-box { | 17     .border-box { | 
| 18         -webkit-box-sizing: border-box; | 18         -webkit-box-sizing: border-box; | 
| 19     } | 19     } | 
| 20     .border-box.border { | 20     .border-box.border { | 
| 21         width: 70px; | 21         width: 70px; | 
| 22         height: 100px; | 22         height: 100px; | 
| 23     } | 23     } | 
| 24     .border-box.border.padding { | 24     .border-box.border.padding { | 
| 25         width: 90px; | 25         width: 90px; | 
| 26         height: 130px; | 26         height: 130px; | 
| 27     } | 27     } | 
| 28     .shape-inside { | 28     .shape-inside { | 
| 29         shape-inside: rectangle(5px, 10px, 30px, 40px); | 29         shape-inside: polygon(5px 10px, 35px 10px, 35px 50px, 5px 50px); | 
| 30         font-family: Ahem, sans-serif; | 30         font-family: Ahem, sans-serif; | 
| 31         font-size: 10px; | 31         font-size: 10px; | 
| 32         color: green; | 32         color: green; | 
| 33     } | 33     } | 
| 34     .border-box.shape-inside { | 34     .border-box.shape-inside { | 
| 35         shape-inside: rectangle(10px, 20px, 30px, 40px) border-box; | 35         shape-inside: polygon(10px 20px, 40px 20px, 40px 60px, 10px 60px) border
    -box; | 
| 36     } | 36     } | 
| 37     .border-box.border.padding.shape-inside { | 37     .border-box.border.padding.shape-inside { | 
| 38         shape-inside: rectangle(15px, 30px, 30px, 40px) border-box; | 38         shape-inside: polygon(15px 30px, 45px 30px, 45px 70px, 15px 70px) border
    -box; | 
| 39     } | 39     } | 
| 40     .vertical-lr { | 40     .vertical-lr { | 
| 41         -webkit-writing-mode: vertical-lr; | 41         -webkit-writing-mode: vertical-lr; | 
| 42     } | 42     } | 
| 43     .vertical-rl { | 43     .vertical-rl { | 
| 44         -webkit-writing-mode: vertical-rl; | 44         -webkit-writing-mode: vertical-rl; | 
| 45     } | 45     } | 
| 46     .horizontal-tb { | 46     .horizontal-tb { | 
| 47         -webkit-writing-mode: horizontal-tb; | 47         -webkit-writing-mode: horizontal-tb; | 
| 48     } | 48     } | 
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 84     <div class='border-box border padding shape-inside horizontal-tb'> | 84     <div class='border-box border padding shape-inside horizontal-tb'> | 
| 85     xxx xxx xxx xxx | 85     xxx xxx xxx xxx | 
| 86     </div> | 86     </div> | 
| 87     <div class='border-box border padding shape-inside vertical-lr'> | 87     <div class='border-box border padding shape-inside vertical-lr'> | 
| 88         xxxx xxxx xxxx | 88         xxxx xxxx xxxx | 
| 89     </div> | 89     </div> | 
| 90     <div class='border-box border padding shape-inside vertical-rl'> | 90     <div class='border-box border padding shape-inside vertical-rl'> | 
| 91         xxxx xxxx xxxx | 91         xxxx xxxx xxxx | 
| 92     </div> | 92     </div> | 
| 93 </body> | 93 </body> | 
| 94 </html> | 94 </html> | 
| OLD | NEW | 
|---|