Bug 37468 - Add web-platform tests for StyleRule selectorText property setter. r=xidorn
authorKerem Kat <keremkat@gmail.com>
Sun, 18 Feb 2018 21:23:56 +0300
changeset 413390 7343e39bf9854651c4f8c2525767b825666d38fd
parent 413389 4d7067c22f47dc071f085d27139a296d6bfc1f69
child 413391 65f61ee6d17e8a49676bcd98396bf43a4511be3e
push id33847
push userncsoregi@mozilla.com
push dateSun, 15 Apr 2018 09:17:31 +0000
treeherdermozilla-central@e96685584bf7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersxidorn
bugs37468
milestone61.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 37468 - Add web-platform tests for StyleRule selectorText property setter. r=xidorn
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/cssom/CSSStyleRule-set-selectorText-namespace.html
testing/web-platform/tests/css/cssom/CSSStyleRule-set-selectorText.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -318172,16 +318172,28 @@
     ]
    ],
    "css/cssom/CSSRuleList.html": [
     [
      "/css/cssom/CSSRuleList.html",
      {}
     ]
    ],
+   "css/cssom/CSSStyleRule-set-selectorText-namespace.html": [
+    [
+     "/css/cssom/CSSStyleRule-set-selectorText-namespace.html",
+     {}
+    ]
+   ],
+   "css/cssom/CSSStyleRule-set-selectorText.html": [
+    [
+     "/css/cssom/CSSStyleRule-set-selectorText.html",
+     {}
+    ]
+   ],
    "css/cssom/CSSStyleRule.html": [
     [
      "/css/cssom/CSSStyleRule.html",
      {}
     ]
    ],
    "css/cssom/CSSStyleSheet.html": [
     [
@@ -531779,16 +531791,24 @@
   "css/cssom/CSSNamespaceRule.html": [
    "701b19bdfa480a5e0997492094657e32ae11ea48",
    "testharness"
   ],
   "css/cssom/CSSRuleList.html": [
    "8d8b435c2398c7a9de5fd57584240e24b45b80bc",
    "testharness"
   ],
+  "css/cssom/CSSStyleRule-set-selectorText-namespace.html": [
+   "77e5def2b8be9b7fb19e81bd3630a333f45fb39b",
+   "testharness"
+  ],
+  "css/cssom/CSSStyleRule-set-selectorText.html": [
+   "a4ac01a34f185fdea811733d1994070cb309be82",
+   "testharness"
+  ],
   "css/cssom/CSSStyleRule.html": [
    "9fe62d2e23709b77e9b5cda4522ec1c04d2940cf",
    "testharness"
   ],
   "css/cssom/CSSStyleSheet.html": [
    "f0d47464da9d30e70733f09af78f3e9f982c4406",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/CSSStyleRule-set-selectorText-namespace.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSSOM StyleRule selectorText property setter with namespaces</title>
+<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylerule-selectortext">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+
+<style type="text/css" id="styleElement">
+@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+svg|*.style0 { background-color: rgb(0, 0, 255) !important; }
+svg|*.style1 { background-color: rgb(255, 0, 255); }
+</style>
+
+<span>
+  <p></p>
+
+  <svg height="30" width="200" id="container" class="style1" lang="zh-CN" language segment="42 43">
+    <text x="0" y="15">SVG text</text>
+  </svg>
+</span>
+
+<script>
+  var styleSheet = document.getElementById("styleElement").sheet;
+  var rule = styleSheet.cssRules[2];
+
+  var divContainerStyle = getComputedStyle(document.getElementById("container"));
+
+  const originalStyleSelector = "svg|*.style0";
+
+  var assertColors = function(selectorMatches) {
+    assert_equals(divContainerStyle.getPropertyValue('background-color'), selectorMatches ? "rgb(0, 0, 255)" : "rgb(255, 0, 255)")
+  };
+
+  [
+    {selector: ".style1", isMatch: false, },
+    {selector: "svg|*.style1  ", isMatch: true, normalizedSelector: "svg|*.style1"},
+    {selector: "*|*.style1  ", isMatch: true, normalizedSelector: "*|*.style1"},
+    {selector: " *.style1  ", isMatch: false, normalizedSelector: ".style1"},
+    {selector: "p", isMatch: false},
+  ].forEach(function(testCase) {
+    test(function() {
+      // Check if starting with the default value.
+      assert_equals(rule.selectorText, originalStyleSelector);
+
+      this.add_cleanup(function() { rule.selectorText = originalStyleSelector; });
+
+      assertColors(false);
+
+      rule.selectorText = testCase.selector;
+
+      var expectedSelector = testCase.normalizedSelector ? testCase.normalizedSelector : testCase.selector;
+
+      assert_equals(rule.selectorText, expectedSelector);
+
+      assertColors(testCase.isMatch);
+    }, "CSSStyleRule: selectorText value: |" + testCase.selector + "| isMatch: " + testCase.isMatch);
+  });
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/CSSStyleRule-set-selectorText.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSSOM StyleRule selectorText property setter</title>
+<link rel="help" href="https://drafts.csswg.org/cssom-1/#dom-cssstylerule-selectortext">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+
+<style type="text/css" id="styleElement">
+  .style0 { background-color: rgb(0, 0, 255) !important; }
+  .style1 { background-color: rgb(255, 0, 255); }
+</style>
+
+<span>
+  <p></p>
+  <div id="container" class="style1" lang="zh-CN" language segment="42 43">
+  </div>
+</span>
+
+<script>
+  var styleSheet = document.getElementById("styleElement").sheet;
+  var rule = styleSheet.cssRules[0];
+
+  var divContainerStyle = getComputedStyle(document.getElementById("container"));
+
+  const originalStyleSelector = ".style0";
+
+  var assertColors = function(selectorMatches) {
+    assert_equals(divContainerStyle.backgroundColor, selectorMatches ? "rgb(0, 0, 255)" : "rgb(255, 0, 255)")
+  };
+
+  test(function() {
+    assert_equals(typeof rule.selectorText, "string");
+    assert_equals(rule.selectorText, originalStyleSelector);
+  }, "CSSStyleRule: Can read selectorText value.");
+
+  [ // Invalid selector values.
+    "",
+    " ",
+    "!!",
+    "123",
+    "-",
+    "$",
+    ":",
+    "::",
+    ":::",
+    "::gibberish",
+    ":gibberish",
+    ".",
+    "#",
+    "[]",
+    "[",
+    "()",
+    "(",
+    "{}",
+    "{",
+  ].forEach(function(selector) {
+    test(function() {
+      assert_equals(rule.selectorText, originalStyleSelector);
+
+      this.add_cleanup(function() { rule.selectorText = originalStyleSelector; });
+
+      rule.selectorText = selector;
+
+      assert_equals(rule.selectorText, originalStyleSelector);
+    }, "CSSStyleRule: Invalid CSS selector: " + selector);
+  });
+
+
+  [ // Valid selector values.
+    {selector: "#container", isMatch: true},
+    {selector: "#container  ", isMatch: true, normalizedSelector: "#container"},
+    {selector: "  #container ", isMatch: true, normalizedSelector: "#container"},
+    {selector: ".style1", isMatch: true},
+    {selector: "div.style1", isMatch: true},
+    {selector: "div:not(#non-existing-id)", isMatch: true},
+    {selector: "div", isMatch: true},
+    {selector: "*", isMatch: true},
+
+    {selector: "#no-match", isMatch: false},
+    {selector: "ÇĞıİ", isMatch: false},
+    {selector: "🤓", isMatch: false},
+
+    {selector: "[language]", isMatch: true},
+    {selector: "[language-no]", isMatch: false},
+    {selector: "[lang=\"zh-CN\"]", isMatch: true},
+    {selector: "[lang=\"ab-CD\"]", isMatch: false},
+    {selector: "[segment~=\"43\"]", isMatch: true},
+    {selector: "[segment~=\"42\"]", isMatch: true},
+    {selector: "[lang|=\"zh\"]", isMatch: true},
+    {selector: "[lang|=\"zh-CN\"]", isMatch: true},
+    {selector: "[lang|=\"ab\"]", isMatch: false},
+    {selector: "[lang|=\"z\"]", isMatch: false},
+    {selector: "[lang^=\"z\"]", isMatch: true},
+    {selector: "[lang^=\"ab\"]", isMatch: false},
+    {selector: "[segment$=\"43\"]", isMatch: true},
+    {selector: "[segment$=\"3\"]", isMatch: true},
+    {selector: "[segment$=\"42\"]", isMatch: false},
+    {selector: "[lang*=\"-\"]", isMatch: true},
+    {selector: "[lang*=\"h-\"]", isMatch: true},
+    {selector: "[lang*=\"ab\"]", isMatch: false},
+
+    {selector: "*|div", isMatch: true, normalizedSelector: "div"},
+    {selector: "|div", isMatch: false},
+    {selector: "*|a", isMatch: false, normalizedSelector: "a"},
+    {selector: "*|*", isMatch: true, normalizedSelector: "*"},
+    {selector: "[*|lang]", isMatch: true, normalizedSelector: "[*|lang]"},
+    {selector: "[|lang]", isMatch: true, normalizedSelector: "[lang]"},
+
+    {selector: ":active", isMatch: false},
+    {selector: ":not(:active)", isMatch: true},
+    {selector: "*:not(:active)", isMatch: true, normalizedSelector: ":not(:active)"},
+    {selector: "div:not(:active)", isMatch: true},
+    {selector: "div:active", isMatch: false},
+
+    {selector: "span div", isMatch: true},
+    {selector: "span  div  ", isMatch: true, normalizedSelector: "span div"},
+    {selector: "span > div", isMatch: true},
+    {selector: "div div", isMatch: false},
+    {selector: "div > div", isMatch: false},
+    {selector: "p + div", isMatch: true},
+    {selector: "span + div", isMatch: false},
+    {selector: "p ~ div", isMatch: true},
+    {selector: "span ~ div", isMatch: false},
+
+    {selector: ":lang(zh-CN)", isMatch: true},
+    {selector: ":lang(zh)", isMatch: true},
+    {selector: ":lang(tr-AZ)", isMatch: false},
+
+    {selector: "::after", isMatch: false, normalizedSelector: "::after"},
+    {selector: ":after", isMatch: false, normalizedSelector: "::after"},
+    {selector: "::before", isMatch: false, normalizedSelector: "::before"},
+    {selector: ":before", isMatch: false, normalizedSelector: "::before"},
+    {selector: "::first-letter", isMatch: false, normalizedSelector: "::first-letter"},
+    {selector: ":first-letter", isMatch: false, normalizedSelector: "::first-letter"},
+    {selector: "::first-line", isMatch: false, normalizedSelector: "::first-line"},
+    {selector: ":first-line", isMatch: false, normalizedSelector: "::first-line"},
+
+    {selector: "div:focus:not([lang=\"zh-CN\"])", isMatch: false},
+    {selector: "div[lang=\"zh-CN\"]:not(:focus)", isMatch: true},
+  ].forEach(function(testCase) {
+    test(function() {
+      // Check if starting with the default value.
+      assert_equals(rule.selectorText, originalStyleSelector);
+
+      this.add_cleanup(function() { rule.selectorText = originalStyleSelector; });
+
+      assertColors(false);
+
+      rule.selectorText = testCase.selector;
+
+      var expectedSelector = testCase.normalizedSelector ? testCase.normalizedSelector : testCase.selector;
+
+      assert_equals(rule.selectorText, expectedSelector);
+
+      assertColors(testCase.isMatch);
+    }, "CSSStyleRule: selectorText value: |" + testCase.selector + "| isMatch: " + testCase.isMatch);
+  });
+</script>