[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

contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-001.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-002-lr.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-002-rl.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-002.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-003-lr.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-003-rl.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/text-baseline-003.xht file | annotate | diff | comparison | revisions
     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 -

mercurial