Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(62)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo.html

Issue 1270313002: Handle closed mode shadow for /deep/ and ::shadow selectors (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rename function as suggested for land Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo.html
diff --git a/LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo.html b/LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo.html
new file mode 100644
index 0000000000000000000000000000000000000000..b48d28b35ffe5e244992b0230383e1c033a56baa
--- /dev/null
+++ b/LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<script src="../../../resources/js-test.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<style id="style1">
+</style>
+<body></body>
+<script>
+function prepareShadowTree(hostId, mode1, mode2, div1, div2, div3) {
+ var parent = document.body;
+ parent.appendChild(
+ createDOM('div', {'id': hostId},
+ createShadowRoot({'mode': mode1},
+ createDOM('div', {'id': div1},
+ createShadowRoot({'mode': mode2},
+ createDOM('div', {'id': div2})),
+ createDOM('div', {'id': div3})))));
+}
+
+var results;
+var expected;
+var node;
+function queryResultsShouldBe(host, query, expectedArgument) {
+ results = host.querySelectorAll(query);
+ expected = expectedArgument;
+ shouldBe('results.length', '' + expected.length);
+ for (var i = 0; i < expected.length; ++i) {
+ node = results[i];
+ shouldBeEqualToString.bind(this)('node.id', expected[i]);
+ }
+}
+
+prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b');
+prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b');
+prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b');
+prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div7b');
+
+debug('(1/6) /deep/ style rule on top-level document.');
+var styleElement = document.getElementById('style1');
+styleElement.textContent = 'div /deep/ div { background-color: blue; }';
+
+backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
+
+debug('(2/6) ::shadow style rule on top-level document.');
+styleElement.innerHTML = 'div::shadow div { background-color: green; }';
+
+backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
+
+debug('(3/6) /deep/ style on shadow tree.');
+styleElement.innerHTML = '';
+var div1 = getNodeInTreeOfTrees('host_open_open/div1');
+div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
+backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)');
+div1.removeChild(div1.firstElementChild);
+
+var div3 = getNodeInTreeOfTrees('host_open_closed/div3');
+div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
+backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)');
+div3.removeChild(div3.firstElementChild);
+
+var div5 = getNodeInTreeOfTrees('host_closed_open/div5');
+div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
+backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)');
+div5.removeChild(div5.firstElementChild);
+
+var div7 = getNodeInTreeOfTrees('host_closed_closed/div7');
+div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
+backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)');
+div7.removeChild(div7.firstElementChild);
+
+debug('(4/6) ::shadow style on shadow tree.');
+div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
+backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)');
+div1.removeChild(div1.firstElementChild);
+
+div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
+backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)');
+div3.removeChild(div3.firstElementChild);
+
+div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
+backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
+div5.removeChild(div5.firstElementChild);
+
+div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
+backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
+div7.removeChild(div7.firstElementChild);
+
+debug('(5/6) /deep/ selector in querySelectorAll()');
+queryResultsShouldBe(host_open_open, 'div /deep/ div', ['div1', 'div2', 'div1b']);
+queryResultsShouldBe(host_open_closed, 'div /deep/ div', ['div3', 'div3b']);
+shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0');
+shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0');
+
+queryResultsShouldBe(div1, 'div /deep/ div', ['div2', 'div1b']);
+queryResultsShouldBe(div3, 'div /deep/ div', ['div3b']);
+queryResultsShouldBe(div5, 'div /deep/ div', ['div6', 'div5b']);
+queryResultsShouldBe(div7, 'div /deep/ div', ['div7b']);
+
+debug('(6/6) ::shadow selector in querySelectorAll()');
+queryResultsShouldBe(host_open_open, 'div::shadow div', ['div1', 'div1b']);
+queryResultsShouldBe(host_open_closed, 'div::shadow div', ['div3', 'div3b']);
+shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0');
+shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0');
+
+queryResultsShouldBe(div1, 'div::shadow div', ['div2']);
+shouldBe('div3.querySelectorAll("div::shadow div").length', '0');
+queryResultsShouldBe(div5, 'div::shadow div', ['div6']);
+shouldBe('div7.querySelectorAll("div::shadow div").length', '0');
+</script>
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698