Bug 1593063 [wpt PR 20030] - Added 7 new CSS4Pseudo tests and 3 references, a=testonly
authorGérard Talbot <github@gtalbot.org>
Wed, 13 May 2020 09:39:50 +0000
changeset 531060 f5da5d0495c4349c0b016ec8ea89ec182d48dc47
parent 531059 e98b81a5f1f4c8b9a0463d37193bac99c95f9781
child 531061 1a1bea1d12b8adaf557ea20a280f4ad04912f840
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1593063, 20030
milestone78.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 1593063 [wpt PR 20030] - Added 7 new CSS4Pseudo tests and 3 references, a=testonly Automatic update from web-platform-tests Added 7 new CSS4Pseudo tests and 3 references -- Improved highlight-z-index-* tests -- Corrected highlight-z-index-00[1-2].html tests -- Corrected highlight-z-index-00[1-2].html tests -- wpt-commits: 4b953890fe7217bdbd20d2777bc32687ef2a2d92, 41d824c80080b7e3eba3fdf522512bd4efeaa932, 472d91adc81ec070295abc98b3e59282874a1c37, 3adb0f89d80bb92ea1a458b3fbe461f7803549a9 wpt-pr: 20030
testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
testing/web-platform/tests/css/css-pseudo/grammar-error-002-manual.html
testing/web-platform/tests/css/css-pseudo/grammar-error-003-manual.html
testing/web-platform/tests/css/css-pseudo/highlight-z-index-001-ref.html
testing/web-platform/tests/css/css-pseudo/highlight-z-index-001.html
testing/web-platform/tests/css/css-pseudo/highlight-z-index-002-ref.html
testing/web-platform/tests/css/css-pseudo/highlight-z-index-002.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      background-color: green;
+      color: yellow;
+      display: inline;
+      font-size: 300%;
+    }
+  </style>
+
+  <p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
+
+  <div>Text sample</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: higher specificity of selectors (Example 11)</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-pseudo-4/#highlight-cascade">
+  <link rel="match" href="cascade-highlight-001-ref.html">
+
+  <!--
+  Example 11 is
+  https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
+  -->
+
+  <meta content="" name="flags">
+  <meta name="assert" content="This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div &gt; span::selection' selector has an higher specificity than the 'span::selection' selector.">
+
+  <style>
+  div
+    {
+      font-size: 300%;
+    }
+
+  div::selection
+    {
+      background-color: green;
+      color: yellow;
+    }
+
+  div > span::selection
+  /*
+  count the number of element names and pseudo-elements in the selector (= d)
+  a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3
+  */
+    {
+      background-color: green;
+    }
+
+  span::selection
+  /*
+  count the number of element names and pseudo-elements in the selector (= d)
+  a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2
+  */
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* Finally, we now select such range of content */
+  }
+  </script>
+
+  <body onload="startTest();">
+
+  <p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
+
+  <div id="test">Text <span>sample</span></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: tag selector missing (Example 12)</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-pseudo-4/#highlight-cascade">
+  <link rel="match" href="cascade-highlight-001-ref.html">
+
+  <!--
+  Example 12 is
+  https://www.w3.org/TR/css-pseudo-4/#example-97480f68
+  -->
+
+  <meta content="" name="flags">
+  <meta name="assert" content="This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, &ltspan&gt; element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing.">
+
+  <style>
+  div
+    {
+      font-size: 300%;
+    }
+
+  ::selection
+    {
+      background-color: green;
+      color: yellow;
+    }
+
+  div#test::selection
+    {
+      background-color: red;
+      color: black;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* Finally, we now select such range of content */
+  }
+  </script>
+
+  <body onload="startTest();">
+
+  <p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
+
+  <div id="test"><span>Text sample</span></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      background-color: yellow;
+      color: green;
+      display: inline;
+      font-size: 300%;
+    }
+  </style>
+
+   <p>Test passes if "Text sample" is green and if its background color is yellow.
+
+  <div>Text sample</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: inheritance of selection highlight colors from its parent element</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-pseudo-4/#highlight-cascade">
+  <link rel="match" href="cascade-highlight-004-ref.html">
+
+  <meta content="" name="flags">
+  <meta name="assert" content="In this test, 'color' and 'background-color' have not been given a value for the span element. Since its parent element has an highlight pseudo-element, then these values should be inherited. Therefore the span element should be green on a yellow background and should not use the OS default selection highlight color values.">
+
+  <!--
+  When any supported property is not given a value by the
+  cascade, its value is determined by inheritance from the
+  corresponding highlight pseudo-element of its originating
+  element's parent element (regardless of whether that property
+  is an inherited property).
+  https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
+  -->
+
+  <style>
+  div
+    {
+      font-size: 300%;
+    }
+
+  div::selection
+    {
+      background-color: yellow;
+      color: green;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* Finally, we now select such range of content */
+  }
+  </script>
+
+  <body onload="startTest();">
+
+  <p>Test passes if "Text sample" is green and if its background color is yellow.
+
+  <div id="test"><span>Text sample</span></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/grammar-error-002-manual.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+ <html lang="en">
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: highlighting of grammar error</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-pseudo-4/#highlight-selectors">
+  <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
+
+  <meta content="" name="flags">
+
+  <style>
+  input
+    {
+      font-size: 300%;
+    }
+
+  input::grammar-error
+    {
+      color: maroon;
+      text-decoration: underline dotted red;
+    }
+  </style>
+
+  <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent.
+
+  <p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a red dotted line.
+
+  <div><input type="text" value="Many thing can happen"></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/grammar-error-003-manual.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+ <html lang="en">
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: highlighting of grammar error</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-pseudo-4/#highlight-selectors">
+  <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
+
+  <meta content="" name="flags">
+
+  <style>
+  textarea
+    {
+      font-size: 300%;
+    }
+
+  textarea::grammar-error
+    {
+      color: maroon;
+      text-decoration: underline dotted red;
+    }
+  </style>
+
+  <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent.
+
+  <p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a red dotted line.
+
+  <div><textarea cols="20" rows="2">Many thing can happen</textarea></div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      background-color: yellow;
+      color: green;
+      display: inline-block;
+      font-size: 48px;
+      line-height: 1.25; /* computes to 60px */
+      position: relative;
+      top: 1.25em;
+    }
+  </style>
+
+  <p>Test passes if "Text sample" is green and if its background color is yellow.
+
+  <div>Test sample</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: highlight pseudo-element drawn below positioned element</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-pseudo-4/#highlight-painting">
+  <link rel="match" href="highlight-z-index-001-ref.html">
+
+  <meta content="" name="flags">
+  <meta name="assert" content="This test checks that the ::selection pseudo-element must be drawn below a relatively positioned element. In this test, such relatively positioned element is a preceding sibling element.">
+
+  <style>
+  div
+    {
+      font-size: 48px;
+      line-height: 1.25; /* computes to 60px */
+    }
+
+  div#rel-positioned-sibling
+    {
+      background-color: yellow;
+      color: green;
+      display: inline-block;
+      position: relative;
+      top: 1.25em;
+    }
+
+  div#test::selection
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* Finally, we now select such range of content */
+  }
+  </script>
+
+  <body onload="startTest();">
+
+  <p>Test passes if "Text sample" is green and if its background color is yellow.
+
+  <div id="rel-positioned-sibling">Test sample</div>
+
+  <div id="test">Test sample</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      background-color: yellow;
+      color: green;
+      display: inline-block;
+      font-size: 48px;
+      line-height: 1.25; /* computes to 60px */
+    }
+  </style>
+
+  <p>Test passes if "Text sample" is green and if its background color is yellow.
+
+  <div>Test sample</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Pseudo-Elements Test: highlight pseudo-element drawn below positioned element</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-pseudo-4/#highlight-painting">
+  <link rel="match" href="highlight-z-index-002-ref.html">
+
+  <meta content="" name="flags">
+  <meta name="assert" content="This test checks that the ::selection pseudo-element must be drawn below an absolutely positioned element. In this test, such absolutely positioned element is a preceding sibling element.">
+
+  <style>
+  div
+    {
+      font-size: 48px;
+      line-height: 1.25; /* computes to 60px */
+    }
+
+  div#abs-positioned-sibling
+    {
+      background-color: yellow;
+      color: green;
+      position: absolute;
+    }
+
+  div#test::selection
+    {
+      background-color: red;
+      color: yellow;
+    }
+  </style>
+
+  <script>
+  function startTest()
+  {
+  var targetRange = document.createRange();
+  /* We first create an empty range */
+  targetRange.selectNodeContents(document.getElementById("test"));
+  /* Then we set the range boundaries to the children of div#test */
+  window.getSelection().addRange(targetRange);
+  /* Finally, we now select such range of content */
+  }
+  </script>
+
+  <body onload="startTest();">
+
+  <p>Test passes if "Text sample" is green and if its background color is yellow.
+
+  <div id="abs-positioned-sibling">Test sample</div>
+
+  <div id="test">Test sample</div>