OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <title>CSS Writing Modes Test: outline layout and inline-block and vertical-rl w
riting-mode</title> | 2 <title>CSS Writing Modes Test: outline layout and inline-block and vertical-rl w
riting-mode</title> |
3 <link rel="match" href="reference/outline-inline-block-vrl-006.html" /> | 3 <link rel="match" href="reference/outline-inline-block-vrl-006.html" /> |
4 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" /> | 4 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com" /> |
5 <link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" hre
f="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" /> | 5 <link rel="help" title="7.1. Principles of Layout in Vertical Writing Modes" hre
f="http://www.w3.org/TR/css-writing-modes-3/#vertical-layout" /> |
6 <link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="htt
p://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" /> | 6 <link rel="help" title="18.4 Dynamic outlines: the 'outline' property" href="htt
p://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#dynamic-outlines" /> |
7 <meta content="ahem" name="flags" /> | 7 <meta content="ahem" name="flags" /> |
8 <style> | 8 <style> |
9 .container { | 9 .container { |
10 color:transparent; | 10 color:transparent; |
11 font:50px/1 Ahem; | 11 font:50px/1 Ahem; |
12 height:5em; | 12 height:6em; |
13 writing-mode:vertical-rl; | 13 writing-mode:vertical-rl; |
14 } | 14 } |
15 .outline { | 15 .outline { |
16 color:orange; | 16 color:orange; |
17 display:inline-block; | 17 display:inline-block; |
18 outline:blue solid 2px; | 18 outline:blue solid 2px; |
19 } | 19 } |
20 </style> | 20 </style> |
21 <p>Test passes if inside of blue rectangles are orange. | 21 <p>Test passes if inside of blue rectangles are orange. |
22 <div class="container"> | 22 <div class="container"> |
23 <!-- | 23 <!-- |
24 Additional div to ensure that the origin of the containing block of the | 24 Additional div to ensure that the origin of the containing block of the |
25 outline span is different from the origin of the writing mode root. | 25 outline span is different from the origin of the writing mode root. |
26 --> | 26 --> |
| 27 <div>123<span class="outline">XXX</span></div> |
| 28 <div>12345 6<span class="outline">XX</span></div> |
27 <div>1</div> | 29 <div>1</div> |
28 <div>12345<span class="outline">67</span></div> | 30 <div><span class="outline">1</span></div> |
29 <div>1</div> | |
30 <div>1</div> | |
31 <div>1</div> | 31 <div>1</div> |
32 </div> | 32 </div> |
OLD | NEW |