Bug 1526574 [wpt PR 14986] - 14 new CSS Values tests and 3 reference files, a=testonly
authorGérard Talbot <github@gtalbot.org>
Tue, 12 Feb 2019 14:40:58 +0000
changeset 459302 570de2c4b58d7bd5024adb1c5da1fc674e4c9e58
parent 459301 b0e1a0389ad08fecc8defae1c0966677cbf0c643
child 459303 21f220c6304b07d61cec6bd5dc3c1cd0e7de20ef
push id35557
push userdvarga@mozilla.com
push dateFri, 15 Feb 2019 01:42:08 +0000
treeherdermozilla-central@426ca85d2303 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1526574, 14986
milestone67.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 1526574 [wpt PR 14986] - 14 new CSS Values tests and 3 reference files, a=testonly Automatic update from web-platform-tests 12 new CSS Values tests and 3 reference files (#14986) -- wpt-commits: fe78f2a1ad48c1e0132634e957369d8d674e4258 wpt-pr: 14986
testing/web-platform/tests/css/css-values/angle-units-001.html
testing/web-platform/tests/css/css-values/angle-units-002.html
testing/web-platform/tests/css/css-values/angle-units-003.html
testing/web-platform/tests/css/css-values/angle-units-004.html
testing/web-platform/tests/css/css-values/angle-units-005.html
testing/web-platform/tests/css/css-values/attr-invalid-type-008.html
testing/web-platform/tests/css/css-values/calc-positive-fraction-001.html
testing/web-platform/tests/css/css-values/ch-unit-008.html
testing/web-platform/tests/css/css-values/ch-unit-009.html
testing/web-platform/tests/css/css-values/ch-unit-010.html
testing/web-platform/tests/css/css-values/ch-unit-011.html
testing/web-platform/tests/css/css-values/ch-unit-012.html
testing/web-platform/tests/css/css-values/reference/ch-unit-008-ref.html
testing/web-platform/tests/css/css-values/reference/ch-unit-009-ref.html
testing/web-platform/tests/css/css-values/reference/ch-unit-011-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/angle-units-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: invalid angle units</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#angles">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+  <meta name="flags" content="invalid">
+
+  <style>
+  div
+    {
+      height: 100px;
+      width: 100px;
+    }
+
+  div#test-overlapping-green
+    {
+      background-image: linear-gradient(green, green);
+      background-image: linear-gradient(90degree, red, red);   /* invalid; 90deg is valid */
+      background-image: linear-gradient(100gradian, red, red); /* invalid; 100grad is valid */
+      background-image: linear-gradient(1.57radian, red, red); /* invalid; 1.57rad is valid */
+      background-image: linear-gradient(0.25turns, red, red);  /* invalid; 0.25turn is valid */
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="test-overlapping-green"></div>
+
+  <div id="reference-overlapped-red"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/angle-units-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: degree angle unit with mixed case</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#angles">
+  <link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+  <meta content="This test checks that 'deg' angle unit is case-insensitive." name="assert">
+  <meta name="flags" content="">
+
+  <style>
+  div
+    {
+      height: 100px;
+      width: 100px;
+    }
+
+  div#test-overlapping-green
+    {
+      background-color: red;
+      background-image: linear-gradient(90DeG, green, green);
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="test-overlapping-green"></div>
+
+  <div id="reference-overlapped-red"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/angle-units-003.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: grad angle unit with mixed case</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#angles">
+  <link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+  <meta content="This test checks that 'grad' angle unit is case-insensitive." name="assert">
+  <meta name="flags" content="">
+
+  <style>
+  div
+    {
+      height: 100px;
+      width: 100px;
+    }
+
+  div#test-overlapping-green
+    {
+      background-color: red;
+      background-image: linear-gradient(100gRaD, green, green);
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="test-overlapping-green"></div>
+
+  <div id="reference-overlapped-red"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/angle-units-004.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: rad angle unit with mixed case</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#angles">
+  <link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+  <meta content="This test checks that 'rad' angle unit is case-insensitive." name="assert">
+  <meta name="flags" content="">
+
+  <style>
+  div
+    {
+      height: 100px;
+      width: 100px;
+    }
+
+  div#test-overlapping-green
+    {
+      background-color: red;
+      background-image: linear-gradient(1.57rAd, green, green);
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="test-overlapping-green"></div>
+
+  <div id="reference-overlapped-red"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/angle-units-005.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: turn angle unit with mixed case</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#angles">
+  <link rel="help" href="https://www.w3.org/TR/CSS22/syndata.html#characters">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+  <meta content="This test checks that 'turn' angle unit is case-insensitive." name="assert">
+  <meta name="flags" content="">
+
+  <style>
+  div
+    {
+      height: 100px;
+      width: 100px;
+    }
+
+  div#test-overlapping-green
+    {
+      background-color: red;
+      background-image: linear-gradient(0.25tUrN, green, green);
+    }
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      position: relative;
+      z-index: -1;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="test-overlapping-green"></div>
+
+  <div id="reference-overlapped-red"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/attr-invalid-type-008.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: attr() function with valid and invalid data types</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link href="http://www.w3.org/TR/css3-values/#attr-notation" rel="help">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+  <meta name="flags" content="invalid">
+  <meta content="When the data type of an attr() function is invalid or when the fallback value does not match the data type, then the attr() function generates an invalid declaration." name="assert">
+
+  <style>
+  div
+    {
+      height: 50px;
+      position: relative;
+      width: 50px;
+    }
+
+  div#valid1
+    {
+      background-color: green;
+      width: attr(attr-test-valid1 length);
+    }
+
+  div#invalid1
+    {
+      background-color: green;
+      width: 100px;
+      width: attr(attr-test-invalid1 number, 0);
+    }
+
+    /*
+    '0' can be both a number and a length. But here,
+    in this sub-test, the width CSS property requires
+    a length type and not a number type. So, the
+    attr() function generates an invalid declaration.
+    */
+
+  div#reference-overlapped-red
+    {
+      background-color: red;
+      bottom: 100px;
+      height: 100px;
+      width: 100px;
+      z-index: -1;
+    }
+
+  div#invalid2
+    {
+      background-color: red;
+      bottom: 100px;
+      width: 0px;
+      width: attr(attr-test-invalid2 length, 100);
+    }
+
+    /*
+    '100' is not a valid length value.
+    So, the attr() function generates an invalid
+    declaration.
+    */
+
+  div#invalid3
+    {
+      background-color: red;
+      bottom: 100px;
+      width: 0px;
+      width: attr(attr-test-invalid3 number, 100px);
+    }
+
+    /*
+    number type is not a valid length value.
+    So, the attr() function generates an invalid
+    declaration.
+    */
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="valid1" attr-test-valid1="100px"></div>
+
+  <div id="invalid1" attr-test-invalid1="foo"></div>
+
+  <div id="reference-overlapped-red"></div>
+
+  <div id="invalid2" attr-test-invalid2="bar"></div>
+
+  <div id="invalid3" attr-test-invalid3="baz"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-positive-fraction-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Test: calc() with positive fraction halfway between adjacent integers</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-4/#combine-integers">
+  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+  <meta name="flags" content="">
+
+  <style>
+  div
+    {
+      height: 100px;
+      position: absolute;
+      width: 100px;
+    }
+
+  div#red-overlapped
+    {
+      background-color: red;
+      z-index: 2;
+    }
+
+  div#green-overlapping
+    {
+      background-color: green;
+      z-index: calc(3 / 2);
+      /*
+      should resolve to 'z-index: 2' since "values
+      halfway between adjacent integers rounded
+      towards positive infinity" and since
+      div#green-overlapping is last in document
+      tree order, then it should overlap
+      div#red-overlapped
+      */
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="red-overlapped"></div>
+
+  <div id="green-overlapping"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/ch-unit-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: ch unit in width (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+  <link rel="match" href="reference/ch-unit-008-ref.html">
+
+  <meta name="flags" content="">
+
+  <style>
+  div
+    {
+      font-size: 80px; /* arbitrary font size */
+    }
+
+  div#test-blue
+    {
+      background-color: blue;
+      height: 1.8em;
+      width: 5ch;
+    }
+
+  div#reference-orange
+    {
+      background-color: orange;
+      color: orange;
+      float: left;
+      line-height: 1.8; /* arbitrary line-height */
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same width</strong> as an orange rectangle.
+
+  <div id="test-blue"></div>
+
+  <div id="reference-orange">00000</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/ch-unit-009.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: ch unit in height (basic)</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+  <link rel="match" href="reference/ch-unit-009-ref.html">
+
+  <meta name="flags" content="">
+
+  <style>
+  div
+    {
+      float: left;
+      font-size: 80px; /* arbitrary font size */
+    }
+
+  div#test-blue
+    {
+      background-color: blue;
+      height: 5ch;
+      width: 1.8em;
+    }
+
+  div#reference-orange
+    {
+      background-color: orange;
+      color: orange;
+      line-height: 1.8; /* arbitrary line-height */
+      writing-mode: vertical-rl;
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle.
+
+  <div id="test-blue"></div>
+
+  <div id="reference-orange">00000</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/ch-unit-010.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: ch unit in height with 'text-orientation: mixed'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+  <link rel="match" href="reference/ch-unit-009-ref.html">
+
+  <meta name="flags" content="">
+  <meta name="assert" content="In this test, the ch unit is the advance width measure of the 0 (ZERO, U+0030) glyph.">
+
+  <style>
+  div
+    {
+      float: left;
+      font-size: 80px; /* arbitrary font size */
+      text-orientation: mixed;
+      writing-mode: vertical-rl;
+    }
+
+  div#test-blue
+    {
+      background-color: blue;
+      height: 5ch;
+      width: 1.8em;
+    }
+
+  div#reference-orange
+    {
+      background-color: orange;
+      color: orange;
+      line-height: 1.8; /* arbitrary line-height */
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle.
+
+  <div id="test-blue"></div>
+
+  <div id="reference-orange">00000</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/ch-unit-011.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: ch unit in height with 'text-orientation: upright'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+  <link rel="match" href="reference/ch-unit-011-ref.html">
+
+  <meta name="flags" content="">
+  <meta name="assert" content="In this test, the ch unit is the advance height measure of the 0 (ZERO, U+0030) glyph.">
+
+  <style>
+  div
+    {
+      float: left;
+      font-size: 80px; /* arbitrary font size */
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  div#test-blue
+    {
+      background-color: blue;
+      height: 5ch;
+      width: 1.8em;
+    }
+
+  div#reference-orange
+    {
+      background-color: orange;
+      color: orange;
+      line-height: 1.8; /* arbitrary line-height */
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle.
+
+  <div id="test-blue"></div>
+
+  <div id="reference-orange">00000</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/ch-unit-012.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test: ch unit in height with 'text-orientation: sideways'</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-values-3/#font-relative-lengths">
+  <link rel="match" href="reference/ch-unit-009-ref.html">
+
+  <meta name="flags" content="">
+  <meta name="assert" content="In this test, the ch unit is the advance width measure of the 0 (ZERO, U+0030) glyph.">
+
+  <style>
+  div
+    {
+      float: left;
+      font-size: 80px; /* arbitrary font size */
+      text-orientation: sideways;
+      writing-mode: vertical-rl;
+    }
+
+  div#test-blue
+    {
+      background-color: blue;
+      height: 5ch;
+      width: 1.8em;
+    }
+
+  div#reference-orange
+    {
+      background-color: orange;
+      color: orange;
+      line-height: 1.8; /* arbitrary line-height */
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle.
+
+  <div id="test-blue"></div>
+
+  <div id="reference-orange">00000</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/reference/ch-unit-008-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test Reference File</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      float: left;
+      font-size: 80px; /* arbitrary font size */
+      line-height: 1.8; /* arbitrary line-height */
+    }
+
+  div#blue
+    {
+      background-color: blue;
+      color: blue;
+    }
+
+  div#orange
+    {
+      background-color: orange;
+      color: orange;
+      clear: left;
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same width</strong> as an orange rectangle.
+
+  <div id="blue">00000</div>
+
+  <div id="orange">00000</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/reference/ch-unit-009-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test Reference File</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      float: left;
+      font-size: 80px; /* arbitrary font size */
+      line-height: 1.8; /* arbitrary line-height */
+      writing-mode: vertical-rl;
+    }
+
+  div#blue
+    {
+      background-color: blue;
+      color: blue;
+    }
+
+  div#orange
+    {
+      background-color: orange;
+      color: orange;
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle.
+
+  <div id="blue">00000</div>
+
+  <div id="orange">00000</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/reference/ch-unit-011-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Values and Units Test Reference File</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      float: left;
+      font-size: 80px; /* arbitrary font size */
+      line-height: 1.8; /* arbitrary line-height */
+      text-orientation: upright;
+      writing-mode: vertical-rl;
+    }
+
+  div#blue
+    {
+      background-color: blue;
+      color: blue;
+    }
+
+  div#orange
+    {
+      background-color: orange;
+      color: orange;
+    }
+  </style>
+
+  <p>Test passes if there is a blue rectangle with the <strong>same height</strong> as an orange rectangle.
+
+  <div id="blue">00000</div>
+
+  <div id="orange">00000</div>