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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/shadow-dom/offsetParent.html

Issue 2051703002: Implement closed shadow adjustment for Element.offsetParent (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 6 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 | « no previous file | third_party/WebKit/Source/core/dom/Element.cpp » ('j') | third_party/WebKit/Source/core/dom/Node.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script src='../resources/testharness.js'></script>
3 <script src='../resources/testharnessreport.js'></script>
4 <script src='resources/shadow-dom.js'></script>
5 <style>
6 .container { position: relative; }
7 </style>
8
9 <!--
10 When the context object is in a closed shadow tree, it can return the real
11 offset parent above the shadow tree, as it is unclosed.
12 -->
13 <div id='host_open0'>
14 <template data-mode='open' data-expose-as='root_open0'>
15 <style>.container { position: relative; }</style>
16 <div id='container' class='container'>
17 <div id='inner_node'>X</div>
18 </div>
19 </template>
20 </div>
21
22 <script>
23 convertTemplatesToShadowRootsWithin(host_open0);
24
25 test(() => {
26 let container = root_open0.querySelector('#container');
27 let inner_node = root_open0.querySelector('#inner_node');
28 assert_equals(inner_node.offsetParent, container);
29 }, 'offsetParent should return node in the same node tree in open shadow root.') ;
30 </script>
31
32 <!--
33 When the real offsetParent is in a closed shadow tree, if it is unclosed to the
34 context object, that parent should be returned.
35 -->
36 <div id='host_closed0'>
37 <template data-mode='closed' data-expose-as='root_closed0'>
38 <style>.container { position: relative; }</style>
39 <div id='container' class='container'>
40 <div id='inner_node'>X</div>
41 </div>
42 </template>
43 </div>
44
45 <script>
46 convertTemplatesToShadowRootsWithin(host_closed0);
47
48 test(() => {
49 let container = root_closed0.querySelector('#container');
50 let inner_node = root_closed0.querySelector('#inner_node');
51 assert_equals(inner_node.offsetParent, container);
52 }, 'offsetParent should return node in the same node tree in closed shadow root. ');
53 </script>
54
55 <!--
56 When the real offsetParent is in a closed shadow tree, if it is unclosed to the
57 context object, that parent should be returned.
58 -->
59 <div id='host_closed1'>
60 <template data-mode='closed' data-expose-as='root_closed1'>
61 <style>.container { position: relative; }</style>
62 <div id='inner_host' class='container'>
63 <template data-mode='open' data-expose-as='root_open_inner1'>
64 <div id='inner_node'>X</div>
65 </template>
66 </div>
67 </template>
68 </div>
69
70 <script>
71 convertTemplatesToShadowRootsWithin(host_closed1);
72
73 test(() => {
74 let inner_host = root_closed1.querySelector('#inner_host');
75 let inner_node = root_open_inner1.querySelector('#inner_node');
76 assert_equals(inner_node.offsetParent, inner_host);
77 }, 'offsetParent should return an unclosed node in a closed shadow from open sha dow.');
78 </script>
79
80 <!--
81 When the context object is in a closed shadow tree, it can return the real
82 offset parent above the shadow tree, as it is unclosed.
83 -->
84 <div id='host_open1'>
85 <template data-mode='open' data-expose-as='root_open1'>
86 <style>.container { position: relative; }</style>
87 <div id='inner_host' class='container'>
88 <template data-mode='closed' data-expose-as='root_closed_inner1'>
89 <div id='inner_node'>X</div>
90 </template>
91 </div>
92 </template>
93 </div>
94
95 <script>
96 convertTemplatesToShadowRootsWithin(host_open1);
97
98 test(() => {
99 let inner_host = root_open1.querySelector('#inner_host');
100 let inner_node = root_closed_inner1.querySelector('#inner_node');
101 assert_equals(inner_node.offsetParent, inner_host);
102 }, 'offsetParent should return an unclosed node in a open shadow from closed sha dow.');
103 </script>
104
105 <!--
106 #host_open and #host_closed have the same structure, and #target_open /
107 #target_closed are slotted into each shadow slot, then real offsetParent would
108 be in the shadow. For the closed shadow, such element should not leak to the
109 light DOM, so it is adjusted to the nearest unclosed offsetParent.
110
111 See also
112 https://github.com/w3c/webcomponents/issues/497
113 https://github.com/w3c/csswg-drafts/issues/159
114 -->
115 <div id='host_open2' class='container'>
116 <template data-mode='open' data-expose-as='root_open2'>
117 <style>.container { position: relative; }</style>
118 <div id='container_open' class='container'>
119 <slot name='x'></slot>
120 </div>
121 </template>
122 <span id='target_open' slot='x'>X</span>
123 </div>
124
125 <div id='host_closed2' class='container'>
126 <template data-mode='closed' data-expose-as='root_closed2'>
127 <style>.container { position: relative; }</style>
128 <div id='container_closed' class='container'>
129 <slot name='x'></slot>
130 </div>
131 </template>
132 <span id='target_closed' slot='x'>Y</span>
133 </div>
134
135 <script>
136 convertTemplatesToShadowRootsWithin(host_open2);
137 convertTemplatesToShadowRootsWithin(host_closed2);
138
139 test(() => {
140 assert_equals(target_open.offsetParent.id, 'container_open');
141 assert_equals(target_closed.offsetParent.id, 'host_closed2');
142 }, 'offsetParent should return an unclosed node.');
143 </script>
144
145 <!--
146 Check if offsetParent can properly traverse up to find unclosed node.
147 In the following example, #target_closed3 will distributed to slot y,
148 but its offsetParent should neither return #inner_node nor #inner_host.
149 -->
150
151 <div id='host_closed3' class='container'>
152 <template data-mode='closed' data-expose-as='root_closed3'>
153 <style>.container { position: relative; }</style>
154 <div id='inner_host' class='container'>
155 <template data-mode='closed' data-expose-as='root_closed_inner3'>
156 <style>.container { position: relative; }</style>
157 <div id='inner_node' class='container'>
158 <slot name='y'></slot>
159 </div>
160 </template>
161 <slot name='x' slot='y'></slot>
162 </div>
163 </template>
164 <span id='target_closed3' slot='x'>Z</span>
165 </div>
166
167 <script>
168 convertTemplatesToShadowRootsWithin(host_closed3);
169
170 test(() => {
171 let slot_y = root_closed_inner3.querySelector('slot[name=y]');
172 assert_array_equals(slot_y.assignedNodes({flatten: true}), [target_closed3]);
173 assert_equals(target_closed3.offsetParent.id, 'host_closed3');
174 }, 'offsetParent should skip any non-unclosed nodes.');
175 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/dom/Element.cpp » ('j') | third_party/WebKit/Source/core/dom/Node.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698