changeset
[css3-writing-modes] add new inline-block-baseline tests. In case of containing two blocks.
Sun, 24 Feb 2013 16:34:55 +0900
- author
- 塩澤 元 (Shiozawa, Hajime) <hajime.shiozawa@gmail.com>
- date
- Sun, 24 Feb 2013 16:34:55 +0900
- changeset 5019
- d5f2bbe7667e
- parent 5018
- 706911f9d3fb
- child 5020
- ccdfb1eb56a7
[css3-writing-modes] add new inline-block-baseline tests. In case of containing two blocks.
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-001.xht Sun Feb 24 16:34:55 2013 +0900 1.3 @@ -0,0 +1,86 @@ 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 block alignment - inline block containing two blocks (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.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css3-writing-modes/#replaced-baselines" /> 1.10 + <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" /> 1.11 + <meta name="assert" content="This test checks the generation of inline block baseline. Unless 'writing-mode' is vertical and also unless 'text-orientation' is 'mixed' or 'upright', the alphabetical baseline is used as the dominant baseline." /> 1.12 + <meta name="flags" content="image" /> 1.13 + <style type="text/css"><![CDATA[ 1.14 + div > p { 1.15 + padding: 0.2em; 1.16 + font-size: 2em; 1.17 + background-color: orange; 1.18 + } 1.19 + img { 1.20 + margin-left: -300px; 1.21 + } 1.22 + 1.23 + /* writing-mode property */ 1.24 + .horizontal-tb { 1.25 + writing-mode: horizontal-tb; 1.26 + } 1.27 + 1.28 + /* text-orientation property */ 1.29 + .mixed { 1.30 + text-orientation: mixed; 1.31 + } 1.32 + .upright { 1.33 + text-orientation: upright; 1.34 + } 1.35 + .sideways-right { 1.36 + text-orientation: sideways-right; 1.37 + } 1.38 + .sideways-left { 1.39 + text-orientation: sideways-left; 1.40 + } 1.41 + .sideways { 1.42 + text-orientation: sideways; 1.43 + } 1.44 + .use-glyph-orientation { 1.45 + text-orientation: use-glyph-orientation; 1.46 + } 1.47 + 1.48 + /* inline block */ 1.49 + .inline-block { 1.50 + display: inline-block; 1.51 + } 1.52 + .descendant-block { 1.53 + display: block; 1.54 + background-color: yellow; 1.55 + padding-left: 1em; 1.56 + padding-right: 1em; 1.57 + } 1.58 + ]]></style> 1.59 + </head> 1.60 + <body> 1.61 + <p>Test passes if the bottom of glyph 'L' is touching a thin blue line in each 6 orange rectangles and if all 6 orange rectangles are <strong>identical</strong>.</p> 1.62 + <div class="horizontal-tb"> 1.63 + <p class="mixed">LLLL<span class="inline-block"> 1.64 + <span class="descendant-block">ABCD</span> 1.65 + <span class="descendant-block">LLLLL</span> 1.66 + </span>LLLL<img src="support/blue-horiz-line_320x1.png" alt="Image download support must be enabled" /></p> 1.67 + <p class="upright">LLLL<span class="inline-block"> 1.68 + <span class="descendant-block">ABCD</span> 1.69 + <span class="descendant-block">LLLLL</span> 1.70 + </span>LLLL<img src="support/blue-horiz-line_320x1.png" alt="Image download support must be enabled" /></p> 1.71 + <p class="sideways-right">LLLL<span class="inline-block"> 1.72 + <span class="descendant-block">ABCD</span> 1.73 + <span class="descendant-block">LLLLL</span> 1.74 + </span>LLLL<img src="support/blue-horiz-line_320x1.png" alt="Image download support must be enabled" /></p> 1.75 + <p class="sideways-left">LLLL<span class="inline-block"> 1.76 + <span class="descendant-block">ABCD</span> 1.77 + <span class="descendant-block">LLLLL</span> 1.78 + </span>LLLL<img src="support/blue-horiz-line_320x1.png" alt="Image download support must be enabled" /></p> 1.79 + <p class="sideways">LLLL<span class="inline-block"> 1.80 + <span class="descendant-block">ABCD</span> 1.81 + <span class="descendant-block">LLLLL</span> 1.82 + </span>LLLL<img src="support/blue-horiz-line_320x1.png" alt="Image download support must be enabled" /></p> 1.83 + <p class="use-glyph-orientation">LLLL<span class="inline-block"> 1.84 + <span class="descendant-block">ABCD</span> 1.85 + <span class="descendant-block">LLLLL</span> 1.86 + </span>LLLL<img src="support/blue-horiz-line_320x1.png" alt="Image download support must be enabled" /></p> 1.87 + </div> 1.88 + </body> 1.89 +</html>
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-002-lr.xht Sun Feb 24 16:34:55 2013 +0900 2.3 @@ -0,0 +1,72 @@ 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: inline block alignment - inline block containing two blocks (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.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css3-writing-modes/#replaced-baselines" /> 2.10 + <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" /> 2.11 + <meta name="assert" content="This test checks the generation of inline block 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.12 + <meta name="flags" content="image" /> 2.13 + <style type="text/css"><![CDATA[ 2.14 + div > p { 2.15 + padding: 0.2em; 2.16 + font-size: 2em; 2.17 + background-color: orange; 2.18 + } 2.19 + img { 2.20 + margin-top: -300px; 2.21 + } 2.22 + 2.23 + /* writing-mode property */ 2.24 + .vertical-lr { 2.25 + writing-mode: vertical-lr; 2.26 + } 2.27 + 2.28 + /* text-orientation property */ 2.29 + .sideways-right { 2.30 + text-orientation: sideways-right; 2.31 + } 2.32 + .sideways-left { 2.33 + text-orientation: sideways-left; 2.34 + } 2.35 + .sideways { 2.36 + text-orientation: sideways; 2.37 + } 2.38 + .use-glyph-orientation { 2.39 + text-orientation: use-glyph-orientation; 2.40 + } 2.41 + 2.42 + /* inline block */ 2.43 + .inline-block { 2.44 + display: inline-block; 2.45 + } 2.46 + .descendant-block { 2.47 + display: block; 2.48 + background-color: yellow; 2.49 + padding-top: 1.5em; 2.50 + padding-bottom: 1.5em; 2.51 + } 2.52 + ]]></style> 2.53 + </head> 2.54 + <body> 2.55 + <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.56 + <div class="vertical-lr"> 2.57 + <p class="sideways-right">LLLL<span class="inline-block"> 2.58 + <span class="descendant-block">ABC</span> 2.59 + <span class="descendant-block">LLLL</span> 2.60 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 2.61 + <p class="sideways-left">LLLL<span class="inline-block"> 2.62 + <span class="descendant-block">ABC</span> 2.63 + <span class="descendant-block">LLLL</span> 2.64 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 2.65 + <p class="sideways">LLLL<span class="inline-block"> 2.66 + <span class="descendant-block">ABC</span> 2.67 + <span class="descendant-block">LLLL</span> 2.68 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 2.69 + <p class="use-glyph-orientation">LLLL<span class="inline-block"> 2.70 + <span class="descendant-block">ABC</span> 2.71 + <span class="descendant-block">LLLL</span> 2.72 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 2.73 + </div> 2.74 + </body> 2.75 +</html>
3.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 3.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-002-rl.xht Sun Feb 24 16:34:55 2013 +0900 3.3 @@ -0,0 +1,72 @@ 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: inline block alignment - inline block containing two blocks (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.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css3-writing-modes/#replaced-baselines" /> 3.10 + <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" /> 3.11 + <meta name="assert" content="This test checks the generation of inline block 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.12 + <meta name="flags" content="image" /> 3.13 + <style type="text/css"><![CDATA[ 3.14 + div > p { 3.15 + padding: 0.2em; 3.16 + font-size: 2em; 3.17 + background-color: orange; 3.18 + } 3.19 + img { 3.20 + margin-top: -300px; 3.21 + } 3.22 + 3.23 + /* writing-mode property */ 3.24 + .vertical-rl { 3.25 + writing-mode: vertical-rl; 3.26 + } 3.27 + 3.28 + /* text-orientation property */ 3.29 + .sideways-right { 3.30 + text-orientation: sideways-right; 3.31 + } 3.32 + .sideways-left { 3.33 + text-orientation: sideways-left; 3.34 + } 3.35 + .sideways { 3.36 + text-orientation: sideways; 3.37 + } 3.38 + .use-glyph-orientation { 3.39 + text-orientation: use-glyph-orientation; 3.40 + } 3.41 + 3.42 + /* inline block */ 3.43 + .inline-block { 3.44 + display: inline-block; 3.45 + } 3.46 + .descendant-block { 3.47 + display: block; 3.48 + background-color: yellow; 3.49 + padding-top: 1.5em; 3.50 + padding-bottom: 1.5em; 3.51 + } 3.52 + ]]></style> 3.53 + </head> 3.54 + <body> 3.55 + <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.56 + <div class="vertical-rl"> 3.57 + <p class="sideways-right">LLLL<span class="inline-block"> 3.58 + <span class="descendant-block">ABC</span> 3.59 + <span class="descendant-block">LLLL</span> 3.60 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 3.61 + <p class="sideways-left">LLLL<span class="inline-block"> 3.62 + <span class="descendant-block">ABC</span> 3.63 + <span class="descendant-block">LLLL</span> 3.64 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 3.65 + <p class="sideways">LLLL<span class="inline-block"> 3.66 + <span class="descendant-block">ABC</span> 3.67 + <span class="descendant-block">LLLL</span> 3.68 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 3.69 + <p class="use-glyph-orientation">LLLL<span class="inline-block"> 3.70 + <span class="descendant-block">ABC</span> 3.71 + <span class="descendant-block">LLLL</span> 3.72 + </span>LLL<img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 3.73 + </div> 3.74 + </body> 3.75 +</html>
4.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 4.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-003-lr.xht Sun Feb 24 16:34:55 2013 +0900 4.3 @@ -0,0 +1,63 @@ 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 block alignment - inline block containing two blocks (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.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css3-writing-modes/#replaced-baselines" /> 4.10 + <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" /> 4.11 + <meta name="assert" content="This test checks the generation of inline block baseline. When 'writing-mode' is vertical and when 'text-orientation' is 'mixed' or 'upright', then the central baseline is used as the dominant baseline." /> 4.12 + <meta name="flags" content="ahem image" /> 4.13 + <style type="text/css"><![CDATA[ 4.14 + div > p { 4.15 + font: 40px/1 "Ahem"; 4.16 + padding: 0.2em; 4.17 + background-color: orange; 4.18 + } 4.19 + img { 4.20 + margin-top: -300px; 4.21 + } 4.22 + 4.23 + /* writing-mode property */ 4.24 + .vertical-lr { 4.25 + writing-mode: vertical-lr; 4.26 + } 4.27 + 4.28 + /* text-orientation property */ 4.29 + .mixed { 4.30 + text-orientation: mixed; 4.31 + } 4.32 + .upright { 4.33 + text-orientation: upright; 4.34 + } 4.35 + 4.36 + /* inline block */ 4.37 + .inline-block { 4.38 + display: inline-block; 4.39 + } 4.40 + .descendant-block { 4.41 + display: block; 4.42 + background-color: yellow; 4.43 + } 4.44 + 4.45 + /* font */ 4.46 + .half { 4.47 + vertical-align: text-top; 4.48 + font-size: 0.5em; 4.49 + } 4.50 + .top { 4.51 + color: gold; 4.52 + } 4.53 + ]]></style> 4.54 + </head> 4.55 + <body> 4.56 + <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.57 + <div class="vertical-lr"> 4.58 + <p class="mixed"><span class='half'>OUTSIDE</span><span class="inline-block"> 4.59 + <span class="descendant-block top">TOP.</span><span class="descendant-block"><span class='half'>BOTTOM..</span></span> 4.60 + </span><img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 4.61 + <p class="upright"><span class='half'>OUTSIDE</span><span class="inline-block"> 4.62 + <span class="descendant-block top">TOP.</span><span class="descendant-block"><span class='half'>BOTTOM..</span></span> 4.63 + </span><img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 4.64 + </div> 4.65 + </body> 4.66 +</html>
5.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 5.2 +++ b/contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-003-rl.xht Sun Feb 24 16:34:55 2013 +0900 5.3 @@ -0,0 +1,63 @@ 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: inline block alignment - inline block containing two blocks (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.3. Atomic Inline Baseline" href="http://www.w3.org/TR/css3-writing-modes/#replaced-baselines" /> 5.10 + <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" /> 5.11 + <meta name="assert" content="This test checks the generation of inline block 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.12 + <meta name="flags" content="ahem image" /> 5.13 + <style type="text/css"><![CDATA[ 5.14 + div > p { 5.15 + font: 40px/1 "Ahem"; 5.16 + padding: 0.2em; 5.17 + background-color: orange; 5.18 + } 5.19 + img { 5.20 + margin-top: -300px; 5.21 + } 5.22 + 5.23 + /* writing-mode property */ 5.24 + .vertical-rl { 5.25 + writing-mode: vertical-rl; 5.26 + } 5.27 + 5.28 + /* text-orientation property */ 5.29 + .mixed { 5.30 + text-orientation: mixed; 5.31 + } 5.32 + .upright { 5.33 + text-orientation: upright; 5.34 + } 5.35 + 5.36 + /* inline block */ 5.37 + .inline-block { 5.38 + display: inline-block; 5.39 + } 5.40 + .descendant-block { 5.41 + display: block; 5.42 + background-color: yellow; 5.43 + } 5.44 + 5.45 + /* font */ 5.46 + .half { 5.47 + vertical-align: text-top; 5.48 + font-size: 0.5em; 5.49 + } 5.50 + .top { 5.51 + color: gold; 5.52 + } 5.53 + ]]></style> 5.54 + </head> 5.55 + <body> 5.56 + <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.57 + <div class="vertical-rl"> 5.58 + <p class="mixed"><span class='half'>OUTTEXT</span><span class="inline-block"> 5.59 + <span class="descendant-block top">TOP.</span><span class="descendant-block"><span class='half'>BOTTOM..</span></span> 5.60 + </span><img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 5.61 + <p class="upright"><span class='half'>OUTTEXT</span><span class="inline-block"> 5.62 + <span class="descendant-block top">TOP.</span><span class="descendant-block"><span class='half'>BOTTOM..</span></span> 5.63 + </span><img src="support/blue-vert-line_1x320.png" alt="Image download support must be enabled" /></p> 5.64 + </div> 5.65 + </body> 5.66 +</html>
6.1 Binary file contributors/hshiozawa/submitted/css3-writing-modes/support/blue-horiz-line_320x1.png has changed
7.1 Binary file contributors/hshiozawa/submitted/css3-writing-modes/support/blue-vert-line_1x320.png has changed
