Bug 1165168 - Tests from Gérard Talbot for border-spacing in vertical writing-modes. r=smontagu
authorJonathan Kew <jkew@mozilla.com>
Mon, 29 Jun 2015 09:24:39 +0100
changeset 281323 8b01c360248817c7778c35acc4f017b27d87390c
parent 281303 4ec808e306f3f0acf88c46c2edb61e56e5bc6f81
child 281324 5bf907b87954eb33ea4c010bb3ccc22d145ed6d6
push id4932
push userjlund@mozilla.com
push dateMon, 10 Aug 2015 18:23:06 +0000
treeherdermozilla-beta@6dd5a4f5f745 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssmontagu
bugs1165168
milestone41.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1165168 - Tests from Gérard Talbot for border-spacing in vertical writing-modes. r=smontagu
layout/reftests/writing-mode/tables/reftest.list
layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht
layout/reftests/writing-mode/tables/s72-border-spacing-002.xht
layout/reftests/writing-mode/tables/s72-border-spacing-003.xht
layout/reftests/writing-mode/tables/s72-border-spacing-004.xht
layout/reftests/writing-mode/tables/s72-border-spacing-005.xht
layout/reftests/writing-mode/tables/support/ahem.css
layout/reftests/writing-mode/tables/support/swatch-green.png
--- a/layout/reftests/writing-mode/tables/reftest.list
+++ b/layout/reftests/writing-mode/tables/reftest.list
@@ -57,8 +57,13 @@ fuzzy-if(B2G,5,1) == fixed-table-layout-
 == fixed-table-layout-023-vrl.html fixed-table-layout-023-ref.html
 == fixed-table-layout-025-vrl.html fixed-table-layout-025-ref.html
 == fixed-table-layout-026-vrl.html fixed-table-layout-025-ref.html
 == fixed-table-layout-027-vrl.html fixed-table-layout-025-ref.html
 == fixed-table-layout-028-vrl.html fixed-table-layout-025-ref.html
 == fixed-table-layout-029-vrl.html fixed-table-layout-025-ref.html
 == fixed-table-layout-030-vrl.html fixed-table-layout-025-ref.html
 == fixed-table-layout-031-vrl.html fixed-table-layout-025-ref.html
