| OLD | NEW |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml"> | 2 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 <head> | 3 <head> |
| 4 <title>CSS Writing Modes Test: vertical align - 'positive percentage (80%)'
(alphabetical baseline with horizontal layout)</title> | 4 <title>CSS Writing Modes Test: vertical align - 'zero length (0em)' (alphabe
tical baseline with horizontal layout)</title> |
| 5 <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmai
l.com" /> | 5 <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmai
l.com" /> |
| 6 <link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/
css-writing-modes-3/#baseline-alignment" /> | 6 <link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/
css-writing-modes-3/#baseline-alignment" /> |
| 7 <link rel="help" title="10.8 Line height calculations: the 'line-height' and
'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line
-height" /> | 7 <link rel="help" title="10.8 Line height calculations: the 'line-height' and
'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line
-height" /> |
| 8 <link rel="match" href="vertical-alignment-022-ref.xht" /> | 8 <link rel="match" href="vertical-alignment-010-ref.xht" /> |
| 9 <meta name="assert" content="This test checks the generation of text baselin
e with vertical align property. When 'writing-mode' is horizontal, then the alph
abetical baseline is used as the dominant baseline." /> | 9 <meta name="assert" content="This test checks the generation of text baselin
e with vertical align property. When 'writing-mode' is horizontal, then the alph
abetical baseline is used as the dominant baseline." /> |
| 10 <meta name="flags" content="ahem image" /> | 10 <meta name="flags" content="image" /> |
| 11 <style type="text/css"><![CDATA[ | 11 <style type="text/css"><![CDATA[ |
| 12 div > p, p.control { | 12 div > p, p.control { |
| 13 font: 40px/1 "Ahem"; | 13 font-size: 2em; |
| 14 background-color: orange; | 14 background-color: orange; |
| 15 } | 15 } |
| 16 | 16 |
| 17 /* vertical-align */ | 17 /* vertical-align */ |
| 18 img { | 18 img { |
| 19 vertical-align: 80%; | 19 vertical-align: 0em; |
| 20 } | 20 } |
| 21 img.line { | 21 img.line { |
| 22 margin-left: -260px; | 22 margin-left: -230px; |
| 23 } | 23 } |
| 24 | 24 |
| 25 /* writing-mode property */ | 25 /* writing-mode property */ |
| 26 .horizontal-tb { | 26 .horizontal-tb { |
| 27 -webkit-writing-mode: horizontal-tb; | 27 -webkit-writing-mode: horizontal-tb; |
| 28 } | 28 } |
| 29 | 29 |
| 30 /* text-orientation property */ | 30 /* text-orientation property */ |
| 31 .mixed { | 31 .mixed { |
| 32 -webkit-text-orientation: mixed; | 32 -webkit-text-orientation: mixed; |
| (...skipping 11 matching lines...) Expand all Loading... |
| 44 -webkit-text-orientation: sideways; | 44 -webkit-text-orientation: sideways; |
| 45 } | 45 } |
| 46 .use-glyph-orientation { | 46 .use-glyph-orientation { |
| 47 -webkit-text-orientation: use-glyph-orientation; | 47 -webkit-text-orientation: use-glyph-orientation; |
| 48 } | 48 } |
| 49 ]]></style> | 49 ]]></style> |
| 50 </head> | 50 </head> |
| 51 <body> | 51 <body> |
| 52 <p>Test passes if ...</p> | 52 <p>Test passes if ...</p> |
| 53 <ol> | 53 <ol> |
| 54 <li>the top of black stripe is touching a thin blue line in each 7 orange
rectangles.</li> | 54 <li>the bottom of glyph 'L' is touching a thin blue line in each 7 orange
rectangles and</li> |
| 55 <li>the bottom edge of yellow square is aligned to a thin blue line in eac
h 7 orange rectangles and</li> | 55 <li>the bottom edge of yellow square is aligned to a thin blue line in eac
h 7 orange rectangles and</li> |
| 56 <li>all 7 orange rectangles are <strong>identical</strong>.</li> | 56 <li>all 7 orange rectangles are <strong>identical</strong>.</li> |
| 57 </ol> | 57 </ol> |
| 58 | 58 |
| 59 <p class="control">CONTR | 59 <p class="control">LLLLLLLLLL |
| 60 <img class="square" src="./support/yellow-square-59x59.png" alt="Image dow
nload support must be enabled" /> | 60 <img class="square" src="./support/yellow-square-59x59.png" alt="Image dow
nload support must be enabled" /> |
| 61 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image dow
nload support must be enabled" /> | 61 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image dow
nload support must be enabled" /> |
| 62 </p> | 62 </p> |
| 63 | 63 |
| 64 <div class="horizontal-tb"> | 64 <div class="horizontal-tb"> |
| 65 <p class="mixed">MIXED | 65 <p class="mixed">LLLLLLLLLL |
| 66 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> | 66 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> |
| 67 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> | 67 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> |
| 68 </p> | 68 </p> |
| 69 <p class="upright">UPRIG | 69 <p class="upright">LLLLLLLLLL |
| 70 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> | 70 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> |
| 71 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> | 71 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> |
| 72 </p> | 72 </p> |
| 73 <p class="sideways-right">SIDER | 73 <p class="sideways-right">LLLLLLLLLL |
| 74 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> | 74 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> |
| 75 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> | 75 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> |
| 76 </p> | 76 </p> |
| 77 <p class="sideways-left">SIDEL | 77 <p class="sideways-left">LLLLLLLLLL |
| 78 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> | 78 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> |
| 79 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> | 79 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> |
| 80 </p> | 80 </p> |
| 81 <p class="sideways">SIDEW | 81 <p class="sideways">LLLLLLLLLL |
| 82 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> | 82 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> |
| 83 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> | 83 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> |
| 84 </p> | 84 </p> |
| 85 <p class="use-glyph-orientation">USEGL | 85 <p class="use-glyph-orientation">LLLLLLLLLL |
| 86 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> | 86 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59
x59.png" alt="Image download support must be enabled" /> |
| 87 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> | 87 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d
ownload support must be enabled" /> |
| 88 </p> | 88 </p> |
| 89 </div> | 89 </div> |
| 90 </body> | 90 </body> |
| 91 </html> | 91 </html> |
| OLD | NEW |