OLD | NEW |
---|---|
(Empty) | |
1 <!doctype html> | |
tkent
2015/12/08 14:39:16
It's not proper way to add a test to LayoutTest/im
| |
2 <title>img relevant mutations</title> | |
3 <script src="../../../../../../resources/testharness.js"></script> | |
4 <script src="../../../../../../resources/testharnessreport.js"></script> | |
5 <div id=log></div> | |
6 | |
7 <!-- should invoke update the image data --> | |
8 | |
9 <img data-desc="src set"> | |
10 <img src="../../../../images/green-2x2.png" data-desc="src changed"> | |
11 <img src="../../../../images/green-2x2.png" data-desc="src removed"> | |
12 | |
13 <img data-desc="srcset set"> | |
14 <img srcset="../../../../images/green-2x2.png" data-desc="srcset changed"> | |
15 <img srcset="../../../../images/green-2x2.png" data-desc="srcset removed"> | |
16 | |
17 <img data-desc="sizes set"> | |
18 <img sizes="" data-desc="sizes changed"> | |
19 <img sizes="" data-desc="sizes removed"> | |
20 | |
21 <img src="../../../../images/green-2x2.png" data-desc="src set to same value"> | |
22 | |
23 <img data-desc="crossorigin absent to empty"> | |
24 <img data-desc="crossorigin absent to anonymous"> | |
25 <img data-desc="crossorigin absent to use-credentials"> | |
26 <img crossorigin data-desc="crossorigin empty to absent"> | |
27 <img crossorigin data-desc="crossorigin empty to use-credentials"> | |
28 <img crossorigin=anonymous data-desc="crossorigin anonymous to absent"> | |
29 <img crossorigin=anonymous data-desc="crossorigin anonymous to use-credentials"> | |
30 <img crossorigin=use-credentials data-desc="crossorigin use-credentials to absen t"> | |
31 <img crossorigin=use-credentials data-desc="crossorigin use-credentials to empty "> | |
32 <img crossorigin=use-credentials data-desc="crossorigin use-credentials to anony mous"> | |
33 | |
34 <img src="../../../../images/green-2x2.png" data-desc="inserted into picture"><p icture></picture> | |
35 | |
36 <picture><img src="../../../../images/green-2x2.png" data-desc="removed from pic ture"></picture> | |
37 | |
38 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, previous source inserted"></picture> | |
39 | |
40 <picture><source><img src="../../../../images/green-2x2.png" data-desc="parent i s picture, previous source removed"></picture> | |
41 | |
42 <picture><source><img src="../../../../images/green-2x2.png" data-desc="parent i s picture, previous source has srcset set"></picture> | |
43 <picture><source srcset=""><img src="../../../../images/green-2x2.png" data-desc ="parent is picture, previous source has srcset changed"></picture> | |
44 <picture><source srcset=""><img src="../../../../images/green-2x2.png" data-desc ="parent is picture, previous source has srcset removed"></picture> | |
45 | |
46 <picture><source><img src="../../../../images/green-2x2.png" data-desc="parent i s picture, previous source has sizes set"></picture> | |
47 <picture><source sizes=""><img src="../../../../images/green-2x2.png" data-desc= "parent is picture, previous source has sizes changed"></picture> | |
48 <picture><source sizes=""><img src="../../../../images/green-2x2.png" data-desc= "parent is picture, previous source has sizes removed"></picture> | |
49 | |
50 <picture><source><img src="../../../../images/green-2x2.png" data-desc="parent i s picture, previous source has media set"></picture> | |
51 <picture><source media=""><img src="../../../../images/green-2x2.png" data-desc= "parent is picture, previous source has media changed"></picture> | |
52 <picture><source media=""><img src="../../../../images/green-2x2.png" data-desc= "parent is picture, previous source has media removed"></picture> | |
53 | |
54 <picture><source><img src="../../../../images/green-2x2.png" data-desc="parent i s picture, previous source has type set"></picture> | |
55 <picture><source type=""><img src="../../../../images/green-2x2.png" data-desc=" parent is picture, previous source has type changed"></picture> | |
56 <picture><source type=""><img src="../../../../images/green-2x2.png" data-desc=" parent is picture, previous source has type removed"></picture> | |
57 | |
58 <!-- should not invoke update the image data --> | |
59 | |
60 <img srcset="../../../../images/green-2x2.png" data-desc="srcset is set to same value"> | |
61 <img srcset="../../../../images/green-2x2.png" sizes data-desc="sizes is set to same value"> | |
62 | |
63 <img src="../../../../images/green-2x2.png" data-desc="crossorigin state not cha nged: absent, removeAttribute"> | |
64 <img src="../../../../images/green-2x2.png" crossorigin data-desc="crossorigin s tate not changed: empty to anonymous"> | |
65 <img src="../../../../images/green-2x2.png" crossorigin=anonymous data-desc="cro ssorigin state not changed: anonymous to foobar"> | |
66 <img src="../../../../images/green-2x2.png" crossorigin=use-credentials data-des c="crossorigin state not changed: use-credentials to USE-CREDENTIALS"> | |
67 | |
68 <img src="../../../../images/green-2x2.png" data-desc="inserted into picture anc estor"><picture><span></span></picture> | |
69 <picture><span><img src="../../../../images/green-2x2.png" data-desc="removed fr om picture ancestor"></span></picture> | |
70 | |
71 <picture><span><img src="../../../../images/green-2x2.png" data-desc="ancestor p icture has a source inserted"></span></picture> | |
72 <picture><source><span><img src="../../../../images/green-2x2.png" data-desc="an cestor picture has a source removed"></span></picture> | |
73 | |
74 <picture><span><img src="../../../../images/green-2x2.png" data-desc="ancestor p icture; previous sibling source inserted"></span></picture> | |
75 <picture><span><source><img src="../../../../images/green-2x2.png" data-desc="an cestor picture; previous sibling source removed"></span></picture> | |
76 | |
77 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following sibling source inserted"></picture> | |
78 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following sibling source removed"><source></picture> | |
79 | |
80 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following sibling source has srcset set"><source></picture> | |
81 | |
82 <img src="../../../../images/green-2x2.png" data-desc="media on img set"> | |
83 <img src="../../../../images/green-2x2.png" data-desc="type on img set"> | |
84 <img src="../../../../images/green-2x2.png" data-desc="class on img set"> | |
85 <img src="../../../../images/green-2x2.png" data-desc="alt on img set"> | |
86 | |
87 <picture><source><img src="../../../../images/green-2x2.png" data-desc="src on p revious sibling source set"></picture> | |
88 <picture><source><img src="../../../../images/green-2x2.png" data-desc="class on previous sibling source set"></picture> | |
89 | |
90 <img src="../../../../images/green-2x2.png" data-desc="inserted/removed children of img"> | |
91 | |
92 <picture><img src="../../../../images/green-2x2.png" data-desc="picture is inser ted"></picture><span></span> | |
93 <picture><img src="../../../../images/green-2x2.png" data-desc="picture is remov ed"></picture> | |
94 | |
95 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following img inserted"></picture> | |
96 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following img removed"><img></picture> | |
97 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following img has src set"><img></picture> | |
98 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following img has srcset set"><img></picture> | |
99 <picture><img src="../../../../images/green-2x2.png" data-desc="parent is pictur e, following img has sizes set"><img></picture> | |
100 | |
101 | |
102 <script> | |
103 setup({explicit_done:true}); | |
104 | |
105 function t(desc, func, expect) { | |
106 async_test(function() { | |
107 var img = document.querySelector('[data-desc="' + desc + '"]'); | |
108 img.onload = img.onerror = this.unreached_func('update the image data was ru n'); | |
109 if (expect == 'timeout') { | |
110 setTimeout(this.step_func_done(), 1000); | |
111 } else { | |
112 img['on' + expect] = this.step_func_done(function() {}); | |
113 } | |
114 func.call(this, img); | |
115 }, desc); | |
116 } | |
117 | |
118 onload = function() { | |
119 | |
120 t('src set', function(img) { | |
121 img.src = '../../../../images/green-2x2.png'; | |
122 }, 'load'); | |
123 | |
124 t('src changed', function(img) { | |
125 img.src = '../../../../images/green-2x2.png '; | |
126 }, 'load'); | |
127 | |
128 t('src removed', function(img) { | |
129 img.removeAttribute('src'); | |
130 }, 'timeout'); | |
131 | |
132 t('srcset set', function(img) { | |
133 img.srcset = '../../../../images/green-2x2.png'; | |
134 }, 'load'); | |
135 | |
136 t('srcset changed', function(img) { | |
137 img.srcset = '../../../../images/green-2x2.png '; | |
138 }, 'load'); | |
139 | |
140 t('srcset removed', function(img) { | |
141 img.removeAttribute('srcset'); | |
142 }, 'timeout'); | |
143 | |
144 t('sizes set', function(img) { | |
145 img.sizes = ''; | |
146 }, 'timeout'); | |
147 | |
148 t('sizes changed', function(img) { | |
149 img.sizes = ' '; | |
150 }, 'timeout'); | |
151 | |
152 t('sizes removed', function(img) { | |
153 img.removeAttribute('sizes'); | |
154 }, 'timeout'); | |
155 | |
156 t('src set to same value', function(img) { | |
157 img.src = '../../../../images/green-2x2.png'; | |
158 }, 'load'); | |
159 | |
160 t('crossorigin absent to empty', function(img) { | |
161 img.crossOrigin = ''; | |
162 }, 'timeout'); | |
163 | |
164 t('crossorigin absent to anonymous', function(img) { | |
165 img.crossOrigin = 'anonymous'; | |
166 }, 'timeout'); | |
167 | |
168 t('crossorigin absent to use-credentials', function(img) { | |
169 img.crossOrigin = 'use-credentials'; | |
170 }, 'timeout'); | |
171 | |
172 t('crossorigin empty to absent', function(img) { | |
173 img.removeAttribute('crossorigin'); | |
174 }, 'timeout'); | |
175 | |
176 t('crossorigin empty to use-credentials', function(img) { | |
177 img.crossOrigin = 'use-credentials'; | |
178 }, 'timeout'); | |
179 | |
180 t('crossorigin anonymous to absent', function(img) { | |
181 img.removeAttribute('crossorigin'); | |
182 }, 'timeout'); | |
183 | |
184 t('crossorigin anonymous to use-credentials', function(img) { | |
185 img.crossOrigin = 'use-credentials'; | |
186 }, 'timeout'); | |
187 | |
188 t('crossorigin use-credentials to absent', function(img) { | |
189 img.removeAttribute('crossorigin'); | |
190 }, 'timeout'); | |
191 | |
192 t('crossorigin use-credentials to empty', function(img) { | |
193 img.crossOrigin = ''; | |
194 }, 'timeout'); | |
195 | |
196 t('crossorigin use-credentials to anonymous', function(img) { | |
197 img.crossOrigin = 'anonymous'; | |
198 }, 'timeout'); | |
199 | |
200 t('inserted into picture', function(img) { | |
201 img.nextSibling.appendChild(img); | |
202 }, 'load'); | |
203 | |
204 t('removed from picture', function(img) { | |
205 img.parentNode.removeChild(img); | |
206 }, 'load'); | |
207 | |
208 t('parent is picture, previous source inserted', function(img) { | |
209 img.parentNode.insertBefore(document.createElement('source'), img); | |
210 }, 'load'); | |
211 | |
212 t('parent is picture, previous source removed', function(img) { | |
213 img.parentNode.removeChild(img.previousSibling); | |
214 }, 'load'); | |
215 | |
216 t('parent is picture, previous source has srcset set', function(img) { | |
217 img.previousSibling.srcset = ''; | |
218 }, 'load'); | |
219 | |
220 t('parent is picture, previous source has srcset changed', function(img) { | |
221 img.previousSibling.srcset = ' '; | |
222 }, 'load'); | |
223 | |
224 t('parent is picture, previous source has srcset removed', function(img) { | |
225 img.previousSibling.removeAttribute('srcset'); | |
226 }, 'load'); | |
227 | |
228 t('parent is picture, previous source has sizes set', function(img) { | |
229 img.previousSibling.sizes = ''; | |
230 }, 'load'); | |
231 | |
232 t('parent is picture, previous source has sizes changed', function(img) { | |
233 img.previousSibling.sizes = ' '; | |
234 }, 'load'); | |
235 | |
236 t('parent is picture, previous source has sizes removed', function(img) { | |
237 img.previousSibling.removeAttribute('sizes'); | |
238 }, 'load'); | |
239 | |
240 t('parent is picture, previous source has media set', function(img) { | |
241 img.previousSibling.media = ''; | |
242 }, 'load'); | |
243 | |
244 t('parent is picture, previous source has media changed', function(img) { | |
245 img.previousSibling.media = ' '; | |
246 }, 'load'); | |
247 | |
248 t('parent is picture, previous source has media removed', function(img) { | |
249 img.previousSibling.removeAttribute('media'); | |
250 }, 'load'); | |
251 | |
252 t('parent is picture, previous source has type set', function(img) { | |
253 img.previousSibling.type = ''; | |
254 }, 'load'); | |
255 | |
256 t('parent is picture, previous source has type changed', function(img) { | |
257 img.previousSibling.type = ' '; | |
258 }, 'load'); | |
259 | |
260 t('parent is picture, previous source has type removed', function(img) { | |
261 img.previousSibling.removeAttribute('type'); | |
262 }, 'load'); | |
263 | |
264 t('srcset is set to same value', function(img) { | |
265 img.srcset = "../../../../images/green-2x2.png"; | |
266 }, 'timeout'); | |
267 | |
268 t('sizes is set to same value', function(img) { | |
269 img.sizes = ''; | |
270 }, 'timeout'); | |
271 | |
272 t('crossorigin state not changed: absent, removeAttribute', function(img) { | |
273 img.removeAttribute('crossorigin'); | |
274 }, 'timeout'); | |
275 | |
276 t('crossorigin state not changed: empty to anonymous', function(img) { | |
277 img.crossOrigin = 'anonymous'; | |
278 }, 'timeout'); | |
279 | |
280 t('crossorigin state not changed: anonymous to foobar', function(img) { | |
281 img.crossOrigin = 'foobar'; | |
282 }, 'timeout'); | |
283 | |
284 t('crossorigin state not changed: use-credentials to USE-CREDENTIALS', functio n(img) { | |
285 img.crossOrigin = 'USE-CREDENTIALS'; | |
286 }, 'timeout'); | |
287 | |
288 t('inserted into picture ancestor', function(img) { | |
289 img.nextSibling.firstChild.appendChild(img); | |
290 }, 'timeout'); | |
291 | |
292 t('removed from picture ancestor', function(img) { | |
293 img.parentNode.removeChild(img); | |
294 }, 'timeout'); | |
295 | |
296 t('ancestor picture has a source inserted', function(img) { | |
297 img.parentNode.parentNode.insertBefore(document.createElement('source'), img .parentNode); | |
298 }, 'timeout'); | |
299 | |
300 t('ancestor picture has a source removed', function(img) { | |
301 img.parentNode.parentNode.removeChild(img.parentNode.previousSibling); | |
302 }, 'timeout'); | |
303 | |
304 t('ancestor picture; previous sibling source inserted', function(img) { | |
305 img.parentNode.insertBefore(document.createElement('source'), img); | |
306 }, 'timeout'); | |
307 | |
308 t('ancestor picture; previous sibling source removed', function(img) { | |
309 img.parentNode.removeChild(img.previousSibling); | |
310 }, 'timeout'); | |
311 | |
312 t('parent is picture, following sibling source inserted', function(img) { | |
313 img.parentNode.appendChild(document.createElement('source')); | |
314 }, 'timeout'); | |
315 | |
316 t('parent is picture, following sibling source removed', function(img) { | |
317 img.parentNode.removeChild(img.nextSibling); | |
318 }, 'timeout'); | |
319 | |
320 t('parent is picture, following sibling source has srcset set', function(img) { | |
321 img.nextSibling.srcset = ''; | |
322 }, 'timeout'); | |
323 | |
324 t('media on img set', function(img) { | |
325 img.setAttribute('media', ''); | |
326 }, 'timeout'); | |
327 | |
328 t('type on img set', function(img) { | |
329 img.setAttribute('type', ''); | |
330 }, 'timeout'); | |
331 | |
332 t('class on img set', function(img) { | |
333 img.className = ''; | |
334 }, 'timeout'); | |
335 | |
336 t('alt on img set', function(img) { | |
337 img.alt = ''; | |
338 }, 'timeout'); | |
339 | |
340 t('src on previous sibling source set', function(img) { | |
341 img.previousSibling.setAttribute('src', ''); | |
342 }, 'timeout'); | |
343 | |
344 t('class on previous sibling source set', function(img) { | |
345 img.previousSibling.className = ''; | |
346 }, 'timeout'); | |
347 | |
348 t('inserted/removed children of img', function(img) { | |
349 img.appendChild(document.createElement('source')); | |
350 setTimeout(this.step_func(function() { | |
351 img.removeChild(img.firstChild); | |
352 }), 0); | |
353 }, 'timeout'); | |
354 | |
355 t('picture is inserted', function(img) { | |
356 img.parentNode.nextSibling.appendChild(img.parentNode); | |
357 }, 'timeout'); | |
358 | |
359 t('picture is removed', function(img) { | |
360 img.parentNode.parentNode.removeChild(img.parentNode); | |
361 }, 'timeout'); | |
362 | |
363 t('parent is picture, following img inserted', function(img) { | |
364 img.parentNode.appendChild(document.createElement('img')); | |
365 }, 'timeout'); | |
366 | |
367 t('parent is picture, following img removed', function(img) { | |
368 img.parentNode.removeChild(img.nextSibling); | |
369 }, 'timeout'); | |
370 | |
371 t('parent is picture, following img has src set', function(img) { | |
372 img.nextSibling.src = ''; | |
373 }, 'timeout'); | |
374 | |
375 t('parent is picture, following img has srcset set', function(img) { | |
376 img.nextSibling.srcset = ''; | |
377 }, 'timeout'); | |
378 | |
379 t('parent is picture, following img has sizes set', function(img) { | |
380 img.nextSibling.sizes = ''; | |
381 }, 'timeout'); | |
382 | |
383 done(); | |
384 }; | |
385 </script> | |
OLD | NEW |