| 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 <script src="../../../resources/ahem.js"></script> |
| 3 <style> | 4 <style> |
| 4 .container { | 5 .container { |
| 5 font: 20px/1 Ahem; | 6 font: 20px/1 Ahem; |
| 6 color: orange; | 7 color: orange; |
| 7 width: 160px; | 8 width: 160px; |
| 8 height: 20px; | 9 height: 20px; |
| 9 } | 10 } |
| 10 .float { | 11 .float { |
| 11 -webkit-writing-mode: vertical-lr; | 12 -webkit-writing-mode: vertical-lr; |
| 12 shape-outside: border-box; | 13 shape-outside: border-box; |
| (...skipping 13 matching lines...) Expand all Loading... |
| 26 <div class="container"> | 27 <div class="container"> |
| 27 <div class="float" style="float: left;"></div> | 28 <div class="float" style="float: left;"></div> |
| 28 X | 29 X |
| 29 </div> | 30 </div> |
| 30 <p>You should see an orange square touching the left side of a blue rectangl
e. There should be no blue to the left of the orange square.</p> | 31 <p>You should see an orange square touching the left side of a blue rectangl
e. There should be no blue to the left of the orange square.</p> |
| 31 <div class="container" style="text-align: right"> | 32 <div class="container" style="text-align: right"> |
| 32 <div class="float" style="float: right;"></div> | 33 <div class="float" style="float: right;"></div> |
| 33 X | 34 X |
| 34 </div> | 35 </div> |
| 35 </body> | 36 </body> |
| OLD | NEW |