OLD | NEW |
1 <html> | 1 <!DOCTYPE html> |
2 <body style="margin:0;"> | 2 <style> |
3 <div id="container" style="width:400px; overflow:-webkit-paged-x; -webkit-wr
iting-mode:vertical-rl;"> | 3 .filler { display:inline-block; height:200px; width:1px; } |
4 <div style="width:100%; height:100%; margin:8px;"> | 4 </style> |
5 <img src="resources/big-green.png" style="width:100%; height:100%; m
ax-width:100%; max-height:100%;"/> | 5 <p>Test that a paged container in vertical writing mode shrinks to fit within it
s containing block.</p> |
| 6 <p>There should be a yellow rectangle below, and the word 'PASS' should be seen
in the bottom left corner.</p> |
| 7 <div style="height:300px; background:yellow;"> |
| 8 <div style="width:50%; overflow:-webkit-paged-x; -webkit-writing-mode:vertic
al-lr; background:yellow;"> |
| 9 <div style="float:right; height:1.2em;"> |
| 10 <!-- Cannot set writing mode directly on the float, because of crbug
.com/461040 --> |
| 11 <div style="-webkit-writing-mode:horizontal-tb;"> |
| 12 PASS |
| 13 </div> |
6 </div> | 14 </div> |
| 15 <div class="filler"></div> |
| 16 <div class="filler"></div> |
| 17 <div class="filler"></div> |
7 </div> | 18 </div> |
8 <script> | 19 </div> |
9 document.getElementById("container").scrollLeft = -400; | |
10 </script> | |
11 </body> | |
12 </html> | |
OLD | NEW |