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

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: . 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..14263aa5f3e1c6e1e88cb64cca1fce5c7f4601fb
--- /dev/null
+++ b/LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo.html
@@ -0,0 +1,160 @@
+<!doctype html>
+<script src="../../../resources/js-test.js"></script>
+<script src="resources/shadow-dom.js"></script>
+<script>
+function transformShadowRoot(root) {
+ while (true) {
+ var shadow = root.querySelector('shadow-root');
+ if (!shadow)
+ break;
+ var host = shadow.parentElement;
+ var mode = shadow.getAttribute('mode') || 'open';
+ var content = shadow.children;
+
+ host.removeChild(shadow);
+ var shadowRoot = host.createShadowRoot({'mode': mode});
+ for (var i = 0; i < content.length; ++i)
+ shadowRoot.appendChild(content[i]);
+ transformShadowRoot(shadowRoot);
+ }
+}
+</script>
+<style id="style1">
+</style>
+<body>
+ <div id="host_open_open">
+ <shadow-root mode="open">
+ <div id="div1">
hayato 2015/08/06 02:26:52 Each tree should have more than one nested div ele
kochi 2015/08/19 04:30:27 Done.
+ <shadow-root mode="open">
+ <div id="div2">div2</div>
+ </shadow-root>
+ </div>
+ </shadow-root>
+ <span>content of open/open host</span>
+ </div>
+
+ <div id="host_open_closed">
+ <shadow-root mode="open">
+ <div id="div3">
+ <shadow-root mode="closed">
+ <div id="div4">div4</div>
+ </shadow-root>
+ </div>
+ </shadow-root>
+ <span>content of open/closed host</span>
+ </div>
+
+ <div id="host_closed_open">
+ <shadow-root mode="closed">
+ <div id="div5">
+ <shadow-root mode="open">
+ <div id="div6">div6</div>
+ </shadow-root>
+ </div>
+ </shadow-root>
+ <span>content of closed/open host</span>
+ </div>
+
+ <div id="host_closed_closed">
+ <shadow-root mode="closed">
+ <div id="div7">
+ <shadow-root mode="closed">
+ <div id="div8">div8</div>
+ </shadow-root>
+ </div>
+ </shadow-root>
+ <span>content of closed/closed host</span>
+ </div>
+</body>
+<script>
+transformShadowRoot(document.body);
+
+debug('(1/6) /deep/ style rule on top-level document.');
+var styleElement = document.getElementById('style1');
+styleElement.innerHTML = 'div /deep/ div { background-color: blue; }';
+styleElement.offsetTop; // trigger style recalc
+
+backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_closed/div3/div4', '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_closed/div7', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
+
+debug('(2/6) ::shadow style rule on top-level document.');
+styleElement.innerHTML = 'div::shadow div { background-color: green; }';
+styleElement.offsetTop; // trigger style recalc
+
+backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_open_open/div1/div2', '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_closed_open/div5', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5/div6', '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)');
+
+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>');
+var div3 = getNodeInTreeOfTrees('host_open_closed/div3');
+div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
+var div5 = getNodeInTreeOfTrees('host_closed_open/div5');
+div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
+var div7 = getNodeInTreeOfTrees('host_closed_closed/div7');
+div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
+styleElement.offsetTop; // trigger style recalc
+
+backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 0, 255)');
+backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
+
+debug('(4/6) ::shadow style on shadow tree.');
+div1.removeChild(div1.firstElementChild);
+div3.removeChild(div3.firstElementChild);
+div5.removeChild(div5.firstElementChild);
+div7.removeChild(div7.firstElementChild);
+div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
+div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
+div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color: green; }</style>');
+div7.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_closed/div3', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 128, 0)');
+backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
+backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
+
+debug('(5/6) /deep/ selector in querySelectorAll()');
+shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '2');
+shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '1');
+shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0');
+shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0');
+
+shouldBe('div1.querySelectorAll("div /deep/ div").length', '1');
+shouldBe('div3.querySelectorAll("div /deep/ div").length', '0');
+shouldBe('div5.querySelectorAll("div /deep/ div").length', '1');
+shouldBe('div7.querySelectorAll("div /deep/ div").length', '0');
+
+debug('(6/6) ::shadow selector in querySelectorAll()');
+shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '1');
+shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '1');
+shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0');
+shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0');
+
+shouldBe('div1.querySelectorAll("div::shadow div").length', '1');
+shouldBe('div3.querySelectorAll("div::shadow div").length', '0');
+shouldBe('div5.querySelectorAll("div::shadow div").length', '1');
+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