+
+HTTP(../..) == s72-border-spacing-002.xht s72-border-spacing-002-ref.xht
+HTTP(../..) == s72-border-spacing-003.xht s72-border-spacing-002-ref.xht
+HTTP(../..) == s72-border-spacing-004.xht s72-border-spacing-002-ref.xht
+HTTP(../..) == s72-border-spacing-005.xht s72-border-spacing-002-ref.xht
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/s72-border-spacing-002-ref.xht
@@ -0,0 +1,22 @@
+<!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="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta name="flags" content="image" />
+
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div><img src="support/swatch-green.png" width="100" height="200" alt="Image download support must be enabled" /></div>
+
+ </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/s72-border-spacing-002.xht
@@ -0,0 +1,144 @@
+<!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: border-spacing - first value is specified and non-zero in 'vertical-rl' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="s72-border-spacing-002-ref.xht" />
+
+  <!--
+  To be replaced with
+  <link rel="match" href="border-spacing-wm-002-ref.xht" />
+  -->
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table right padding (physical table top padding) and rightmost cells and b) inter-column spacing and c) spacing between leftmost cells and logical table left padding (physical table bottom padding)." name="assert" />
+
+  <link type="text/css" rel="stylesheet" href="support/ahem.css" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */
+      font: 1.25em/1 Ahem; /* computes to 20px/20px */
+      padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */
+      -ah-writing-mode: vertical-rl;
+      -webkit-writing-mode: vertical-rl;
+      writing-mode: tb-rl; /* IE11 */
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      height: 0.5em;
+      padding: 0em;
+      width: 1em;
+    }
+
+  /*
+
+         0px       width of nth row        20px                           TOP
+         |                                 |
+         ===================================     0x (0em)                 |||
+         | table padding-top 25px (1.25em) |                              |||
+         |    with red background=color    |                            \ ||| /
+         |    with red background=color    |                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         ===================================    25px (1.25em)
+         |logical righ border-spacing: 10px|
+         |    with red background=color    |
+         ===================================    35px (1.75em)
+         |  height of 1st td 10px (0.5em)  |                              |||
+         |    with red background=color    |                              |||
+         ===================================    45px (2.25em)           \ ||| /
+         |inter-column spacing 10px (0.5em)|                             \   /
+         |    with red background=color    |                              \ /
+         ===================================    55px (2.75em)              v
+         |  height of 2nd td 10px (0.5em)  |
+         |    with red background=color    |
+         ===================================    65px (3.25em)
+         |logical left border-spacing: 10px|                              |||
+         |    with red background=color    |                              |||
+         ===================================    75px (3.75em)           \ ||| /
+         |tble padding-bottom 25px (1.25em)|                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         |    with red background=color    |
+         |    with red background=color    |
+         ===================================   100px (5em)              BOTTOM
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/s72-border-spacing-003.xht
@@ -0,0 +1,144 @@
+<!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: border-spacing - first value is specified and non-zero in 'vertical-lr' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="s72-border-spacing-002-ref.xht" />
+
+  <!--
+  To be replaced with
+  <link rel="match" href="border-spacing-wm-002-ref.xht" />
+  -->
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table left padding (physical table top padding) and leftmost cells and b) inter-column spacing and c) spacing between rightmost cells and logical table right padding (physical table bottom padding)." name="assert" />
+
+  <link type="text/css" rel="stylesheet" href="support/ahem.css" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */
+      font: 1.25em/1 Ahem; /* computes to 20px/20px */
+      padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */
+      -ah-writing-mode: vertical-lr;
+      -webkit-writing-mode: vertical-lr;
+      writing-mode: tb-lr; /* IE11 */
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      height: 0.5em;
+      padding: 0em;
+      width: 1em;
+    }
+
+  /*
+
+         0px       width of nth row        20px                           TOP
+         |                                 |
+         ===================================     0x (0em)                 |||
+         | table padding-top 25px (1.25em) |                              |||
+         |    with red background=color    |                            \ ||| /
+         |    with red background=color    |                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         ===================================    25px (1.25em)
+         |logical left border-spacing: 10px|
+         |    with red background=color    |
+         ===================================    35px (1.75em)
+         |  height of 1st td 10px (0.5em)  |                              |||
+         |    with red background=color    |                              |||
+         ===================================    45px (2.25em)           \ ||| /
+         |inter-column spacing 10px (0.5em)|                             \   /
+         |    with red background=color    |                              \ /
+         ===================================    55px (2.75em)              v
+         |  height of 2nd td 10px (0.5em)  |
+         |    with red background=color    |
+         ===================================    65px (3.25em)
+         |logical righ border-spacing: 10px|                              |||
+         |    with red background=color    |                              |||
+         ===================================    75px (3.75em)           \ ||| /
+         |tble padding-bottom 25px (1.25em)|                             \   /
+         |    with red background=color    |                              \ /
+         |    with red background=color    |                               v
+         |    with red background=color    |
+         |    with red background=color    |
+         ===================================   100px (5em)              BOTTOM
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+    <tr><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/s72-border-spacing-004.xht
@@ -0,0 +1,124 @@
+<!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: border-spacing - second value is specified and non-zero in 'vertical-rl' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="s72-border-spacing-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that second value of 'border-spacing' represents, from right to left, a) spacing between logical table top padding (physical table right padding) and topmost cells and b) inter-row spacing and c) between bottommost cells and logical table bottom padding (physical table left padding)." name="assert" />
+
+  <link type="text/css" rel="stylesheet" href="support/ahem.css" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */
+      font: 1.25em/1 Ahem; /* computes to 20px/20px */
+      padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */
+      -ah-writing-mode: vertical-rl;
+      -webkit-writing-mode: vertical-rl;
+      writing-mode: tb-rl; /* IE11 */
+      writing-mode: vertical-rl;
+    }
+
+  td
+    {
+      height: 1em;
+      padding: 0em;
+      width: 0.5em;
+    }
+
+  /*
+
+  0px             25px     35px     45px     55px     65px     75px            100px
+  | padding-left   |  left  |  2nd   | middle |  1st   |  right | padding-right|
+  |   of table     |  vert. |  right |  vert. |  right |  vert. |   of table   |
+  |                | border |  most  | border |  most  | border |              |
+  |                | spacing|   row  | spacing|  row   | spacing|              |
+20|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+40|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+60|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+80|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+00|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/s72-border-spacing-005.xht
@@ -0,0 +1,124 @@
+<!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: border-spacing - second value is specified and non-zero in 'vertical-lr' table</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" />
+  <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" />
+  <link rel="match" href="s72-border-spacing-002-ref.xht" />
+
+  <meta content="ahem" name="flags" />
+  <meta content="This test checks that second value of 'border-spacing' represents, from left to right, a) spacing between logical table top padding (physical table left padding) and topmost cells and b) inter-row spacing and c) spacing between bottommost cells and logical table bottom padding (physical table right padding)." name="assert" />
+
+  <link type="text/css" rel="stylesheet" href="support/ahem.css" />
+
+  <style type="text/css"><![CDATA[
+  table
+    {
+      border-spacing: 0em 0.5em; /* computes to logical vertical border-spacing: 10px */
+      font: 1.25em/1 Ahem; /* computes to 20px/20px */
+      padding: 0em 1.25em; /* computes to padding-left: 25px and padding-right: 25px */
+      -ah-writing-mode: vertical-lr;
+      -webkit-writing-mode: vertical-lr;
+      writing-mode: tb-lr; /* IE11 */
+      writing-mode: vertical-lr;
+    }
+
+  td
+    {
+      height: 1em;
+      padding: 0em;
+      width: 0.5em;
+    }
+
+  /*
+
+  0px             25px     35px     45px     55px     65px     75px            100px
+  | padding-left   |  left  |  2nd   | middle |  1st   |  right | padding-right|
+  |   of table     |  vert. |  row   |  vert. |  right |  vert. |   of table   |
+  |                | border |        | border |  most  | border |              |
+  |                | spacing|        | spacing|  row   | spacing|              |
+20|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+40|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+60|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+80|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+  |                |        |        |        |        |        |              |
+00|                |        |        |        |        |        |              |
+px|                |        |        |        |        |        |              |
+
+  */
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      height: 6.25em;
+      position: absolute;
+      width: 6.25em;
+      z-index: -1;
+    }
+
+  table#test-overlapped-red
+    {
+      background-color: red;
+    }
+
+  table#test-overlapping-green
+    {
+      background-color: green;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p>
+
+  <div id="reference-overlapping-green"></div>
+
+  <table id="test-overlapped-red">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+  <div id="reference-overlapped-red"></div>
+
+  <table id="test-overlapping-green">
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+    <tr><td></td><td></td><td></td><td></td><td></td></tr>
+
+  </table>
+
+ </body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/writing-mode/tables/support/ahem.css
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: Ahem;
+  src: url("../../../fonts/Ahem.ttf");
+}
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0aa79b0c86bd72c2220ecce39b9553e2cd3605b9
GIT binary patch
literal 84
zc%17D@N?(olHy`uVBq!ia0vp^{2<K83?vyP*g1g|bAV5XD?<aroS#c40=Yb%E{-7;
dw~`YS7=b)p2FBl7!dgHUgQu&X%Q~loCIBjB50U@?