[css3-writing-mode] added tests for vertical-align super, sub, middle.

web-platform-tests · Oct 4, 2015 · 07210df · 07210df
1 parent da03eb7
commit 07210df
Show file tree

Hide file tree

Showing 11 changed files with 352 additions and 2 deletions.
diff --git a/css-writing-modes-3/vertical-alignment-010-rl.xht b/css-writing-modes-3/vertical-alignment-010-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="rl-mixed">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-012-rl.xht b/css-writing-modes-3/vertical-alignment-012-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      vertical-align: super;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
+
+  <div id="rl-upright">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/...riting-modes-3/vertical-alignment-011.xht → ...ing-modes-3/vertical-alignment-014-rl.xht b/...riting-modes-3/vertical-alignment-011.xht → ...ing-modes-3/vertical-alignment-014-rl.xht
@@ -5,6 +5,7 @@
     <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
     <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
     <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'super', the baseline of the box is shifted to the right." />
     <meta name="flags" content="ahem" />
     <style type="text/css"><![CDATA[
     div#rl-sideways
@@ -18,6 +19,7 @@
     span
     {
       vertical-align: super;
+      color: blue;
       margin-top: -1em;
     }
     ]]></style>
@@ -26,9 +28,9 @@
 
   <body>
 
-  <p>Test passes if there is two orange rectangle.</p>
+  <p>Test passes if there are an orange rectangle on the left and a blue square on the right.</p>
 
-  <div id="rl-sideways">p<span>&Eacute;</span></div>
+  <div id="rl-sideways">X<span>X</span></div>
 
   </body>
 </html>
diff --git a/css-writing-modes-3/vertical-alignment-016-rl.xht b/css-writing-modes-3/vertical-alignment-016-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'mixed', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="rl-mixed">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-018-rl.xht b/css-writing-modes-3/vertical-alignment-018-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="rl-upright">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-020-rl.xht b/css-writing-modes-3/vertical-alignment-020-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways', 'vertical-align' is 'sub', the baseline of the box is shifted to the left." />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-sideways
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: orange;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      vertical-align: sub;
+      color: blue;
+      margin-top: -1em;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if there are a blue square on the left and an orange rectangle on the right.</p>
+
+  <div id="rl-sideways">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-022-ref.xht b/css-writing-modes-3/vertical-alignment-022-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      padding-left: 60px;
+      vertical-align: top;
+    }
+    img + br + img
+    {
+      padding-left: 108px; /* 60 px (padding-left) + 48 px (the position of small blue box)*/
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div>
+  <img class="blue" src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled" /><br/><img class="blue" src="support/swatch-blue.png" width="12" height="12" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-022-rl.xht b/css-writing-modes-3/vertical-alignment-022-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-022-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-upright
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+      text-orientation: upright;
+    }
+
+    span
+    {
+      font-size: 0.2em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-upright">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-024-rl.xht b/css-writing-modes-3/vertical-alignment-024-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'upright', 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-022-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-mixed
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+      text-orientation: mixed;
+    }
+
+    span
+    {
+      font-size: 0.2em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-mixed">X<span>X</span></div>
+
+  </body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-026-ref.xht b/css-writing-modes-3/vertical-alignment-026-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+  <meta name="flags" content="image" />
+  <style type="text/css"><![CDATA[
+    img
+    {
+      padding-left: 60px;
+      vertical-align: top;
+    }
+    img + br + img
+    {
+      padding-left: 72px; /* 60 px (padding-left) + 12 px (the position of small blue box)*/
+    }
+  ]]></style>
+
+</head>
+
+<body>
+
+<p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+<div>
+  <img class="blue" src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled" /><br/><img class="blue" src="support/swatch-blue.png" width="48" height="48" alt="Image download support must be enabled" />
+</div>
+
+</body>
+</html>
diff --git a/css-writing-modes-3/vertical-alignment-026-rl.xht b/css-writing-modes-3/vertical-alignment-026-rl.xht
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>CSS Writing Modes Test: vertical-align - 'top' and vertical-rl writing-mode</title>
+    <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
+    <link rel="help" title="7.5 Line-Relative Mappings" href="http://www.w3.org/TR/css-writing-modes-3/#line-mappings" />
+    <link rel="help" title="10.8.1 Leading and half-leading" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#leading" />
+    <meta name="assert" content="This test checks the position of inline non-replaced box with vertical align property. When 'writing-mode' is 'vertical-rl', 'text-orientation' is 'sideways, 'vertical-align' is 'middle', the vertical midpoint of the box is aligned with the central baseline of the parent box plus half the x-height of the parent." />
+    <link rel="match" href="vertical-alignment-026-ref.xht" />
+    <meta name="flags" content="ahem" />
+    <style type="text/css"><![CDATA[
+    div#rl-sideways
+    {
+      writing-mode: vertical-rl;
+      font: 60px/3 Ahem; /* computes to 60px/180px */
+      color: blue;
+      text-orientation: sideways;
+    }
+
+    span
+    {
+      font-size: 0.8em;
+      vertical-align: middle;
+    }
+    ]]></style>
+
+  </head>
+
+  <body>
+
+  <p>Test passes if the <strong>right edge</strong> of an irregular polygon is straight and unbroken.</p>
+
+  <div id="rl-sideways">X<span>X</span></div>
+
+  </body>
+</html>