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

Side by Side Diff: LayoutTests/fast/dom/shadow/querySelector-with-shadow-all-and-shadow-deep.html

Issue 210713002: Implement ::shadow pseudo element and replace /shadow/ with ::shadow. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fixed patch conflict Created 6 years, 9 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
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 </body> 8 </body>
9 <script> 9 <script>
10 document.body.appendChild( 10 document.body.appendChild(
11 createDOM('div', {'id': 'foo-host'}, 11 createDOM('div', {'id': 'foo-host'},
12 createShadowRoot( 12 createShadowRoot(
13 createDOM('div', {}, 13 createDOM('div', {},
14 createDOM('span', {'id': 'not-top'})), 14 createDOM('span', {'id': 'not-top'})),
15 createDOM('span', {'id': 'top'}), 15 createDOM('span', {'id': 'top'}),
16 createDOM('div', {'id': 'bar-host'}, 16 createDOM('div', {'id': 'bar-host'},
17 createShadowRoot( 17 createShadowRoot(
18 createDOM('span', {'id': 'nested'})), 18 createDOM('span', {'id': 'nested'})),
19 createDOM('span', {'id': 'inner-host'}))), 19 createDOM('span', {'id': 'inner-host'}))),
20 createDOM('span', {'id': 'outer-host'}))); 20 createDOM('span', {'id': 'outer-host'})));
21 21
22 document.body.appendChild( 22 document.body.appendChild(
23 createDOM('pre', {'id': 'console'})); 23 createDOM('pre', {'id': 'console'}));
24 24
25 description('crbug.com/337616: test for querySelectorAll with /shadow/ and /deep /'); 25 description('crbug.com/337616: test for querySelectorAll with ::shadow and /deep /');
26 26
27 shouldBe('document.querySelectorAll("#foo-host /shadow/ span").length', '3'); 27 shouldBe('document.querySelectorAll("#foo-host::shadow span").length', '3');
28 shouldBe('document.querySelectorAll("#foo-host /shadow/ span")[0].id', '"not-top "'); 28 shouldBe('document.querySelectorAll("#foo-host::shadow span")[0].id', '"not-top" ');
29 shouldBe('document.querySelectorAll("#foo-host /shadow/ span")[1].id', '"top"'); 29 shouldBe('document.querySelectorAll("#foo-host::shadow span")[1].id', '"top"');
30 shouldBe('document.querySelectorAll("#foo-host /shadow/ span")[2].id', '"inner-h ost"'); 30 shouldBe('document.querySelectorAll("#foo-host::shadow span")[2].id', '"inner-ho st"');
31 31
32 shouldBe('document.querySelectorAll("#foo-host /deep/ span").length', '5'); 32 shouldBe('document.querySelectorAll("#foo-host /deep/ span").length', '5');
33 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[0].id', '"not-top"' ); 33 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[0].id', '"not-top"' );
34 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[1].id', '"top"'); 34 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[1].id', '"top"');
35 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[2].id', '"nested"') ; 35 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[2].id', '"nested"') ;
36 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[3].id', '"inner-hos t"'); 36 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[3].id', '"inner-hos t"');
37 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[4].id', '"outer-hos t"'); 37 shouldBe('document.querySelectorAll("#foo-host /deep/ span")[4].id', '"outer-hos t"');
38 38
39 // FIXME: after making "*" in shadow tree not to match shadow host, rebaseline. 39 // FIXME: after making "*" in shadow tree not to match shadow host, rebaseline.
40 var fooShadowRoot = getNodeInTreeOfTrees('foo-host/'); 40 var fooShadowRoot = getNodeInTreeOfTrees('foo-host/');
41 shouldBe('fooShadowRoot.querySelectorAll("* /shadow/ span").length', '1'); 41 shouldBe('fooShadowRoot.querySelectorAll("*::shadow span").length', '1');
42 shouldBe('fooShadowRoot.querySelectorAll("* /shadow/ span")[0].id', '"nested"'); 42 shouldBe('fooShadowRoot.querySelectorAll("*::shadow span")[0].id', '"nested"');
43 43
44 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span").length', '3'); 44 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span").length', '3');
45 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[0].id', '"not-top"'); 45 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[0].id', '"not-top"');
46 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[1].id', '"nested"'); 46 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[1].id', '"nested"');
47 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[2].id', '"inner-host"' ); 47 shouldBe('fooShadowRoot.querySelectorAll("* /deep/ span")[2].id', '"inner-host"' );
48 48
49 // #foo-host in foo's shadow tree cannot match div#foo-host. 49 // #foo-host in foo's shadow tree cannot match div#foo-host.
50 shouldBe('fooShadowRoot.querySelectorAll("#foo-host /deep/ span").length', '0'); 50 shouldBe('fooShadowRoot.querySelectorAll("#foo-host /deep/ span").length', '0');
51 51
52 // :host in foo's shadow tree can match div#foo-host. 52 // :host in foo's shadow tree can match div#foo-host.
53 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span").le ngth', '3'); 53 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span").len gth', '3');
54 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[0] .id', '"not-top"'); 54 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[0]. id', '"not-top"');
55 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[1] .id', '"top"'); 55 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[1]. id', '"top"');
56 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host) /shadow/ span")[2] .id', '"inner-host"'); 56 shouldBe('fooShadowRoot.querySelectorAll(":host(div#foo-host)::shadow span")[2]. id', '"inner-host"');
57 57
58 // :host-context in foo's shadow tree can match div#foo-host. 58 // :host-context in foo's shadow tree can match div#foo-host.
59 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span").le ngth', '3'); 59 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span").len gth', '3');
60 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span")[0] .id', '"not-top"'); 60 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[0]. id', '"not-top"');
61 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span")[1] .id', '"top"'); 61 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[1]. id', '"top"');
62 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body) /shadow/ span")[2] .id', '"inner-host"'); 62 shouldBe('fooShadowRoot.querySelectorAll(":host-context(body)::shadow span")[2]. id', '"inner-host"');
63 63
64 var barHost = fooShadowRoot.getElementById('bar-host'); 64 var barHost = fooShadowRoot.getElementById('bar-host');
65 shouldBe('barHost.querySelectorAll("#bar-host /shadow/ span").length', '1'); 65 shouldBe('barHost.querySelectorAll("#bar-host::shadow span").length', '1');
66 shouldBe('barHost.querySelectorAll("#bar-host /shadow/ span")[0].id', '"nested"' ); 66 shouldBe('barHost.querySelectorAll("#bar-host::shadow span")[0].id', '"nested"') ;
67 shouldBe('barHost.querySelectorAll(":host :scope span").length', '1'); 67 shouldBe('barHost.querySelectorAll(":host :scope span").length', '1');
68 shouldBe('barHost.querySelectorAll(":host :scope span")[0].id', '"inner-host"'); 68 shouldBe('barHost.querySelectorAll(":host :scope span")[0].id', '"inner-host"');
69 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span").length', '1'); 69 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span").length', '1');
70 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span")[0].id', '"inne r-host"'); 70 shouldBe('barHost.querySelectorAll(":host /deep/ #bar-host span")[0].id', '"inne r-host"');
71 71
72 var barShadowRoot = getNodeInTreeOfTrees('foo-host/bar-host/'); 72 var barShadowRoot = getNodeInTreeOfTrees('foo-host/bar-host/');
73 shouldBe('barShadowRoot.querySelectorAll("* /shadow/ span").length', '0'); 73 shouldBe('barShadowRoot.querySelectorAll("*::shadow span").length', '0');
74 shouldBe('barShadowRoot.querySelectorAll("* /deep/ span").length', '0'); 74 shouldBe('barShadowRoot.querySelectorAll("* /deep/ span").length', '0');
75 75
76 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /shadow/ span").le ngth', '1'); 76 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host)::shadow span").len gth', '1');
77 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /shadow/ span")[0] .id', '"nested"'); 77 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host)::shadow span")[0]. id', '"nested"');
78 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span").leng th', '1'); 78 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span").leng th', '1');
79 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span")[0].i d', '"nested"'); 79 shouldBe('barShadowRoot.querySelectorAll(":host(div#bar-host) /deep/ span")[0].i d', '"nested"');
80 80
81 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /shadow/ s pan").length', '1'); 81 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host)::shadow sp an").length', '1');
82 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /shadow/ s pan")[0].id', '"nested"'); 82 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host)::shadow sp an")[0].id', '"nested"');
83 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ spa n").length', '1'); 83 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ spa n").length', '1');
84 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ spa n")[0].id', '"nested"'); 84 shouldBe('barShadowRoot.querySelectorAll(":host-context(div#foo-host) /deep/ spa n")[0].id', '"nested"');
85 </script> 85 </script>
86 </html> 86 </html>
87 87
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698