web-platform-tests · fantasai · May 5, 2020 · Oct 31, 2019 · Dec 28, 2019 · Feb 22, 2020
diff --git a/css/css-pseudo/cascade-highlight-001-ref.html b/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>
diff --git a/css/css-pseudo/cascade-highlight-001.html b/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>
diff --git a/css/css-pseudo/cascade-highlight-002.html b/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>
diff --git a/css/css-pseudo/cascade-highlight-004-ref.html b/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>
diff --git a/css/css-pseudo/cascade-highlight-004.html b/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>
diff --git a/css/css-pseudo/grammar-error-002-manual.html b/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>
diff --git a/css/css-pseudo/grammar-error-003-manual.html b/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>
diff --git a/css/css-pseudo/highlight-z-index-001-ref.html b/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>
diff --git a/css/css-pseudo/highlight-z-index-001.html b/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>
diff --git a/css/css-pseudo/highlight-z-index-002-ref.html b/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>