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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element.html

Issue 1224673002: Implement proposed shadow tree cascade order. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Added documentation 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
« no previous file with comments | « LayoutTests/fast/dom/shadow/outer-scope-wins-expected.txt ('k') | LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element-expected.txt » ('j') | Source/core/css/resolver/MatchResult.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src="resources/shadow-dom.js"></script> 4 <script src="resources/shadow-dom.js"></script>
5 <script src="../../../resources/js-test.js"></script> 5 <script src="../../../resources/js-test.js"></script>
6 </head> 6 </head>
7 <body> 7 <body>
8 <div id='sandbox'></div> 8 <div id='sandbox'></div>
9 <pre id='console'></pre> 9 <pre id='console'></pre>
10 </body> 10 </body>
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after
81 81
82 cleanUp(); 82 cleanUp();
83 83
84 sandbox.appendChild( 84 sandbox.appendChild(
85 createDOM('div', {}, 85 createDOM('div', {},
86 createDOM('style', {}, 86 createDOM('style', {},
87 document.createTextNode('div::shadow span { border: 1px solid green; }')), 87 document.createTextNode('div::shadow span { border: 1px solid green; }')),
88 createDOM('div', {'id': 'host'}, 88 createDOM('div', {'id': 'host'},
89 createShadowRoot( 89 createShadowRoot(
90 createDOM('span', {'id': 'target'}, 90 createDOM('span', {'id': 'target'},
91 document.createTextNode('green border, because of hat.'))))) ); 91 document.createTextNode('green border, because of ::shadow.' ))))));
92 92
93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 93 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
94 94
95 cleanUp(); 95 cleanUp();
96 96
97 // Cascade order 97 // Cascade order
98 sandbox.appendChild( 98 sandbox.appendChild(
99 createDOM('div', {}, 99 createDOM('div', {},
100 createDOM('style', {}, 100 createDOM('style', {},
101 document.createTextNode('div::shadow span { border: 1px solid green; }')), 101 document.createTextNode('div::shadow span { border: 1px solid green; }')),
102 createDOM('div', {'id': 'host'}, 102 createDOM('div', {'id': 'host'},
103 createShadowRoot( 103 createShadowRoot(
104 createDOM('style', {}, 104 createDOM('style', {},
105 document.createTextNode('span { border: 1px solid red; }')), 105 document.createTextNode('span { border: 1px solid red; }')),
106 createDOM('span', {'id': 'target'}, 106 createDOM('span', {'id': 'target'},
107 document.createTextNode('green border, because of hat.'))))) ); 107 document.createTextNode('green border, because of ::shadow.' ))))));
108 108
109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 109 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
110 110
111 cleanUp(); 111 cleanUp();
112 112
113 sandbox.appendChild( 113 sandbox.appendChild(
114 createDOM('div', {}, 114 createDOM('div', {},
115 createDOM('style', {}, 115 createDOM('style', {},
116 document.createTextNode('div::shadow span { border: 1px solid green; }')), 116 document.createTextNode('div::shadow span { border: 1px solid green; }')),
117 createDOM('div', {'id': 'host'}, 117 createDOM('div', {'id': 'host'},
118 createShadowRoot( 118 createShadowRoot(
119 createDOM('style', {}, 119 createDOM('style', {},
120 document.createTextNode('span#target { border: 1px solid red ; }')), 120 document.createTextNode('span#target { border: 1px solid red ; }')),
121 createDOM('span', {'id': 'target'}, 121 createDOM('span', {'id': 'target'},
122 document.createTextNode('green border, because of hat.'))))) ); 122 document.createTextNode('green border, because of ::shadow.' ))))));
123 123
124 // Need to clarify the spec, i.e. using specificity? Currently rgb(255,0,0). 124 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
125 borderColorShouldBe('host/target', 'rgb(255, 0, 0)');
126 125
127 cleanUp(); 126 cleanUp();
128 127
129 sandbox.appendChild( 128 sandbox.appendChild(
130 createDOM('div', {}, 129 createDOM('div', {},
131 createDOM('style', {}, 130 createDOM('style', {},
132 document.createTextNode('div#sandbox > div > div::shadow span { bord er: 1px solid green; }')), 131 document.createTextNode('div#sandbox > div > div::shadow span { bord er: 1px solid green; }')),
133 createDOM('div', {'id': 'host'}, 132 createDOM('div', {'id': 'host'},
134 createShadowRoot( 133 createShadowRoot(
135 createDOM('span', {'id': 'target'}, 134 createDOM('span', {'id': 'target'},
136 document.createTextNode('green border, because of hat.'))))) ); 135 document.createTextNode('green border, because of ::shadow.' ))))));
137 136
138 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 137 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
139 138
140 cleanUp(); 139 cleanUp();
141 140
142 sandbox.appendChild( 141 sandbox.appendChild(
143 createDOM('div', {}, 142 createDOM('div', {},
144 createDOM('style', {}, 143 createDOM('style', {},
145 document.createTextNode('div::shadow span { border: 1px solid green; }')), 144 document.createTextNode('div::shadow span { border: 1px solid green; }')),
146 createDOM('div', {'id': 'host'}, 145 createDOM('div', {'id': 'host'},
147 createShadowRoot( 146 createShadowRoot(
148 createDOM('style', {}, 147 createDOM('style', {},
149 document.createTextNode('div > span { border: 1px solid red; }')), 148 document.createTextNode('div > span { border: 1px solid red; }')),
150 createDOM('div', {}, 149 createDOM('div', {},
151 createDOM('span', {'id': 'target'}, 150 createDOM('span', {'id': 'target'},
152 document.createTextNode('green border, because parent ha t wins.'))))))); 151 document.createTextNode('green border, because parent :: shadow wins.')))))));
153 152
154 borderColorShouldBe('host/target', 'rgb(0, 128, 0)'); 153 borderColorShouldBe('host/target', 'rgb(0, 128, 0)');
155 154
156 cleanUp(); 155 cleanUp();
157 156
158 sandbox.appendChild( 157 sandbox.appendChild(
159 createDOM('div', {}, 158 createDOM('div', {},
160 createDOM('style', {}, 159 createDOM('style', {},
161 document.createTextNode('div::shadow span { border: 1px solid green; }')), 160 document.createTextNode('div::shadow span { border: 1px solid green; }')),
162 createDOM('div', {'id': 'host'}, 161 createDOM('div', {'id': 'host'},
(...skipping 137 matching lines...) Expand 10 before | Expand all | Expand 10 after
300 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'}, 299 createDOM('div', {'id': 'x-zot-host', 'class': 'x-zot'},
301 createShadowRoot( 300 createShadowRoot(
302 createDOM('div', {'id': 'x-zot-target'}, 301 createDOM('div', {'id': 'x-zot-target'},
303 document.createTextNode('x-zot'))))))))); 302 document.createTextNode('x-zot')))))))));
304 303
305 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0 )'); 304 borderColorShouldNotBe('host/x-bar-host/x-zot-host/x-zot-target', 'rgb(255, 0, 0 )');
306 cleanUp(); 305 cleanUp();
307 306
308 </script> 307 </script>
309 </html> 308 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/dom/shadow/outer-scope-wins-expected.txt ('k') | LayoutTests/fast/dom/shadow/style-with-shadow-pseudo-element-expected.txt » ('j') | Source/core/css/resolver/MatchResult.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698