changeset
[css3-writing-modes] add new text-baseline tests. In case of including diffrent font size.
Sun, 24 Feb 2013 16:25:45 +0900
- author
- 塩澤 元 (Shiozawa, Hajime) <hajime.shiozawa@gmail.com>
- date
- Sun, 24 Feb 2013 16:25:45 +0900
- changeset 5018
- 706911f9d3fb
- parent 5017
- b3b930cb7076
- child 5019
- d5f2bbe7667e
[css3-writing-modes] add new text-baseline tests. In case of including diffrent font size.
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-004.xht Sun Feb 24 16:25:45 2013 +0900 1.3 @@ -0,0 +1,65 @@ 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: text baseline alignment - text including different font size (alphabetical alignment with horizontal layout)</title> 1.8 + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 1.9 + <link rel="help" title="CSS3 Writing modes: 4.4. Baseline Alignment" href="http://www.w3.org/TR/css3-writing-modes/#baseline-alignment" /> 1.10 + <meta name="assert" content="This test checks the generation of text baseline with different font size. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline and it." /> 1.11 + <meta name="flags" content="image" /> 1.12 + <style type="text/css"><![CDATA[ 1.13 + div > p, p#control { 1.14 + font-size: 2em; 1.15 + background-color: orange; 1.16 + } 1.17 + img { 1.18 + margin-left: -210px; 1.19 + } 1.20 + 1.21 + /* writing-mode property */ 1.22 + .horizontal-tb { 1.23 + writing-mode: horizontal-tb; 1.24 + } 1.25 + 1.26 + /* text-orientation property */ 1.27 + .mixed { 1.28 + text-orientation: mixed; 1.29 + } 1.30 + .upright { 1.31 + text-orientation: upright; 1.32 + } 1.33 + .sideways-right { 1.34 + text-orientation: sideways-right; 1.35 + } 1.36 + .sideways-left { 1.37 + text-orientation: sideways-left; 1.38 + } 1.39 + .sideways { 1.40 + text-orientation: sideways; 1.41 + } 1.42 + .use-glyph-orientation { 1.43 + text-orientation: use-glyph-orientation; 1.44 + } 1.45 + 1.46 + /* font */ 1.47 + .font-size-large { 1.48 + font-size: 1.5em; 1.49 + } 1.50 + .font-size-small { 1.51 + font-size: 0.75em; 1.52 + } 1.53 + ]]></style> 1.54 + </head> 1.55 + <body> 1.56 + <p>Test passes if the bottom of glyph 'L' is touching a thin blue line in each 7 orange rectangles and if all 7 orange rectangles are <strong>identical</strong>.</p> 1.57 + <p id="control">LLL<span class='font-size-large'>LL</span><span class='font-size-small'>LL</span>LLL<img src="support/blue-horiz-line_220x1.png" alt="Image download support must be enabled" /></p> 1.58 + 1.59 + <div class="horizontal-tb"> 1.60 + <p class="mixed">LLL<span class='font-size-large'>LL</span><span class='font-size-small'>LL</span>LLL<img src="./support/blue-horiz-line_220x1.png" alt="Image download support must be enabled" /></p> 1.61 + <p class="upright">LLL<span class='font-size-large'>LL</span><span class='font-size-small'>LL</span>LLL<img src="./support/blue-horiz-line_220x1.png" alt="Image download support must be enabled" /></p> 1.62 + <p class="sideways-right">LLL<span class='font-size-large'>LL</span><span class='font-size-small'>LL</span>LLL<img src="./support/blue-horiz-line_220x1.png" alt="Image download support must be enabled" /></p> 1.63 + <p class="sideways-left">LLL<span class='font-size-large'>LL</span><span class='font-size-small'>LL</span>LLL<img src="./support/blue-horiz-line_220x1.png" alt="Image download support must be enabled" /></p> 1.64 + <p class="sideways">LLL<span class='font-size-large'>LL</span><span class='font-size-small'>LL</span>LLL<img src="./support/blue-horiz-line_220x1.png" alt="Image download support must be enabled" /></p> 1.65 + <p class="use-glyph-orientation">LLL<span class='font-size-large'>LL</span><span class='font-size-small'>LL</span>LLL<img src="./support/blue-horiz-line_220x1.png" alt="Image download support must be enabled" /></p> 1.66 + </div> 1.67 + </body> 1.68 +</html>
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-005-lr.xht Sun Feb 24 16:25:45 2013 +0900 2.3 @@ -0,0 +1,55 @@ 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 - text including different font size (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="CSS3 Writing modes: 4.4. Baseline Alignment" href="http://www.w3.org/TR/css3-writing-modes/#baseline-alignment" /> 2.10 + <meta name="assert" content="This test checks the generation of text baseline with different font size. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline and it." /> 2.11 + <meta name="flags" content="image" /> 2.12 + <style type="text/css"><![CDATA[ 2.13 + div > p { 2.14 + font-size: 2em; 2.15 + background-color: orange; 2.16 + } 2.17 + img { 2.18 + margin-top: -200px; 2.19 + } 2.20 + 2.21 + /* writing-mode property */ 2.22 + .vertical-lr { 2.23 + writing-mode: vertical-lr; 2.24 + } 2.25 + 2.26 + /* text-orientation property */ 2.27 + .sideways-right { 2.28 + text-orientation: sideways-right; 2.29 + } 2.30 + .sideways-left { 2.31 + text-orientation: sideways-left; 2.32 + } 2.33 + .sideways { 2.34 + text-orientation: sideways; 2.35 + } 2.36 + .use-glyph-orientation { 2.37 + text-orientation: use-glyph-orientation; 2.38 + } 2.39 + 2.40 + /* font size */ 2.41 + .font-size-large { 2.42 + font-size: 1.5em; 2.43 + } 2.44 + .font-size-small { 2.45 + font-size: 0.75em; 2.46 + } 2.47 + ]]></style> 2.48 + </head> 2.49 + <body> 2.50 + <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.51 + <div class="vertical-lr"> 2.52 + <p class="sideways-right">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.53 + <p class="sideways-left">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.54 + <p class="sideways">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.55 + <p class="use-glyph-orientation">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 2.56 + </div> 2.57 + </body> 2.58 +</html>
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 3.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-005-rl.xht Sun Feb 24 16:25:45 2013 +0900 3.3 @@ -0,0 +1,55 @@ 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 - text including different font size (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="CSS3 Writing modes: 4.4. Baseline Alignment" href="http://www.w3.org/TR/css3-writing-modes/#baseline-alignment" /> 3.10 + <meta name="assert" content="This test checks the generation of text baseline with different font size. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline and it." /> 3.11 + <meta name="flags" content="image" /> 3.12 + <style type="text/css"><![CDATA[ 3.13 + div > p { 3.14 + font-size: 2em; 3.15 + background-color: orange; 3.16 + } 3.17 + img { 3.18 + margin-top: -200px; 3.19 + } 3.20 + 3.21 + /* writing-mode property */ 3.22 + .vertical-rl { 3.23 + writing-mode: vertical-rl; 3.24 + } 3.25 + 3.26 + /* text-orientation property */ 3.27 + .sideways-right { 3.28 + text-orientation: sideways-right; 3.29 + } 3.30 + .sideways-left { 3.31 + text-orientation: sideways-left; 3.32 + } 3.33 + .sideways { 3.34 + text-orientation: sideways; 3.35 + } 3.36 + .use-glyph-orientation { 3.37 + text-orientation: use-glyph-orientation; 3.38 + } 3.39 + 3.40 + /* font size */ 3.41 + .font-size-large { 3.42 + font-size: 1.5em; 3.43 + } 3.44 + .font-size-small { 3.45 + font-size: 0.75em; 3.46 + } 3.47 + ]]></style> 3.48 + </head> 3.49 + <body> 3.50 + <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.51 + <div class="vertical-rl"> 3.52 + <p class="sideways-right">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.53 + <p class="sideways-left">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.54 + <p class="sideways">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.55 + <p class="use-glyph-orientation">LLL<span class='font-size-large'>LLL</span><span class='font-size-small'>LLL</span>LLL<img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 3.56 + </div> 3.57 + </body> 3.58 +</html>
4.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 4.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-006-lr.xht Sun Feb 24 16:25:45 2013 +0900 4.3 @@ -0,0 +1,51 @@ 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: text baseline alignment - text including different font size (central alignment with vertical layout)</title> 4.8 + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 4.9 + <link rel="help" title="CSS3 Writing modes: 4.4. Baseline Alignment" href="http://www.w3.org/TR/css3-writing-modes/#baseline-alignment" /> 4.10 + <meta name="assert" content="This test checks the generation of text baseline with different font size. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed' or 'upright', then the central baseline is used as the dominant baseline." /> 4.11 + <meta name="flags" content="ahem image" /> 4.12 + <style type="text/css"><![CDATA[ 4.13 + div > p { 4.14 + font: 40px/1 "Ahem"; 4.15 + background-color: orange; 4.16 + } 4.17 + img { 4.18 + margin-top: -200px; 4.19 + } 4.20 + 4.21 + /* writing-mode property */ 4.22 + .vertical-lr { 4.23 + writing-mode: vertical-lr; 4.24 + } 4.25 + 4.26 + /* text-orientation property */ 4.27 + .mixed { 4.28 + text-orientation: mixed; 4.29 + } 4.30 + .upright { 4.31 + text-orientation: upright; 4.32 + } 4.33 + 4.34 + /* font */ 4.35 + .font-size-large { 4.36 + font-size: 1.5em; 4.37 + } 4.38 + .font-size-small { 4.39 + font-size: 0.75em; 4.40 + } 4.41 + .half { 4.42 + vertical-align: text-top; 4.43 + font-size: 0.5em; 4.44 + } 4.45 + ]]></style> 4.46 + </head> 4.47 + <body> 4.48 + <p>Test passes if the <strong>right side</strong> 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> 4.49 + <div class="vertical-lr"> 4.50 + <p class="mixed"><span class='half'>Mid</span><span class='font-size-large'><span class='half'>Lrg</span></span><span class='font-size-small'><span class='half'>Sml</span></span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 4.51 + <p class="upright"><span class='half'>Mid</span><span class='font-size-large'><span class='half'>Lrg</span></span><span class='font-size-small'><span class='half'>Sml</span></span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 4.52 + </div> 4.53 + </body> 4.54 +</html>
5.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 5.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-006-rl.xht Sun Feb 24 16:25:45 2013 +0900 5.3 @@ -0,0 +1,51 @@ 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 - text including different font size (central alignment with vertical layout)</title> 5.8 + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 5.9 + <link rel="help" title="CSS3 Writing modes: 4.4. Baseline Alignment" href="http://www.w3.org/TR/css3-writing-modes/#baseline-alignment" /> 5.10 + <meta name="assert" content="This test checks the generation of text baseline with different font size. 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="ahem image" /> 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 + img { 5.18 + margin-top: -200px; 5.19 + } 5.20 + 5.21 + /* writing-mode property */ 5.22 + .vertical-rl { 5.23 + writing-mode: vertical-rl; 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 */ 5.35 + .font-size-large { 5.36 + font-size: 1.5em; 5.37 + } 5.38 + .font-size-small { 5.39 + font-size: 0.75em; 5.40 + } 5.41 + .half { 5.42 + vertical-align: text-top; 5.43 + font-size: 0.5em; 5.44 + } 5.45 + ]]></style> 5.46 + </head> 5.47 + <body> 5.48 + <p>Test passes if the <strong>left side</strong> 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.49 + <div class="vertical-rl"> 5.50 + <p class="mixed"><span class='half'>Mid</span><span class='font-size-large'><span class='half'>Lrg</span></span><span class='font-size-small'><span class='half'>Sml</span></span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 5.51 + <p class="upright"><span class='half'>Mid</span><span class='font-size-large'><span class='half'>Lrg</span></span><span class='font-size-small'><span class='half'>Sml</span></span><img src="./support/blue-vert-line_1x220.png" alt="Image download support must be enabled" /></p> 5.52 + </div> 5.53 + </body> 5.54 +</html>
