changeset
[css3-writing-modes] modified text-baseline-00{1|2|3}.xht
Sat, 23 Feb 2013 17:14:59 +0900
- author
- 塩澤 元 (Shiozawa, Hajime) <hajime.shiozawa@gmail.com>
- date
- Sat, 23 Feb 2013 17:14:59 +0900
- changeset 5009
- a2895f1bcaee
- parent 5003
- 746607480c9c
- child 5010
- 85f059ec2d9f
[css3-writing-modes] modified text-baseline-00{1|2|3}.xht
1.1 --- a/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-001.xht Fri Feb 22 22:04:09 2013 +0900 1.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-001.xht Sat Feb 23 17:14:59 2013 +0900 1.3 @@ -1,7 +1,7 @@ 1.4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 1.5 <html xmlns="http://www.w3.org/1999/xhtml"> 1.6 <head> 1.7 - <title>CSS Writing Modes Test: inline alignment - Text Baseline (horizontal layout with alphabetical alignment)</title> 1.8 + <title>CSS Writing Modes Test: text baseline alignment (alphabetical alignment with horizontal layout)</title> 1.9 <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 1.10 <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css3-writing-modes/#text-baselines" /> 1.11 <link rel="match" href="text-baseline-001-ref.xht" />
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-002-lr.xht Sat Feb 23 17:14:59 2013 +0900 2.3 @@ -0,0 +1,46 @@ 2.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2.5 +<html xmlns="http://www.w3.org/1999/xhtml"> 2.6 + <head> 2.7 + <title>CSS Writing Modes Test: text baseline alignment (alphabetical alignment with vertical-layout)</title> 2.8 + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 2.9 + <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css3-writing-modes/#text-baselines" /> 2.10 + <meta name="assert" content="This test checks the generation of text baseline. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline." /> 2.11 + <style type="text/css"><![CDATA[ 2.12 + div > p { 2.13 + font-size: 2em; 2.14 + background-color: orange; 2.15 + } 2.16 + div > p > img { 2.17 + margin-top: -210px; 2.18 + } 2.19 + 2.20 + /* writing-mode property */ 2.21 + .vertical-lr { 2.22 + writing-mode: vertical-lr; 2.23 + } 2.24 + 2.25 + /* text-orientation property */ 2.26 + .sideways-right { 2.27 + text-orientation: sideways-right; 2.28 + } 2.29 + .sideways-left { 2.30 + text-orientation: sideways-left; 2.31 + } 2.32 + .sideways { 2.33 + text-orientation: sideways; 2.34 + } 2.35 + .use-glyph-orientation { 2.36 + text-orientation: use-glyph-orientation; 2.37 + } 2.38 + ]]></style> 2.39 + </head> 2.40 + <body> 2.41 + <p>Test passes if the bottom of glyph 'L' is touching a thin blue line in each 4 orange rectangles and if all 4 orange rectangles are <strong>identical</strong>.</p> 2.42 + <div class="vertical-lr"> 2.43 + <p class="sideways-right">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.44 + <p class="sideways-left">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.45 + <p class="sideways">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.46 + <p class="use-glyph-orientation">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.47 + </div> 2.48 + </body> 2.49 +</html>
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 3.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-002-rl.xht Sat Feb 23 17:14:59 2013 +0900 3.3 @@ -0,0 +1,46 @@ 3.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3.5 +<html xmlns="http://www.w3.org/1999/xhtml"> 3.6 + <head> 3.7 + <title>CSS Writing Modes Test: text baseline alignment (alphabetical alignment with vertical-layout)</title> 3.8 + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 3.9 + <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css3-writing-modes/#text-baselines" /> 3.10 + <meta name="assert" content="This test checks the generation of text baseline. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline." /> 3.11 + <style type="text/css"><![CDATA[ 3.12 + div > p { 3.13 + font-size: 2em; 3.14 + background-color: orange; 3.15 + } 3.16 + div > p > img { 3.17 + margin-top: -210px; 3.18 + } 3.19 + 3.20 + /* writing-mode property */ 3.21 + .vertical-rl { 3.22 + writing-mode: vertical-rl; 3.23 + } 3.24 + 3.25 + /* text-orientation property */ 3.26 + .sideways-right { 3.27 + text-orientation: sideways-right; 3.28 + } 3.29 + .sideways-left { 3.30 + text-orientation: sideways-left; 3.31 + } 3.32 + .sideways { 3.33 + text-orientation: sideways; 3.34 + } 3.35 + .use-glyph-orientation { 3.36 + text-orientation: use-glyph-orientation; 3.37 + } 3.38 + ]]></style> 3.39 + </head> 3.40 + <body> 3.41 + <p>Test passes if the bottom of glyph 'L' is touching a thin blue line in each 4 orange rectangles and if all 4 orange rectangles are <strong>identical</strong>.</p> 3.42 + <div class="vertical-rl"> 3.43 + <p class="sideways-right">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.44 + <p class="sideways-left">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.45 + <p class="sideways">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.46 + <p class="use-glyph-orientation">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.47 + </div> 3.48 + </body> 3.49 +</html>
4.1 --- a/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-002.xht Fri Feb 22 22:04:09 2013 +0900 4.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 4.3 @@ -1,60 +0,0 @@ 4.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4.5 -<html xmlns="http://www.w3.org/1999/xhtml"> 4.6 - <head> 4.7 - <title>CSS Writing Modes Test: inline alignment - Text Baseline (vertical layout with central alignment)</title> 4.8 - <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 4.9 - <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css3-writing-modes/#text-baselines" /> 4.10 - <meta name="assert" content="This test checks the generation of text baseline. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline." /> 4.11 - <style type="text/css"><![CDATA[ 4.12 - div { 4.13 - margin: 10px; 4.14 - } 4.15 - div > p { 4.16 - font-size: 2em; 4.17 - background-color: orange; 4.18 - } 4.19 - div > p > img { 4.20 - margin-top: -200px; 4.21 - } 4.22 - 4.23 - /* writing-mode property */ 4.24 - .vertical-rl { 4.25 - writing-mode: vertical-rl; 4.26 - } 4.27 - .vertical-lr { 4.28 - writing-mode: vertical-lr; 4.29 - } 4.30 - 4.31 - /* text-orientation property */ 4.32 - .mixed { 4.33 - text-orientation: mixed; 4.34 - } 4.35 - .upright { 4.36 - text-orientation: upright; 4.37 - } 4.38 - .sideways-right { 4.39 - text-orientation: sideways-right; 4.40 - } 4.41 - .sideways-left { 4.42 - text-orientation: sideways-left; 4.43 - } 4.44 - .sideways { 4.45 - text-orientation: sideways; 4.46 - } 4.47 - .use-glyph-orientation { 4.48 - text-orientation: use-glyph-orientation; 4.49 - } 4.50 - ]]></style> 4.51 - </head> 4.52 - <body> 4.53 - <p>Test passes if the blue line position is halfway between the right and left (over and under) edges of line box.</p> 4.54 - <div class="vertical-rl"> 4.55 - <p class="mixed">ABCDEFGHIJ <img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 4.56 - <p class="upright">ABCDEFG<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 4.57 - </div> 4.58 - <div class="vertical-lr"> 4.59 - <p class="mixed">ABCDEFGHIJ <img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 4.60 - <p class="upright">ABCDEFG<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 4.61 - </div> 4.62 - </body> 4.63 -</html>
5.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 5.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-003-lr.xht Sat Feb 23 17:14:59 2013 +0900 5.3 @@ -0,0 +1,45 @@ 5.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 5.5 +<html xmlns="http://www.w3.org/1999/xhtml"> 5.6 + <head> 5.7 + <title>CSS Writing Modes Test: text baseline alignment (central alignment wit vertical layout)</title> 5.8 + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 5.9 + <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css3-writing-modes/#text-baselines" /> 5.10 + <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed' or 'upright', then the central baseline is used as the dominant baseline." /> 5.11 + <meta name="flags" content="font ahem" /> 5.12 + <style type="text/css"><![CDATA[ 5.13 + div > p { 5.14 + font: 40px/1 "Ahem"; 5.15 + background-color: orange; 5.16 + } 5.17 + div > p > img { 5.18 + margin-top: -200px; 5.19 + } 5.20 + 5.21 + /* writing-mode property */ 5.22 + .vertical-lr { 5.23 + writing-mode: vertical-lr; 5.24 + } 5.25 + 5.26 + /* text-orientation property */ 5.27 + .mixed { 5.28 + text-orientation: mixed; 5.29 + } 5.30 + .upright { 5.31 + text-orientation: upright; 5.32 + } 5.33 + 5.34 + /* font-size */ 5.35 + .half { 5.36 + vertical-align: text-top; 5.37 + font-size: 0.5em; 5.38 + } 5.39 + ]]></style> 5.40 + </head> 5.41 + <body> 5.42 + <p>Test passes if the side edge of black block is touching a thin blue line in each 2 orange rectangles and if all 2 orange rectangles are <strong>identical</strong>.</p> 5.43 + <div class="vertical-lr"> 5.44 + <p class="mixed"><span class='half'>XXXXXXXXXX</span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 5.45 + <p class="upright"><span class='half'>XXXXXXXXXX</span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 5.46 + </div> 5.47 + </body> 5.48 +</html>
6.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 6.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-003-rl.xht Sat Feb 23 17:14:59 2013 +0900 6.3 @@ -0,0 +1,45 @@ 6.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 6.5 +<html xmlns="http://www.w3.org/1999/xhtml"> 6.6 + <head> 6.7 + <title>CSS Writing Modes Test: text baseline alignment (central alignment wit vertical layout)</title> 6.8 + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 6.9 + <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css3-writing-modes/#text-baselines" /> 6.10 + <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed' or 'upright', then the central baseline is used as the dominant baseline." /> 6.11 + <meta name="flags" content="font ahem" /> 6.12 + <style type="text/css"><![CDATA[ 6.13 + div > p { 6.14 + font: 40px/1 "Ahem"; 6.15 + background-color: orange; 6.16 + } 6.17 + div > p > img { 6.18 + margin-top: -200px; 6.19 + } 6.20 + 6.21 + /* writing-mode property */ 6.22 + .vertical-rl { 6.23 + writing-mode: vertical-rl; 6.24 + } 6.25 + 6.26 + /* text-orientation property */ 6.27 + .mixed { 6.28 + text-orientation: mixed; 6.29 + } 6.30 + .upright { 6.31 + text-orientation: upright; 6.32 + } 6.33 + 6.34 + /* font-size */ 6.35 + .half { 6.36 + vertical-align: text-top; 6.37 + font-size: 0.5em; 6.38 + } 6.39 + ]]></style> 6.40 + </head> 6.41 + <body> 6.42 + <p>Test passes if the side edge of black block is touching a thin blue line in each 2 orange rectangles and if all 2 orange rectangles are <strong>identical</strong>.</p> 6.43 + <div class="vertical-rl"> 6.44 + <p class="mixed"><span class='half'>XXXXXXXXXX</span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 6.45 + <p class="upright"><span class='half'>XXXXXXXXXX</span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 6.46 + </div> 6.47 + </body> 6.48 +</html>
7.1 --- a/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-003.xht Fri Feb 22 22:04:09 2013 +0900 7.2 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 7.3 @@ -1,65 +0,0 @@ 7.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 7.5 -<html xmlns="http://www.w3.org/1999/xhtml"> 7.6 - <head> 7.7 - <title>CSS Writing Modes Test: inline alignment - Text Baseline (vertical layout with alphabetical alignment)</title> 7.8 - <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 7.9 - <link rel="help" title="4.2. Text Baseline" href="http://www.w3.org/TR/css3-writing-modes/#text-baselines" /> 7.10 - <meta name="assert" content="This test checks the generation of text baseline. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline." /> 7.11 - <style type="text/css"><![CDATA[ 7.12 - div { 7.13 - margin: 10px; 7.14 - } 7.15 - div > p { 7.16 - font-size: 2em; 7.17 - background-color: orange; 7.18 - } 7.19 - div > p > img { 7.20 - margin-top: -210px; 7.21 - } 7.22 - 7.23 - /* writing-mode property */ 7.24 - .vertical-rl { 7.25 - writing-mode: vertical-rl; 7.26 - } 7.27 - .vertical-lr { 7.28 - writing-mode: vertical-lr; 7.29 - } 7.30 - 7.31 - /* text-orientation property */ 7.32 - .mixed { 7.33 - text-orientation: mixed; 7.34 - } 7.35 - .upright { 7.36 - text-orientation: upright; 7.37 - } 7.38 - .sideways-right { 7.39 - text-orientation: sideways-right; 7.40 - } 7.41 - .sideways-left { 7.42 - text-orientation: sideways-left; 7.43 - } 7.44 - .sideways { 7.45 - text-orientation: sideways; 7.46 - } 7.47 - .use-glyph-orientation { 7.48 - text-orientation: use-glyph-orientation; 7.49 - } 7.50 - ]]></style> 7.51 - </head> 7.52 - <body> 7.53 - <p>Test passes if the bottom of glyph 'L' is touching a thin blue line in each 8 orange rectangles.</p> 7.54 - <div class="vertical-lr"> 7.55 - <p class="sideways-right">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.56 - <p class="sideways-left">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.57 - <p class="sideways">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.58 - <p class="use-glyph-orientation">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.59 - </div> 7.60 - <div class="vertical-rl"> 7.61 - <p class="sideways-right">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.62 - <p class="sideways-left">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.63 - <p class="sideways">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.64 - <p class="use-glyph-orientation">LLLLLLLLLLLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 7.65 - </div> 7.66 - </body> 7.67 -</html> 7.68 -
