Bug 992245: Tests for non-functional :host selector. r=xidorn
authorEmilio Cobos Álvarez <emilio@crisal.io>
Sat, 07 Apr 2018 19:46:00 +0200
changeset 412372 5a24374d10f7
parent 412371 8bbf6b330acc
child 412373 7bff640ac3d4
push id62362
push userecoal95@gmail.com
push dateMon, 09 Apr 2018 12:25:48 +0000
treeherderautoland@5a24374d10f7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersxidorn
bugs992245
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 992245: Tests for non-functional :host selector. r=xidorn Both Blink and WebKit pass the added tests. But of course all this stuff was untested initially, and my initial naive implementation would fail them. MozReview-Commit-ID: KayYNfTXb5h
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/css/css-scoping/css-scoping-shadow-host-rule.html.ini
testing/web-platform/meta/css/css-scoping/shadow-cascade-order-001.html.ini
testing/web-platform/tests/css/css-scoping/host-descendant-001.html
testing/web-platform/tests/css/css-scoping/host-descendant-002.html
testing/web-platform/tests/css/css-scoping/host-descendant-invalidation.html
testing/web-platform/tests/css/css-scoping/host-dom-001.html
testing/web-platform/tests/css/css-scoping/host-multiple-001.html
testing/web-platform/tests/css/css-scoping/host-nested-001.html
testing/web-platform/tests/css/css-scoping/host-slotted-001.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -125506,16 +125506,76 @@
       [
        "/css/css-scoping/reference/green-box.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-scoping/host-descendant-001.html": [
+    [
+     "/css/css-scoping/host-descendant-001.html",
+     [
+      [
+       "/css/css-scoping/reference/green-box.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-scoping/host-descendant-002.html": [
+    [
+     "/css/css-scoping/host-descendant-002.html",
+     [
+      [
+       "/css/css-scoping/reference/green-box.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-scoping/host-multiple-001.html": [
+    [
+     "/css/css-scoping/host-multiple-001.html",
+     [
+      [
+       "/css/css-scoping/reference/green-box.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-scoping/host-nested-001.html": [
+    [
+     "/css/css-scoping/host-nested-001.html",
+     [
+      [
+       "/css/css-scoping/reference/green-box.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-scoping/host-slotted-001.html": [
+    [
+     "/css/css-scoping/host-slotted-001.html",
+     [
+      [
+       "/css/css-scoping/reference/green-box.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-scoping/shadow-assign-dynamic-001.html": [
     [
      "/css/css-scoping/shadow-assign-dynamic-001.html",
      [
       [
        "/css/css-scoping/reference/green-box.html",
        "=="
       ]
@@ -313690,16 +313750,28 @@
     ]
    ],
    "css/css-ruby/line-break-around-ruby-001.html": [
     [
      "/css/css-ruby/line-break-around-ruby-001.html",
      {}
     ]
    ],
+   "css/css-scoping/host-descendant-invalidation.html": [
+    [
+     "/css/css-scoping/host-descendant-invalidation.html",
+     {}
+    ]
+   ],
+   "css/css-scoping/host-dom-001.html": [
+    [
+     "/css/css-scoping/host-dom-001.html",
+     {}
+    ]
+   ],
    "css/css-scoping/shadow-cascade-order-001.html": [
     [
      "/css/css-scoping/shadow-cascade-order-001.html",
      {}
     ]
    ],
    "css/css-scoping/slotted-invalidation.html": [
     [
@@ -481454,17 +481526,17 @@
    "f5f4f2279506dc6106de38080a639979ad7e05d0",
    "testharness"
   ],
   "css/css-align/content-distribution/place-content-shorthand-003.html": [
    "966e8dd3893c487b02bb139ac26862995b655603",
    "testharness"
   ],
   "css/css-align/content-distribution/place-content-shorthand-004.html": [
-   "e755317eedc580d6373df24596590d22fc9aad5d",
+   "52566e7e88edf9f57f441498b9d366b66be50fd7",
    "testharness"
   ],
   "css/css-align/content-distribution/place-content-shorthand-005.html": [
    "6b3d7b9ae7d5b28510385cccaaade09268409cab",
    "testharness"
   ],
   "css/css-align/content-distribution/place-content-shorthand-006.html": [
    "a40c054505716dda72b642ada40d8796a5d68795",
@@ -481546,17 +481618,17 @@
    "638f5cbcc320477d495b9b0a752e6aaa048fee5e",
    "testharness"
   ],
   "css/css-align/default-alignment/place-items-shorthand-006.html": [
    "b7106d0ee863673c0d9a6160d035706edb3c67a8",
    "testharness"
   ],
   "css/css-align/default-alignment/shorthand-serialization-001.html": [
-   "0126d0a56ec9af324a886d286563cf8f39fc1b78",
+   "6c85da43be475b680d5351bdb969d09b90a6d97e",
    "testharness"
   ],
   "css/css-align/distribution-values/space-evenly-001.html": [
    "6fd28a5bf615ce822ed935de90ce5c1a41d39104",
    "reftest"
   ],
   "css/css-align/gaps/column-gap-animation-001.html": [
    "00023e39b6fafbfb31cabb30ed4ddf77a71b248f",
@@ -481678,17 +481750,17 @@
    "a266e09207859b058f445acb7c472156e525dd21",
    "testharness"
   ],
   "css/css-align/self-alignment/place-self-shorthand-003.html": [
    "2f17a907183eee3c3383894212f7d3d84770db2d",
    "testharness"
   ],
   "css/css-align/self-alignment/place-self-shorthand-004.html": [
-   "4f153c62e5d1eecf9eb4678036123d0460d7ecf1",
+   "2259cbd38befc9cf4fcb3e7a567fe3197740f613",
    "testharness"
   ],
   "css/css-align/self-alignment/place-self-shorthand-005.html": [
    "5a11a37355d05683ac1adbf1a5f6e1d0f5c88863",
    "testharness"
   ],
   "css/css-align/self-alignment/place-self-shorthand-006.html": [
    "d355eac038a7307e7a969632bc745ad25d8d6f43",
@@ -486298,17 +486370,17 @@
    "056b3597f3555c803c74a8f6277a06626efd12ea",
    "reftest"
   ],
   "css/css-content/attr-case-insensitive-ref.html": [
    "30577fc39afb6ac028e25be11f363e060c0850b2",
    "support"
   ],
   "css/css-content/attr-case-insensitive.html": [
-   "1118de214d8118e6b973f70b4496a4e5d51f3600",
+   "6b6cf2c15295940fb8831d17209635dc4e31cd78",
    "reftest"
   ],
   "css/css-content/element-replacement-ref.html": [
    "f1ad3fca133b1b671e45ae1307fbe9454c40e3ec",
    "support"
   ],
   "css/css-content/element-replacement.html": [
    "f491ddf2b3062ea2f9b616c968c88b9cc95f22eb",
@@ -506665,16 +506737,44 @@
   "css/css-scoping/css-scoping-shadow-with-rules-no-style-leak.html": [
    "1021b74fe5071a7df6dd9ef085c35e81b29d4fa2",
    "reftest"
   ],
   "css/css-scoping/css-scoping-shadow-with-rules.html": [
    "69774c51e6df49c891ecaaf2c384552106a1eb32",
    "reftest"
   ],
+  "css/css-scoping/host-descendant-001.html": [
+   "703ba0d07ece44f4cc017b5351dea3057337f234",
+   "reftest"
+  ],
+  "css/css-scoping/host-descendant-002.html": [
+   "c96ebd0da1c7b2ce00e56bbef54bdd382789e2f2",
+   "reftest"
+  ],
+  "css/css-scoping/host-descendant-invalidation.html": [
+   "ec27e3cbe587470ecb945357c74954baf139d797",
+   "testharness"
+  ],
+  "css/css-scoping/host-dom-001.html": [
+   "f77b672837e1c9728e53d74b533d79530fbd1249",
+   "testharness"
+  ],
+  "css/css-scoping/host-multiple-001.html": [
+   "eb45ceb8c80d2cfbeb5bd317ab906f0881a13435",
+   "reftest"
+  ],
+  "css/css-scoping/host-nested-001.html": [
+   "a0b74d2e6bf24e9142904a925f95e969d206db20",
+   "reftest"
+  ],
+  "css/css-scoping/host-slotted-001.html": [
+   "918bd04b95a276c6035383f2fe4dcfe4274bceeb",
+   "reftest"
+  ],
   "css/css-scoping/reference/green-box.html": [
    "a736f68dc602c0fccab56ec5cc6234cb3298c88d",
    "support"
   ],
   "css/css-scoping/shadow-assign-dynamic-001.html": [
    "c57e0fd5aa5be63e1cadf65a4e382798c5e05ec4",
    "reftest"
   ],
deleted file mode 100644
--- a/testing/web-platform/meta/css/css-scoping/css-scoping-shadow-host-rule.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[css-scoping-shadow-host-rule.html]
-  expected: FAIL
--- a/testing/web-platform/meta/css/css-scoping/shadow-cascade-order-001.html.ini
+++ b/testing/web-platform/meta/css/css-scoping/shadow-cascade-order-001.html.ini
@@ -1,14 +1,9 @@
 [shadow-cascade-order-001.html]
-  [C2. document vs :host with !important, :host rule should win for open mode.]
-    expected: FAIL
-
-  [C6. :host with !important vs inline, :host rule should win for open mode.]
-    expected: FAIL
 
   [D1. document vs ::slotted both with !important, ::slotted rule should win for open mode.]
     expected: FAIL
 
   [D2. document vs :host both with !important, :host rule should win for open mode.]
     expected: FAIL
 
   [D4. ::slotted vs :host both with !important, later in tree-of-trees rule should win for open mode.]
@@ -18,28 +13,19 @@
     expected: FAIL
 
   [D6. :host vs inline both with !important, :host rule should win for open mode.]
     expected: FAIL
 
   [E2. all styles with !important applied, rule in the last tree-of-trees should win for open mode.]
     expected: FAIL
 
-  [F5. document vs :host with !important, important rule should win for open mode.]
-    expected: FAIL
-
   [F6. all rules with !important, the last rule in tree-of-trees should win for open mode.]
     expected: FAIL
 
-  [C2. document vs :host with !important, :host rule should win for closed mode.]
-    expected: FAIL
-
-  [C6. :host with !important vs inline, :host rule should win for closed mode.]
-    expected: FAIL
-
   [D1. document vs ::slotted both with !important, ::slotted rule should win for closed mode.]
     expected: FAIL
 
   [D2. document vs :host both with !important, :host rule should win for closed mode.]
     expected: FAIL
 
   [D4. ::slotted vs :host both with !important, later in tree-of-trees rule should win for closed mode.]
     expected: FAIL
@@ -48,14 +34,11 @@
     expected: FAIL
 
   [D6. :host vs inline both with !important, :host rule should win for closed mode.]
     expected: FAIL
 
   [E2. all styles with !important applied, rule in the last tree-of-trees should win for closed mode.]
     expected: FAIL
 
-  [F5. document vs :host with !important, important rule should win for closed mode.]
-    expected: FAIL
-
   [F6. all rules with !important, the last rule in tree-of-trees should win for closed mode.]
     expected: FAIL
 
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/host-descendant-001.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<link rel="match" href="reference/green-box.html">
+<p>Test passes if you see a single 100px by 100px green box below.</p>
+<div id="host"><div></div></div>
+<script>
+  let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `
+    <style>
+      :host ::slotted(div) { width: 100px; height: 100px; background: green; }
+      * :host ::slotted(div) { background: red; }
+    </style>
+    <slot></slot>
+  `;
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/host-descendant-002.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<link rel="match" href="reference/green-box.html">
+<p>Test passes if you see a single 100px by 100px green box below.</p>
+<div id="host"></div>
+<script>
+  let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `
+    <style>
+      :host { width: 100px; height: 100px; background: green; }
+      * :host { background: red; }
+    </style>
+  `;
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/host-descendant-invalidation.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>CSS Test: element style is correctly updated for rule with :host</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<div id="host"><div id="slotted"></div></div>
+<script>
+test(function() {
+  let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `
+    <style>
+      :host ::slotted(div) { width: 100px; height: 100px; background: red; }
+      :host ::slotted(.foo) { background: green; }
+    </style>
+    <slot></slot>
+  `;
+  assert_equals(getComputedStyle(slotted).backgroundColor, "rgb(255, 0, 0)");
+  host.firstElementChild.classList.add('foo');
+  assert_equals(getComputedStyle(slotted).backgroundColor, "rgb(0, 128, 0)");
+});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/host-dom-001.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>CSS Test: :host in DOM APIs</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<div id="host"></div>
+<script>
+test(function() {
+  let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `<div></div>`;
+  assert_false(host.matches(":host"), ":host shouldn't match from CSSOM from outside the shadow tree");
+  assert_true(root.firstElementChild.matches(":host div"), ":host should match from within the shadow tree");
+  assert_equals(root.querySelector(":host div"), root.firstElementChild, ":host should match from within the shadow tree");
+})
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/host-multiple-001.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>CSS Test: :host multiple times in the same compound selector.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<link rel="match" href="reference/green-box.html">
+<p>Test passes if you see a single 100px by 100px green box below.</p>
+<div id="host"></div>
+<script>
+  let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `
+    <style>
+      :host:host { width: 100px; height: 100px; background: green }
+    </style>
+  `;
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/host-nested-001.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Test: :host doesn't match nested shadow hosts.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<link rel="match" href="reference/green-box.html">
+<style>
+  #host {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<p>Test passes if you see a single 100px by 100px green box below.</p>
+<div id="host">FAIL</div>
+<script>
+  let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `
+    <style>
+      div {
+        background: green;
+        width: 100px;
+        height: 100px;
+      }
+      :host { background: red !important }
+      div:host { background: red !important }
+    </style>
+    <div id="nested-host">FAIL - nested shadow host</div>
+  `;
+  root.getElementById("nested-host").attachShadow({ mode: "open" });
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/host-slotted-001.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>CSS Test: :host matches while collecting ::slotted rules</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#host-selector">
+<link rel="match" href="reference/green-box.html">
+<p>Test passes if you see a single 100px by 100px green box below.</p>
+<div id="host"><div></div></div>
+<script>
+  let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `
+    <style>
+      ::slotted(div) { width: 100px; height: 100px; background: red; }
+      :host ::slotted(div) { background: green; }
+    </style>
+    <slot></slot>
+  `;
+</script>