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

Side by Side Diff: third_party/WebKit/LayoutTests/resize-observer/svg.html

Issue 2242773003: Revert of ResizeObserver pt6: integration (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 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
OLDNEW
(Empty)
1 <!doctype html>
2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script>
4 <script src="./resources/resizeTestHelper.js"></script>
5 <p>ResizeObserver svg tests</p>
6 <svg height="430" width="500">
7 <circle cx="10" cy="10" r="5" style="fill:orange;stroke:black;stroke-width:1" />
8 <ellipse cx="10" cy="30" rx="5" ry="5" style="fill:orange;stroke:black;stroke- width:1"/>
9 <foreignObject cy="50" width="100" height="20">
10 <body>
11 <p>Here is a paragraph that requires word wrap</p>
12 </body>
13 </foreignObject>
14 <image xlink:href="" x="0" y="100" height="30" width="100" />
15 <line x1="0" y1="50" x2="20" y2="70" stroke="black" stroke-width="2"/>
16 <path d="M 0 100 L 100 100 L 50 150 z"
17 style="fill:orange;stroke:black;stroke-width:1" />
18 <polygon points="0,200 100,200 50,250" style="fill:orange;stroke:black;stroke- width:1" />
19 <polyline points="0,300 100,300 50,350" style="fill:orange;stroke:black;stroke -width:1"/>
20 <rect x="0" y="380" width="10" height="10" style="fill:orange; stroke:black; s troke-width:1" />
21 <text x="0" y="400" font-size="20">svg text tag</text>
22 </svg>
23 <script>
24 'use strict';
25
26 var helper = new ResizeTestHelper();
27 setup({allow_uncaught_exception: true});
28
29 function test0() {
30 let target = document.querySelector('circle');
31 helper.createTest(
32 "observe svg:circle",
33 setup => {
34 helper.observer.observe(target);
35 },
36 entries => {
37 helper.nextTestRaf();
38 }
39 );
40 helper.createTest(
41 "observe svg:circle, part 2",
42 setup => {
43 target.setAttribute('r', 10);
44 },
45 entries => {
46 assert_equals(entries.length, 1);
47 assert_equals(entries[0].contentRect.width, 20);
48 assert_equals(entries[0].contentRect.height, 20);
49 helper.observer.disconnect();
50 test1();
51 }
52 );
53 helper.nextTestRaf();
54 }
55
56 function test1() {
57 let target = document.querySelector('ellipse');
58 helper.createTest(
59 "observe svg:ellipse",
60 setup => {
61 helper.observer.observe(target);
62 },
63 entries => {
64 helper.nextTestRaf();
65 }
66 );
67 helper.createTest(
68 "observe svg:ellipse, part 2",
69 setup => {
70 target.setAttribute('rx', 10);
71 },
72 entries => {
73 assert_equals(entries.length, 1);
74 assert_equals(entries[0].contentRect.width, 20);
75 assert_equals(entries[0].contentRect.height, 10);
76 helper.observer.disconnect();
77 test2();
78 }
79 );
80 helper.nextTestRaf();
81 }
82
83 function test2() {
84 let target = document.querySelector('foreignObject');
85 helper.createTest(
86 "observe svg:foreignObject",
87 setup => {
88 helper.observer.observe(target);
89 },
90 entries => {
91 helper.nextTestRaf();
92 }
93 );
94 helper.createTest(
95 "observe svg:foreignObject, part 2",
96 setup => {
97 target.setAttribute('width', 200);
98 },
99 entries => {
100 assert_equals(entries.length, 1);
101 assert_equals(entries[0].contentRect.width, 200);
102 assert_equals(entries[0].contentRect.height, 20);
103 helper.observer.disconnect();
104 test3();
105 }
106 );
107 helper.nextTestRaf();
108 }
109
110 function test3() {
111 let target = document.querySelector('image');
112 helper.createTest(
113 "observe svg:image",
114 setup => {
115 helper.observer.observe(target);
116 },
117 entries => {
118 helper.nextTestRaf();
119 }
120 );
121 helper.createTest(
122 "observe svg:image, part 2",
123 setup => {
124 target.setAttribute('height', 40);
125 },
126 entries => {
127 assert_equals(entries.length, 1);
128 assert_equals(entries[0].contentRect.width, 100);
129 assert_equals(entries[0].contentRect.height, 40);
130 helper.observer.disconnect();
131 test4();
132 }
133 );
134 helper.nextTestRaf();
135 }
136
137 function test4() {
138 let target = document.querySelector('line');
139 helper.createTest(
140 "observe svg:line",
141 setup => {
142 helper.observer.observe(target);
143 },
144 entries => {
145 helper.nextTestRaf();
146 }
147 );
148 helper.createTest(
149 "observe svg:line, part 2",
150 setup => {
151 target.setAttribute('y2', 80);
152 },
153 entries => {
154 assert_equals(entries.length, 1);
155 assert_equals(entries[0].contentRect.width, 20);
156 assert_equals(entries[0].contentRect.height, 30);
157 helper.observer.disconnect();
158 test5();
159 }
160 );
161 helper.nextTestRaf();
162 }
163
164 function test5() {
165 let target = document.querySelector('path');
166 helper.createTest(
167 "observe svg:path",
168 setup => {
169 helper.observer.observe(target);
170 },
171 entries => {
172 helper.nextTestRaf();
173 }
174 );
175 helper.createTest(
176 "observe svg:path, part 2",
177 setup => {
178 target.setAttribute('d', "M 0 100 L 100 100 L 50 160 z");
179 },
180 entries => {
181 assert_equals(entries.length, 1);
182 assert_equals(entries[0].contentRect.width, 100);
183 assert_equals(entries[0].contentRect.height, 60);
184 helper.observer.disconnect();
185 test6();
186 }
187 );
188 helper.nextTestRaf();
189 }
190
191 function test6() {
192 let target = document.querySelector('polygon');
193 helper.createTest(
194 "observe svg:polygon",
195 setup => {
196 helper.observer.observe(target);
197 },
198 entries => {
199 helper.nextTestRaf();
200 }
201 );
202 helper.createTest(
203 "observe svg:polygon, part 2",
204 setup => {
205 target.setAttribute('points', "0,200 100,200 50,260");
206 },
207 entries => {
208 assert_equals(entries.length, 1);
209 assert_equals(entries[0].contentRect.width, 100);
210 assert_equals(entries[0].contentRect.height, 60);
211 helper.observer.disconnect();
212 test7();
213 }
214 );
215 helper.nextTestRaf();
216 }
217
218 function test7() {
219 let target = document.querySelector('polyline');
220 helper.createTest(
221 "observe svg:polyline",
222 setup => {
223 helper.observer.observe(target);
224 },
225 entries => {
226 helper.nextTestRaf();
227 }
228 );
229 helper.createTest(
230 "observe svg:polyline, part 2",
231 setup => {
232 target.setAttribute('points', "0,300 100,300 50,360");
233 },
234 entries => {
235 assert_equals(entries.length, 1);
236 assert_equals(entries[0].contentRect.width, 100);
237 assert_equals(entries[0].contentRect.height, 60);
238 helper.observer.disconnect();
239 test8();
240 }
241 );
242 helper.nextTestRaf();
243 }
244
245 function test8() {
246 let target = document.querySelector('rect');
247 helper.createTest(
248 "observe svg:rect",
249 setup => {
250 helper.observer.observe(target);
251 },
252 entries => {
253 helper.nextTestRaf();
254 }
255 );
256 helper.createTest(
257 "observe svg:rect, part 2",
258 setup => {
259 target.setAttribute('width', "20");
260 },
261 entries => {
262 assert_equals(entries.length, 1);
263 assert_equals(entries[0].contentRect.width, 20);
264 assert_equals(entries[0].contentRect.height, 10);
265 helper.observer.disconnect();
266 test9();
267 }
268 );
269 helper.nextTestRaf();
270 }
271
272 function test9() {
273 let target = document.querySelector('text');
274 helper.createTest(
275 "observe svg:text",
276 setup => {
277 helper.observer.observe(target);
278 },
279 entries => {
280 helper.nextTestRaf();
281 }
282 );
283 helper.createTest(
284 "observe svg:text, part 2",
285 setup => {
286 target.setAttribute('font-size', "25");
287 },
288 entries => {
289 assert_equals(entries.length, 1);
290 helper.observer.disconnect();
291 }
292 );
293 helper.nextTestRaf();
294 }
295 test0();
296
297 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698