[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.

contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-001.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-002-lr.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-002-rl.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-003-lr.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/inline-block-alignment-003-rl.xht file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/support/blue-horiz-line_320x1.png file | annotate | diff | comparison | revisions
contributors/hshiozawa/submitted/css3-writing-modes/support/blue-vert-line_1x320.png file | annotate | diff | comparison | revisions
     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

mercurial