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 |