Commit dc1b7c2d authored by hayato's avatar hayato Committed by Commit bot

Remove, or rewrite if necessary, tests which use /deep/ or ::shadow

This is a preparation CL for https://codereview.chromium.org/2778983006.

There are still other tests which will fail when /deep/ (or ::shadow) is disabled.
These tests are being tracked in meta bug 715034.

BUG=715034

Review-Url: https://codereview.chromium.org/2843883002
Cr-Commit-Position: refs/heads/master@{#467269}
parent ec1e1427
......@@ -6735,7 +6735,6 @@ crbug.com/591099 fast/css/cursor-parsing-image-set.html [ Failure ]
crbug.com/591099 fast/css/cursor-parsing-quirks.html [ Failure ]
crbug.com/591099 fast/css/custom-font-xheight.html [ Failure ]
crbug.com/591099 fast/css/dashboard-regions-attr-crash.html [ Failure ]
crbug.com/591099 fast/css/deep-cascade-order.html [ Failure ]
crbug.com/591099 fast/css/default-bidi-css-rules.html [ Failure ]
crbug.com/591099 fast/css/deprecated-flex-box-zero-width-intrinsic-max-width.html [ Failure ]
crbug.com/591099 fast/css/device-aspect-ratio.html [ Failure ]
......@@ -7347,7 +7346,6 @@ crbug.com/591099 fast/css/invalidation/scrollbar-pseudo.html [ Failure ]
crbug.com/591099 fast/css/invalidation/selection-pseudo.html [ Failure ]
crbug.com/591099 fast/css/invalidation/shadow-add-sheet-content.html [ Failure ]
crbug.com/591099 fast/css/invalidation/shadow-add-sheet-host.html [ Failure ]
crbug.com/591099 fast/css/invalidation/shadow-boundary-crossing.html [ Failure ]
crbug.com/591099 fast/css/invalidation/sheet-ruleset-invalidation.html [ Crash ]
crbug.com/591099 fast/css/invalidation/slotted.html [ Failure ]
crbug.com/591099 fast/css/invalidation/spatial-navigation-focus-pseudo.html [ Failure ]
......@@ -7361,7 +7359,6 @@ crbug.com/591099 fast/css/invalidation/targeted-class-content-pseudo.html [ Fail
crbug.com/591099 fast/css/invalidation/targeted-class-custom-pseudo.html [ Failure ]
crbug.com/591099 fast/css/invalidation/targeted-class-host-pseudo.html [ Failure ]
crbug.com/591099 fast/css/invalidation/targeted-class-id.html [ Failure ]
crbug.com/591099 fast/css/invalidation/targeted-class-shadow-combinator.html [ Failure ]
crbug.com/591099 fast/css/invalidation/targeted-class-style-invalidation.html [ Failure ]
crbug.com/591099 fast/css/invalidation/targeted-class-type-selectors.html [ Failure ]
crbug.com/591099 fast/css/invalidation/targeted-class-whole-subtree.html [ Failure ]
......@@ -8572,7 +8569,6 @@ crbug.com/591099 fast/dom/shadow/cascade-of-treeboundary-crossing-rules.html [ F
crbug.com/591099 fast/dom/shadow/compare-document-position.html [ Failure ]
crbug.com/591099 fast/dom/shadow/compare-treescope-position.html [ Failure ]
crbug.com/591099 fast/dom/shadow/contains-with-shadow-dom.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-deep.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-element-api.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-element-distributed-nodes.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-element-outside-shadow.html [ Failure ]
......@@ -8581,11 +8577,9 @@ crbug.com/591099 fast/dom/shadow/content-pseudo-element-not-last.html [ Failure
crbug.com/591099 fast/dom/shadow/content-pseudo-element-overridden-2.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-pseudo-element-overridden.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-pseudo-element-relative-selector-css-text.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-pseudo-element-with-deep-combinator-and-host-pseudo-class.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-pseudo-element-with-host-pseudo-class-2.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-pseudo-element-with-host-pseudo-class.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-pseudo-element-with-nested-shadow.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-pseudo-element-with-shadow-pseudo-element-and-host-pseudo-class.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-reprojection-fallback-crash.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-reprojection-recalc.html [ Failure ]
crbug.com/591099 fast/dom/shadow/content-selector-query.html [ Failure ]
......@@ -8678,7 +8672,6 @@ crbug.com/591099 fast/dom/shadow/shadow-element-distributed-nodes.html [ Failure
crbug.com/591099 fast/dom/shadow/shadow-element.html [ Failure ]
crbug.com/591099 fast/dom/shadow/shadow-hierarchy-exception.html [ Failure ]
crbug.com/591099 fast/dom/shadow/shadowhost-keyframes.html [ Failure ]
crbug.com/591099 fast/dom/shadow/shadow-pseudo-element.html [ Failure ]
crbug.com/591099 fast/dom/shadow/shadow-removechild-and-blur-event.html [ Crash ]
crbug.com/591099 fast/dom/shadow/shadow-reprojection-click.html [ Failure ]
crbug.com/591099 fast/dom/shadow/shadow-root-activeElement.html [ Failure ]
......@@ -8701,9 +8694,6 @@ crbug.com/591099 fast/dom/shadow/style-of-distributed-node.html [ Failure ]
crbug.com/591099 fast/dom/shadow/style-sharing-host-attribute.html [ Failure ]
crbug.com/591099 fast/dom/shadow/style-sharing-sibling-shadow.html [ Failure ]
crbug.com/591099 fast/dom/shadow/style-sharing-styles-in-older-shadow-roots.html [ Failure ]
crbug.com/591099 fast/dom/shadow/stylesheets-order-in-shadow-dom.html [ Failure ]
crbug.com/591099 fast/dom/shadow/style-with-deep-combinator.html [ Failure ]
crbug.com/591099 fast/dom/shadow/style-with-shadow-pseudo-element.html [ Failure ]
crbug.com/591099 fast/dom/shadow/suppress-mutation-events-in-shadow-characterdata.html [ Failure ]
crbug.com/591099 fast/dom/shadow/suppress-mutation-events-in-shadow.html [ Failure ]
crbug.com/591099 fast/dom/shadow/svg-style-in-shadow-tree-crash.html [ Crash ]
......@@ -18292,7 +18282,6 @@ crbug.com/591099 shadow-dom/nodetree-radio-node-list.html [ Crash ]
crbug.com/591099 shadow-dom/pointer-lock-in-shadow.html [ Crash ]
crbug.com/591099 shadow-dom/range-caret-range-from-point-left-of-shadow.html [ Crash ]
crbug.com/591099 shadow-dom/slotted-pseudo-element-in-v0-tree-crash.html [ Failure ]
crbug.com/591099 shadow-dom/v0/cascade-deep-in-v1.html [ Failure ]
crbug.com/591099 shadow-dom/v0/event-composed-path.html [ Crash ]
crbug.com/591099 shadow-dom/v0/get-destination-insertion-points.html [ Failure ]
crbug.com/591099 shadow-dom/v0/get-destination-insertion-points-re-distribution.html [ Failure ]
CONSOLE WARNING: line 1: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
Cascade order for inner/outer tree rules with /deep/ (v0 bug compatible).
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS getComputedStyle(root1.querySelector('div')).color is red
PASS getComputedStyle(root1.querySelector('div + div')).color is red
PASS getComputedStyle(root2.querySelector('div')).color is red
PASS getComputedStyle(root2.querySelector('div + div')).color is green
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
.host1 /deep/ div { color: green }
#host2 /deep/ div { color: red !important }
</style>
<div id="host1" class="host1"></div>
<div id="host2" class="host2"></div>
<script>
description("Cascade order for inner/outer tree rules with /deep/ (v0 bug compatible).");
var root1 = host1.createShadowRoot();
root1.innerHTML = '<style>#d1 {color:red}</style><div id="d1">Should be green</div><div style="color: red">Should be green</div>';
var root2 = host2.createShadowRoot();
root2.innerHTML = '<style>.d1 {color:green !important}</style><div class="d1">Should be green</div><div style="color: green !important">Should be green</div>';
var green = "rgb(0, 128, 0)";
var red = "rgb(255, 0, 0)";
shouldBe("getComputedStyle(root1.querySelector('div')).color", "red");
shouldBe("getComputedStyle(root1.querySelector('div + div')).color", "red");
shouldBe("getComputedStyle(root2.querySelector('div')).color", "red");
shouldBe("getComputedStyle(root2.querySelector('div + div')).color", "green");
</script>
CONSOLE WARNING: line 25: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
PASS successfullyParsed is true
TEST COMPLETE
......
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
body /deep/ .a { width: 100px; height: 100px; background-color: green; }
<style id="shadow-style">
.a { width: 100px; height: 100px; background-color: green; }
</style>
<script>
var inner;
......@@ -11,6 +11,7 @@
root.appendChild(shadowContainer);
var shadowRoot = shadowContainer.createShadowRoot();
shadowRoot.appendChild(document.querySelector('#shadow-style'));
var mid = document.createElement('div');
shadowRoot.appendChild(mid);
......
CONSOLE WARNING: line 1: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
Invalidation sets should not apply across shadow roots if tree boundary crossing rules are not used.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS internals.updateStyleAndReturnAffectedElementCount() is 10
PASS internals.updateStyleAndReturnAffectedElementCount() is 30
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.deep /deep/ .inside,
.shallow .inside {
padding: 0;
}
</style>
<div id="sandbox"></div>
<script>
description("Invalidation sets should not apply across shadow roots if tree boundary crossing rules are not used.");
var sandbox = document.getElementById("sandbox");
var sandboxRoot = sandbox.createShadowRoot();
sandboxRoot.innerHTML = "<content></content>";
for (var j = 0; j < 10; ++j) {
var childDiv = sandbox.appendChild(document.createElement("div"));
childDiv.className = "inside";
var shadowDiv = sandboxRoot.appendChild(document.createElement("div"));
shadowDiv.className = "inside";
shadowDiv.createShadowRoot().innerHTML = "<div class=inside><content></content></div>";
}
getComputedStyle(sandbox).color;
sandbox.className = "shallow";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "10");
sandbox.className = "";
getComputedStyle(sandbox).color;
sandbox.className = "deep";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "30");
</script>
CONSOLE WARNING: line 1: ::shadow pseudo-element is deprecated and will be removed in M60, around August 2017. See https://www.chromestatus.com/features/6750456638341120 for more details.
CONSOLE WARNING: line 1: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
Check that targeted class invalidation works for ::shadow and /deep/ combinators.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS getComputedStyle(match1, null).backgroundColor is transparent
PASS getComputedStyle(match2, null).backgroundColor is transparent
PASS internals.updateStyleAndReturnAffectedElementCount() is 1
PASS getComputedStyle(match1, null).backgroundColor is green
PASS internals.updateStyleAndReturnAffectedElementCount() is 1
PASS getComputedStyle(match2, null).backgroundColor is green
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.t1 #host1::shadow .match { background-color: green; }
.t2 /deep/ .match { background-color: green; }
</style>
<div id="t1">
<div id="host1"></div>
<div></div>
</div>
<div id="t2">
<div id="host2"></div>
<div></div>
</div>
<script>
description("Check that targeted class invalidation works for ::shadow and /deep/ combinators.");
// Create shadow trees
var host1 = document.getElementById("host1");
var match1 = host1.createShadowRoot().appendChild(document.createElement("div"));
match1.className = "match";
var host2 = document.getElementById("host2");
var innerHost = host2.createShadowRoot().appendChild(document.createElement("div"));
var match2 = innerHost.createShadowRoot().appendChild(document.createElement("div"));
match2.className = "match";
var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";
shouldBe("getComputedStyle(match1, null).backgroundColor", "transparent");
shouldBe("getComputedStyle(match2, null).backgroundColor", "transparent");
document.body.offsetLeft; // force style recalc.
document.getElementById("t1").className = "t1";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(match1, null).backgroundColor", "green");
document.body.offsetLeft; // force style recalc.
document.getElementById("t2").className = "t2";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(match2, null).backgroundColor", "green");
</script>
CONSOLE WARNING: line 16: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
Test for casacde of treeboundary crossing rules.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS borderColorOf(getNodeInComposedTree("target")) is "rgb(0, 128, 0)"
PASS borderColorOf(getNodeInComposedTree("host/host2/target")) is "rgb(0, 128, 0)"
PASS borderColorOf(getNodeInComposedTree("host/target")) is "rgb(0, 128, 0)"
PASS borderColorOf(getNodeInComposedTree("host/target")) is "rgb(0, 128, 0)"
PASS successfullyParsed is true
......
......@@ -57,53 +57,6 @@ borderColorShouldBe('target', 'rgb(0, 128, 0)');
cleanUp();
// Rules declared in outer treescope should win.
sandbox.appendChild(
createDOM('div', {},
createDOM('style', {},
document.createTextNode('div /deep/ span { border: 1px solid green; }')),
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('style', {},
document.createTextNode('div /deep/ span { border: 1px solid red; }')),
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('style', {},
document.createTextNode('div > span { border: 1px solid yellow; }')),
createDOM('div', {},
createDOM('span', {'id': 'target'},
document.createTextNode('Geen border')))))))));
borderColorShouldBe('host/host2/target', 'rgb(0, 128, 0)');
cleanUp();
// Comparing rules declared in outer treescope with rules declared in inner treescope.
// Outer's should win.
sandbox.appendChild(
createDOM('div', {},
createDOM('style', {},
document.createTextNode('div /deep/ p:empty { border: 1px solid green; }')),
createDOM('div', {'id': 'host'},
createShadowRoot(
createDOM('div', {},
createDOM('style', {},
document.createTextNode('div > p:empty { border: 1px solid blue; }')),
createShadowRoot(
createDOM('style', {},
document.createTextNode('content::content > p { border: 1px solid red; }')),
createDOM('div', {},
createShadowRoot(
createDOM('style', {},
document.createTextNode('content::content > p { border: 1px solid yellow; }')),
createDOM('content', {})),
createDOM('content', {}))),
createDOM('p', {'id': 'target'}))))));
borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
cleanUp();
// Comparing important rules declared in outer treescope with important rules declared in inner treescope.
// Inner's should win.
sandbox.appendChild(
......@@ -122,4 +75,3 @@ cleanUp();
</script>
</html>
CONSOLE WARNING: line 1: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
::content /deep/ should match deep into distributed subtree.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS getComputedStyle(target).color is "rgb(0, 128, 0)"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
<div id="sandbox"></div>
<script>
description("::content /deep/ should match deep into distributed subtree.");
var shadowStyle = document.createElement('style');
shadowStyle.innerText = "::content /deep/ #target { color: green; }";
sandbox.appendChild(
createDOM('div', {},
createShadowRoot(
shadowStyle,
createDOM('content')),
createDOM('div', {'id': 'inner'},
createShadowRoot(
createDOM('div', {'id': 'target'},
document.createTextNode('This text should be green'))))));
var target = sandbox.querySelector("#inner").shadowRoot.querySelector("#target");
shouldBeEqualToString("getComputedStyle(target).color", "rgb(0, 128, 0)");
</script>
CONSOLE WARNING: line 1: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
CONSOLE WARNING: line 87: Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.
Test for ::content with /deep/ and :host.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is "rgb(0, 128, 0)"
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is "rgb(0, 128, 0)"
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is "rgb(0, 128, 0)"
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is not "rgb(255, 0, 0)"
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is "rgb(0, 128, 0)"
PASS successfullyParsed is true
TEST COMPLETE
<!doctype html>
<html>
<head>
<script src="resources/shadow-dom.js"></script>
<script src="../../../resources/js-test.js"></script>
</head>
<body class="bodyClass">
<div id="sandbox"></div>
<pre id="console"></pre>
</body>
<script>
description("Test for ::content with /deep/ and :host.");
var sandbox = document.getElementById('sandbox');
function cleanUp()
{
sandbox.innerHTML = '';
}
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
':host(#host1) /deep/ #content1::content > .content { color: green; }')),
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfContent1'},
createDOM('content', {'id': 'content1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"');
cleanUp();
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
'#host2 /deep/ #content2::content > #parentOfContent1 > #content1::content > .content { color: green; }')),
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfContent1'},
createDOM('content', {'id': 'content1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"');
cleanUp();
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
':host /deep/ #content2::content > #parentOfShadow1 > #shadow1::content > .content { color: green; }' +
':host /deep/ #content2::content > #shadow1::content > #content1::content > .content { color: red; }')),
createDOM('content', {'id': 'content1'})),
createShadowRoot(
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfShadow1'},
createDOM('shadow', {'id': 'shadow1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"');
cleanUp();
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
':host /deep/ :host > #content2::content > #shadow1::content > #content1::content > .content { color: red; }')),
createDOM('content', {'id': 'content1'})),
createShadowRoot(
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfShadow1'},
createDOM('shadow', {'id': 'shadow1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldNotBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(255, 0, 0)"');
cleanUp();
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
':host /deep/ #content2::content > #parentOfContent1 > #content1::content > .content { color: green; }')),
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfContent1'},
createDOM('content', {'id': 'content1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"');
cleanUp();
</script>
</html>
CONSOLE WARNING: line 1: ::shadow pseudo-element is deprecated and will be removed in M60, around August 2017. See https://www.chromestatus.com/features/6750456638341120 for more details.
CONSOLE WARNING: line 87: Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.
Test for ::content with ::shadow and :host.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is "rgb(0, 128, 0)"
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is "rgb(0, 128, 0)"
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is not "rgb(255, 0, 0)"
PASS window.getComputedStyle(document.querySelector("#host1 > .content")).color is not "rgb(255, 0, 0)"
PASS successfullyParsed is true
TEST COMPLETE
<!doctype html>
<html>
<head>
<script src="resources/shadow-dom.js"></script>
<script src="../../../resources/js-test.js"></script>
</head>
<body class="bodyClass">
<div id="sandbox"></div>
<pre id="console"></pre>
</body>
<script>
description("Test for ::content with ::shadow and :host.");
var sandbox = document.getElementById('sandbox');
function cleanUp()
{
sandbox.innerHTML = '';
}
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
':host(#host1)::shadow #content1::content > .content { color: green; }')),
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfContent1'},
createDOM('content', {'id': 'content1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"');
cleanUp();
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
'#host2::shadow #content2::content > #parentOfContent1 > #content1::content > .content { color: green; }')),
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfContent1'},
createDOM('content', {'id': 'content1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(0, 128, 0)"');
cleanUp();
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
':host::shadow #content2::content > #shadow1::content > #content1::content > .content { color: red; }')),
createDOM('content', {'id': 'content1'})),
createShadowRoot(
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfShadow1'},
createDOM('shadow', {'id': 'shadow1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldNotBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(255, 0, 0)"');
cleanUp();
sandbox.appendChild(
createDOM('div', {'id': 'host1'},
createShadowRoot(
createDOM('style', {},
document.createTextNode(
':host::shadow #content2::content > #parentOfContent1 > #content1::content > .content { color: red; }')),
createDOM('div', {},
createDOM('div', {'id': 'host2'},
createShadowRoot(
createDOM('content', {'id': 'content2'})),
createDOM('div', {'id': 'parentOfContent1'},
createDOM('content', {'id': 'content1'}))))),
createDOM('div', {'class': 'content'},
document.createTextNode('content'))));
shouldNotBe('window.getComputedStyle(document.querySelector("#host1 > .content")).color', '"rgb(255, 0, 0)"');
cleanUp();
</script>
</html>
CONSOLE WARNING: line 311: /deep/ combinator is deprecated and will be a no-op in M60, around August 2017. See https://www.chromestatus.com/features/4964279606312960 for more details.
CONSOLE WARNING: line 311: ::shadow pseudo-element is deprecated and will be removed in M60, around August 2017. See https://www.chromestatus.com/features/6750456638341120 for more details.
Should have blue background.
PASS backgroundColorOf('host/target1') is "rgb(0, 128, 0)"
PASS backgroundColorOf('host/target2') is "rgb(0, 128, 0)"
PASS backgroundColorOf('host/target3') is "rgb(0, 0, 255)"
PASS backgroundColorOf('host/target4') is "rgb(0, 0, 255)"
PASS backgroundColorOf('target5') is "rgb(0, 0, 255)"
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="resources/shadow-dom.js"></script>
<script src="../../../resources/js-test.js"></script>