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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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 unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo-expected.txt » ('j') | Source/core/css/SelectorChecker.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
hayato 2015/08/19 05:45:24 Could you add a test for a selector which has two
kochi 2015/08/19 07:33:54 A test for two /deep/s would make sense, and will
kochi 2015/08/19 07:52:44 two combinators layout test is added to this CL.
2 <script src="../../../resources/js-test.js"></script>
3 <script src="resources/shadow-dom.js"></script>
4 <style id="style1">
5 </style>
6 <body></body>
7 <script>
8 function prepareShadowTree(hostId, mode1, mode2, div1, div2, div3) {
9 var parent = document.body;
10 parent.appendChild(
11 createDOM('div', {'id': hostId},
12 createShadowRoot({'mode': mode1},
13 createDOM('div', {'id': div1},
14 createShadowRoot({'mode': mode2},
15 createDOM('div', {'id': div2}),
16 createDOM('content')),
hayato 2015/08/19 05:45:24 It looks div3 has more than one responsibilities i
kochi 2015/08/19 07:33:54 The <content> was an artifact while I was trying t
17 createDOM('div', {'id': div3})))));
18 }
19
20 prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b');
21 prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b') ;
22 prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b') ;
23 prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div 7b');
24
25 debug('(1/6) /deep/ style rule on top-level document.');
26 var styleElement = document.getElementById('style1');
27 styleElement.textContent = 'div /deep/ div { background-color: blue; }';
28 styleElement.offsetTop; // trigger style recalc
hayato 2015/08/19 05:45:24 Do we need this? Doesn't getComputedStyle() trigge
kochi 2015/08/19 07:33:54 Done (removed all *.offsetTop in this file).
29
30 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 0, 255)');
hayato 2015/08/19 05:45:24 Could you add tests for top-level shadow hosts? e
kochi 2015/08/19 07:33:54 Done. The expected color is rgba(0, 0, 0, 0), as
31 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
32 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)');
33 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 0, 255)');
34 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
35 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)');
36 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
37 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
38 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
39 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
40 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
41 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
42
43 debug('(2/6) ::shadow style rule on top-level document.');
44 styleElement.innerHTML = 'div::shadow div { background-color: green; }';
45 styleElement.offsetTop; // trigger style recalc
46
47 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 128, 0)');
48 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
49 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 128, 0)');
50 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 128, 0)');
51 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
52 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 128, 0)');
53 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
54 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
55 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
56 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
57 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
58 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
59
60 debug('(3/6) /deep/ style on shadow tree.');
61 styleElement.innerHTML = '';
62 var div1 = getNodeInTreeOfTrees('host_open_open/div1');
63 div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
64 var div3 = getNodeInTreeOfTrees('host_open_closed/div3');
65 div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
66 var div5 = getNodeInTreeOfTrees('host_closed_open/div5');
67 div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
68 var div7 = getNodeInTreeOfTrees('host_closed_closed/div7');
69 div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
70 styleElement.offsetTop; // trigger style recalc
71
72 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
hayato 2015/08/19 05:45:24 Instead of adding style elements altogether, could
kochi 2015/08/19 07:33:54 Done.
73 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
74 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)');
75 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
76 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
77 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)');
78 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
79 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 0, 255)');
80 backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)');
81 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
82 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
83 backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)');
84
85 debug('(4/6) ::shadow style on shadow tree.');
86 div1.removeChild(div1.firstElementChild);
87 div3.removeChild(div3.firstElementChild);
88 div5.removeChild(div5.firstElementChild);
89 div7.removeChild(div7.firstElementChild);
90 div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
91 div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
92 div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
93 div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
94
95 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
96 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 128, 0)');
97 backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)');
98 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
99 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
100 backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)');
101 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
102 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 128, 0)');
103 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
104 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
105 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
106 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
107
108 debug('(5/6) /deep/ selector in querySelectorAll()');
109 shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '3');
110 shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '2');
111 shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0');
112 shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0');
113
114 shouldBe('div1.querySelectorAll("div /deep/ div").length', '2');
115 shouldBe('div3.querySelectorAll("div /deep/ div").length', '1');
116 shouldBe('div5.querySelectorAll("div /deep/ div").length', '2');
117 shouldBe('div7.querySelectorAll("div /deep/ div").length', '1');
118
119 debug('(6/6) ::shadow selector in querySelectorAll()');
120 shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '2');
121 shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '2');
122 shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0');
123 shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0');
124
125 shouldBe('div1.querySelectorAll("div::shadow div").length', '1');
126 shouldBe('div3.querySelectorAll("div::shadow div").length', '0');
127 shouldBe('div5.querySelectorAll("div::shadow div").length', '1');
128 shouldBe('div7.querySelectorAll("div::shadow div").length', '0');
129 </script>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo-expected.txt » ('j') | Source/core/css/SelectorChecker.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698