Bug 1343819 - (Part 5) Add reftests from CSSWG. r?xidorn
MozReview-Commit-ID: 1U29fSjZxXt
--- a/layout/reftests/w3c-css/import-tests.py
+++ b/layout/reftests/w3c-css/import-tests.py
@@ -29,16 +29,17 @@ import re
# But for now, let's just import a few sets of tests.
gSubtrees = [
os.path.join("css-namespaces-3"),
os.path.join("css-conditional-3"),
os.path.join("css-values-3"),
os.path.join("css-multicol-1"),
+ os.path.join("css-rhythm-1"),
os.path.join("css-writing-modes-3"),
os.path.join("selectors-4"),
]
gPrefixedProperties = [
"column-count",
"column-fill",
"column-gap",
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/OWNERS
@@ -0,0 +1,3 @@
+@plinss
+@kojiishi
+@fantasai
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/line-height-step-basic-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step basic layout</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
+<link rel="match" href="reference/line-height-step-basic-001.html">
+<meta name="assert" content="This test asserts the line-height-step property rounds up line box height.">
+<meta name="flags" content="ahem">
+<style type="text/css">
+@font-face {
+ font-family: Ahem;
+ src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+<style>
+div {
+ font-family: Ahem;
+ font-size: 40px;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+ width: 5em;
+}
+.test {
+ line-height: 40px;
+ line-height-step: 60px;
+}
+.ref {
+ line-height: 60px;
+}
+</style>
+<p class="instructions">Test passes if left and right are the same.
+<div class="ref">
+ <div>XXXXX</div>
+ <div>XXXXX XXXXX XXXXX</div>
+ <div><br>X<br>X</div>
+</div>
+<div class="test">
+ <div>XXXXX</div>
+ <div>XXXXX XXXXX XXXXX</div>
+ <div><br>X<br>X</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/line-height-step-boundary-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step boundary test</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
+<link rel="match" href="reference/line-height-step-boundary-001.html">
+<meta name="assert" content="This test asserts the line-height-step property rounds up line box height.">
+<meta name="flags" content="ahem">
+<style type="text/css">
+@font-face {
+ font-family: Ahem;
+ src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+<style>
+div {
+ font-family: Ahem;
+ font-size: 30px;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+ width: 5em;
+}
+.test {
+ line-height-step: 40px;
+}
+</style>
+<p class="instructions">Test passes if left and right are the same.
+<div class="ref">
+ <div style="line-height: 40px">XXXXX</div>
+ <div style="line-height: 40px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 120px">XXXXX</div>
+</div>
+<div class="test">
+ <div style="line-height: 39px">XXXXX</div>
+ <div style="line-height: 40px">XXXXX</div>
+ <div style="line-height: 41px">XXXXX</div>
+ <div style="line-height: 79px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 81px">XXXXX</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/line-height-step-ruby-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step and ruby</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
+<link rel="match" href="reference/line-height-step-ruby-001.html">
+<meta name="assert" content="This test asserts the line-height-step property and ruby.">
+<meta name="flags" content="ahem">
+<style type="text/css">
+@font-face {
+ font-family: Ahem;
+ src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+<style>
+div {
+ font-family: Ahem;
+ font-size: 40px;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+ width: 5em;
+}
+.test {
+ line-height: 40px;
+ line-height-step: 120px;
+}
+.ref {
+ line-height: 120px;
+}
+</style>
+<body>
+<p class="instructions">Test passes if left and right are the same.
+<div class="ref">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+</div>
+<div class="test">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/line-height-step-valign-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step vertical-align test</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
+<link rel="match" href="reference/line-height-step-valign-001.html">
+<meta name="assert" content="This test asserts the vertical-align property with the line-height-step property.">
+<meta name="flags" content="ahem">
+<style type="text/css">
+@font-face {
+ font-family: Ahem;
+ src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+<style>
+div {
+ font-family: Ahem;
+ font-size: 40px;
+}
+.test {
+ line-height-step: 80px;
+ line-height: 1;
+}
+.ref {
+ line-height: 1;
+}
+.adjuster {
+ line-height: 80px;
+ color: transparent;
+}
+.top {
+ vertical-align: top;
+}
+.text-top {
+ vertical-align: text-top;
+}
+.text-bottom {
+ vertical-align: text-bottom;
+}
+.bottom {
+ vertical-align: bottom;
+}
+</style>
+<p class="instructions">Test passes if two lines are the same.
+<div class="ref">
+ <div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span><span class="adjuster">X</span></div>
+</div>
+<div class="test">
+ <div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/line-height-step-writing-mode-vrl-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step in vertical-rl</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
+<link rel="match" href="reference/line-height-step-writing-mode-vrl-001.html">
+<meta name="assert" content="This test asserts the line-height-step property in vertical-rl writing mode.">
+<meta name="flags" content="ahem">
+<style type="text/css">
+@font-face {
+ font-family: Ahem;
+ src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+<style>
+.container {
+ font-family: Ahem;
+ font-size: 40px;
+ writing-mode: vertical-rl;
+ width: 5em;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+}
+.test {
+ line-height: 40px;
+ line-height-step: 120px;
+}
+.ref {
+ line-height: 120px;
+}
+</style>
+<body>
+<p class="instructions">Test passes if top and bottom are the same.
+<div class="container">
+ <div class="ref">
+ <div>XXXXX</div>
+ </div>
+ <div class="test">
+ <div>XXXXX</div>
+ </div>
+</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/line-height-step-writing-mode-vrl-ruby-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step with ruby in vertical-rl</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
+<link rel="match" href="reference/line-height-step-writing-mode-vrl-ruby-001.html">
+<meta name="assert" content="This test asserts the line-height-step property with ruby in vertical-rl writing mode.">
+<meta name="flags" content="ahem">
+<style type="text/css">
+@font-face {
+ font-family: Ahem;
+ src: url("../../../fonts/Ahem.ttf");
+}
+</style>
+<style>
+.container {
+ font-family: Ahem;
+ font-size: 40px;
+ writing-mode: vertical-rl;
+ width: 5em;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+}
+.test {
+ line-height: 40px;
+ line-height-step: 120px;
+}
+.ref {
+ line-height: 120px;
+}
+</style>
+<body>
+<p class="instructions">Test passes if top and bottom are the same.
+<div class="container">
+ <div class="ref">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+ </div>
+ <div class="test">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+ </div>
+</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/reference/line-height-step-basic-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step basic layout reference</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+div {
+ font-family: Ahem;
+ font-size: 40px;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+ width: 5em;
+}
+.ref {
+ line-height: 60px;
+}
+</style>
+<p class="instructions">Test passes if left and right are the same.
+<div class="ref">
+ <div>XXXXX</div>
+ <div>XXXXX XXXXX XXXXX</div>
+ <div><br>X<br>X</div>
+</div>
+<div class="ref">
+ <div>XXXXX</div>
+ <div>XXXXX XXXXX XXXXX</div>
+ <div><br>X<br>X</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/reference/line-height-step-boundary-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step boundary test</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+div {
+ font-family: Ahem;
+ font-size: 30px;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+ width: 5em;
+}
+</style>
+<p class="instructions">Test passes if left and right are the same.
+<div class="ref">
+ <div style="line-height: 40px">XXXXX</div>
+ <div style="line-height: 40px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 120px">XXXXX</div>
+</div>
+<div class="ref">
+ <div style="line-height: 40px">XXXXX</div>
+ <div style="line-height: 40px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 80px">XXXXX</div>
+ <div style="line-height: 120px">XXXXX</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/reference/line-height-step-ruby-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step and ruby</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+div {
+ font-family: Ahem;
+ font-size: 40px;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+ width: 5em;
+}
+.ref {
+ line-height: 120px;
+}
+</style>
+<body>
+<p class="instructions">Test passes if left and right are the same.
+<div class="ref">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+</div>
+<div class="ref">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+</div>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/reference/line-height-step-valign-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step vertical-align test</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+div {
+ font-family: Ahem;
+ font-size: 40px;
+}
+.ref {
+ line-height: 1;
+}
+.adjuster {
+ line-height: 80px;
+ color: transparent;
+}
+.top {
+ vertical-align: top;
+}
+.text-top {
+ vertical-align: text-top;
+}
+.text-bottom {
+ vertical-align: text-bottom;
+}
+.bottom {
+ vertical-align: bottom;
+}
+</style>
+<p class="instructions">Test passes if two lines are the same.
+<div class="ref">
+ <div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span><span class="adjuster">X</span></div>
+</div>
+<div class="ref">
+ <div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span><span class="adjuster">X</span></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/reference/line-height-step-writing-mode-vrl-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step in vertical-rl</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+.container {
+ font-family: Ahem;
+ font-size: 40px;
+ writing-mode: vertical-rl;
+ width: 5em;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+}
+.ref {
+ line-height: 120px;
+}
+</style>
+<body>
+<p class="instructions">Test passes if top and bottom are the same.
+<div class="container">
+ <div class="ref">
+ <div>XXXXX</div>
+ </div>
+ <div class="ref">
+ <div>XXXXX</div>
+ </div>
+</div>
+</body>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/received/css-rhythm-1/reference/line-height-step-writing-mode-vrl-ruby-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Rhythmic Sizing: line-height-step with ruby in vertical-rl</title>
+<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
+<style>
+.container {
+ font-family: Ahem;
+ font-size: 40px;
+ writing-mode: vertical-rl;
+ width: 5em;
+}
+.test, .ref {
+ display: inline-block;
+ vertical-align: top;
+}
+.ref {
+ line-height: 120px;
+}
+</style>
+<body>
+<p class="instructions">Test passes if top and bottom are the same.
+<div class="container">
+ <div class="ref">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+ </div>
+ <div class="ref">
+ <div>X<ruby>XX<rt>XX</rt></ruby>X</div>
+ </div>
+</div>
+</body>
\ No newline at end of file
--- a/layout/reftests/w3c-css/received/reftest.list
+++ b/layout/reftests/w3c-css/received/reftest.list
@@ -199,16 +199,22 @@ fails == css-multicol-1/multicol-zero-he
== css-namespaces-3/syntax-008.xml css-namespaces-3/reftest/ref-lime-2.xml
== css-namespaces-3/syntax-009.xml css-namespaces-3/reftest/ref-lime-1.xml
== css-namespaces-3/syntax-010.xml css-namespaces-3/reftest/ref-lime-3.xml
== css-namespaces-3/syntax-011.xml css-namespaces-3/reftest/ref-lime-6.xml
== css-namespaces-3/syntax-012.xml css-namespaces-3/reftest/ref-lime-3.xml
== css-namespaces-3/syntax-013.xml css-namespaces-3/reftest/ref-lime-5.xml
== css-namespaces-3/syntax-014.xml css-namespaces-3/reftest/ref-lime-3.xml
== css-namespaces-3/syntax-015.xml css-namespaces-3/reftest/ref-lime-1.xml
+== css-rhythm-1/line-height-step-basic-001.html css-rhythm-1/reference/line-height-step-basic-001.html
+== css-rhythm-1/line-height-step-boundary-001.html css-rhythm-1/reference/line-height-step-boundary-001.html
+== css-rhythm-1/line-height-step-ruby-001.html css-rhythm-1/reference/line-height-step-ruby-001.html
+== css-rhythm-1/line-height-step-valign-001.html css-rhythm-1/reference/line-height-step-valign-001.html
+== css-rhythm-1/line-height-step-writing-mode-vrl-001.html css-rhythm-1/reference/line-height-step-writing-mode-vrl-001.html
+== css-rhythm-1/line-height-step-writing-mode-vrl-ruby-001.html css-rhythm-1/reference/line-height-step-writing-mode-vrl-ruby-001.html
fails == css-values-3/attr-color-invalid-cast.html css-values-3/reference/200-200-green.html
== css-values-3/attr-color-invalid-fallback.html css-values-3/reference/200-200-green.html
fails == css-values-3/attr-color-valid.html css-values-3/reference/200-200-green.html
== css-values-3/attr-invalid-type-001.html css-values-3/reference/200-200-green.html
== css-values-3/attr-invalid-type-002.html css-values-3/reference/200-200-green.html
== css-values-3/attr-invalid-type-003.html css-values-3/reference/200-200-green.html
fails == css-values-3/attr-length-invalid-cast.html css-values-3/reference/200-200-green.html
== css-values-3/attr-length-invalid-fallback.html css-values-3/reference/200-200-green.html
