| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>shape-outside on floats with a different writing mode in the float and th
e container</title> | 2 <title>shape-outside on floats with a different writing mode in the float and th
e container</title> |
| 3 <style> | 3 <style> |
| 4 .container { | 4 .container { |
| 5 font: 20px/1 Ahem; | 5 font: 20px/1 Ahem; |
| 6 color: green; | 6 color: green; |
| 7 } | 7 } |
| 8 .float { | 8 .float { |
| 9 -webkit-writing-mode: vertical-lr; | 9 -webkit-writing-mode: vertical-lr; |
| 10 shape-outside: rectangle(-20px, 0px, 20px, 20px) content-box; | 10 shape-outside: polygon(-20px 0px, 0px 0px, 0px 20px, -20px 20px) content
-box; |
| 11 height: 20px; | 11 height: 20px; |
| 12 width: 40px; | 12 width: 40px; |
| 13 margin: 0px 20px; | 13 margin: 0px 20px; |
| 14 background-color: red; | 14 background-color: red; |
| 15 float: left; | 15 float: left; |
| 16 } | 16 } |
| 17 </style> | 17 </style> |
| 18 <body> | 18 <body> |
| 19 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=122243">Bug 122243</a> -
[css-shapes] shape-outside does not properly handle the container and the float
having different writing modes</p> | 19 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=122243">Bug 122243</a> -
[css-shapes] shape-outside does not properly handle the container and the float
having different writing modes</p> |
| 20 <p>You should see a single green rectangle. You should not see any red.</p> | 20 <p>You should see a single green rectangle. You should not see any red.</p> |
| 21 <div class="container"> | 21 <div class="container"> |
| 22 <div class="float"></div> | 22 <div class="float"></div> |
| 23 XX | 23 XX |
| 24 </div> | 24 </div> |
| 25 </body> | 25 </body> |
| OLD | NEW |