Update WPT tests for embedded content
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / html / semantics / embedded-content / the-img-element / relevant-mutations.html
1 <!doctype html>
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 absent">
31 <img crossorigin=use-credentials data-desc="crossorigin use-credentials to empty">
32 <img crossorigin=use-credentials data-desc="crossorigin use-credentials to anonymous">
33
34 <img src="/images/green-2x2.png" data-desc="inserted into picture"><picture></picture>
35
36 <picture><img src="/images/green-2x2.png" data-desc="removed from picture"></picture>
37
38 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, previous source inserted"></picture>
39
40 <picture><source><img src="/images/green-2x2.png" data-desc="parent is picture, previous source removed"></picture>
41
42 <picture><source><img src="/images/green-2x2.png" data-desc="parent is 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 is 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 is 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 is 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 changed: absent, removeAttribute">
64 <img src="/images/green-2x2.png" crossorigin data-desc="crossorigin state not changed: empty to anonymous">
65 <img src="/images/green-2x2.png" crossorigin=anonymous data-desc="crossorigin state not changed: anonymous to foobar">
66 <img src="/images/green-2x2.png" crossorigin=use-credentials data-desc="crossorigin state not changed: use-credentials to USE-CREDENTIALS">
67
68 <img src="/images/green-2x2.png" data-desc="inserted into picture ancestor"><picture><span></span></picture>
69 <picture><span><img src="/images/green-2x2.png" data-desc="removed from picture ancestor"></span></picture>
70
71 <picture><span><img src="/images/green-2x2.png" data-desc="ancestor picture has a source inserted"></span></picture>
72 <picture><source><span><img src="/images/green-2x2.png" data-desc="ancestor picture has a source removed"></span></picture>
73
74 <picture><span><img src="/images/green-2x2.png" data-desc="ancestor picture; previous sibling source inserted"></span></picture>
75 <picture><span><source><img src="/images/green-2x2.png" data-desc="ancestor picture; previous sibling source removed"></span></picture>
76
77 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, following sibling source inserted"></picture>
78 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, following sibling source removed"><source></picture>
79
80 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, 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 previous 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 inserted; img has src"></picture><span></span>
93 <picture><img srcset="/images/green-2x2.png" data-desc="picture is inserted; img has srcset"></picture><span></span>
94 <picture><source srcset="/images/green-2x2.png"><img src="/images/green-2x2.png" data-desc="picture is inserted; img has previous sibling source"></picture><span></span>
95 <picture><img src="/images/green-2x2.png" data-desc="picture is inserted; img has following sibling source"><source srcset="/images/green-2x2.png"></picture><span></span>
96
97 <picture><img src="/images/green-2x2.png" data-desc="picture is removed; img has src"></picture>
98 <picture><img srcset="/images/green-2x2.png" data-desc="picture is removed; img has srcset"></picture>
99 <picture><source srcset="/images/green-2x2.png"><img src="/images/green-2x2.png" data-desc="picture is removed; img has previous sibling source"></picture>
100 <picture><img src="/images/green-2x2.png" data-desc="picture is removed; img has following sibling source"><source srcset="/images/green-2x2.png"></picture>
101
102 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img inserted"></picture>
103 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img removed"><img></picture>
104 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img has src set"><img></picture>
105 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img has srcset set"><img></picture>
106 <picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img has sizes set"><img></picture>
107
108
109 <script>
110 setup({explicit_done:true});
111
112 function t(desc, func, expect) {
113   async_test(function() {
114     var img = document.querySelector('[data-desc="' + desc + '"]');
115     img.onload = img.onerror = this.unreached_func('update the image data was run');
116     if (expect == 'timeout') {
117       setTimeout(this.step_func_done(), 1000);
118     } else {
119       img['on' + expect] = this.step_func_done(function() {});
120     }
121     func.call(this, img);
122   }, desc);
123 }
124
125 onload = function() {
126
127   t('src set', function(img) {
128     img.src = '/images/green-2x2.png';
129   }, 'load');
130
131   t('src changed', function(img) {
132     img.src = '/images/green-2x2.png ';
133   }, 'load');
134
135   t('src removed', function(img) {
136     img.removeAttribute('src');
137   }, 'timeout');
138
139   t('srcset set', function(img) {
140     img.srcset = '/images/green-2x2.png';
141   }, 'load');
142
143   t('srcset changed', function(img) {
144     img.srcset = '/images/green-2x2.png ';
145   }, 'load');
146
147   t('srcset removed', function(img) {
148     img.removeAttribute('srcset');
149   }, 'timeout');
150
151   t('sizes set', function(img) {
152     img.sizes = '';
153   }, 'timeout');
154
155   t('sizes changed', function(img) {
156     img.sizes = ' ';
157   }, 'timeout');
158
159   t('sizes removed', function(img) {
160     img.removeAttribute('sizes');
161   }, 'timeout');
162
163   t('src set to same value', function(img) {
164     img.src = '/images/green-2x2.png';
165   }, 'load');
166
167   t('crossorigin absent to empty', function(img) {
168     img.crossOrigin = '';
169   }, 'timeout');
170
171   t('crossorigin absent to anonymous', function(img) {
172     img.crossOrigin = 'anonymous';
173   }, 'timeout');
174
175   t('crossorigin absent to use-credentials', function(img) {
176     img.crossOrigin = 'use-credentials';
177   }, 'timeout');
178
179   t('crossorigin empty to absent', function(img) {
180     img.removeAttribute('crossorigin');
181   }, 'timeout');
182
183   t('crossorigin empty to use-credentials', function(img) {
184     img.crossOrigin = 'use-credentials';
185   }, 'timeout');
186
187   t('crossorigin anonymous to absent', function(img) {
188     img.removeAttribute('crossorigin');
189   }, 'timeout');
190
191   t('crossorigin anonymous to use-credentials', function(img) {
192     img.crossOrigin = 'use-credentials';
193   }, 'timeout');
194
195   t('crossorigin use-credentials to absent', function(img) {
196     img.removeAttribute('crossorigin');
197   }, 'timeout');
198
199   t('crossorigin use-credentials to empty', function(img) {
200     img.crossOrigin = '';
201   }, 'timeout');
202
203   t('crossorigin use-credentials to anonymous', function(img) {
204     img.crossOrigin = 'anonymous';
205   }, 'timeout');
206
207   t('inserted into picture', function(img) {
208     img.nextSibling.appendChild(img);
209   }, 'load');
210
211   t('removed from picture', function(img) {
212     img.parentNode.removeChild(img);
213   }, 'load');
214
215   t('parent is picture, previous source inserted', function(img) {
216     img.parentNode.insertBefore(document.createElement('source'), img);
217   }, 'load');
218
219   t('parent is picture, previous source removed', function(img) {
220     img.parentNode.removeChild(img.previousSibling);
221   }, 'load');
222
223   t('parent is picture, previous source has srcset set', function(img) {
224     img.previousSibling.srcset = '';
225   }, 'load');
226
227   t('parent is picture, previous source has srcset changed', function(img) {
228     img.previousSibling.srcset = ' ';
229   }, 'load');
230
231   t('parent is picture, previous source has srcset removed', function(img) {
232     img.previousSibling.removeAttribute('srcset');
233   }, 'load');
234
235   t('parent is picture, previous source has sizes set', function(img) {
236     img.previousSibling.sizes = '';
237   }, 'load');
238
239   t('parent is picture, previous source has sizes changed', function(img) {
240     img.previousSibling.sizes = ' ';
241   }, 'load');
242
243   t('parent is picture, previous source has sizes removed', function(img) {
244     img.previousSibling.removeAttribute('sizes');
245   }, 'load');
246
247   t('parent is picture, previous source has media set', function(img) {
248     img.previousSibling.media = '';
249   }, 'load');
250
251   t('parent is picture, previous source has media changed', function(img) {
252     img.previousSibling.media = ' ';
253   }, 'load');
254
255   t('parent is picture, previous source has media removed', function(img) {
256     img.previousSibling.removeAttribute('media');
257   }, 'load');
258
259   t('parent is picture, previous source has type set', function(img) {
260     img.previousSibling.type = '';
261   }, 'load');
262
263   t('parent is picture, previous source has type changed', function(img) {
264     img.previousSibling.type = ' ';
265   }, 'load');
266
267   t('parent is picture, previous source has type removed', function(img) {
268     img.previousSibling.removeAttribute('type');
269   }, 'load');
270
271   t('srcset is set to same value', function(img) {
272     img.srcset = "/images/green-2x2.png";
273   }, 'timeout');
274
275   t('sizes is set to same value', function(img) {
276     img.sizes = '';
277   }, 'timeout');
278
279   t('crossorigin state not changed: absent, removeAttribute', function(img) {
280     img.removeAttribute('crossorigin');
281   }, 'timeout');
282
283   t('crossorigin state not changed: empty to anonymous', function(img) {
284     img.crossOrigin = 'anonymous';
285   }, 'timeout');
286
287   t('crossorigin state not changed: anonymous to foobar', function(img) {
288     img.crossOrigin = 'foobar';
289   }, 'timeout');
290
291   t('crossorigin state not changed: use-credentials to USE-CREDENTIALS', function(img) {
292     img.crossOrigin = 'USE-CREDENTIALS';
293   }, 'timeout');
294
295   t('inserted into picture ancestor', function(img) {
296     img.nextSibling.firstChild.appendChild(img);
297   }, 'timeout');
298
299   t('removed from picture ancestor', function(img) {
300     img.parentNode.removeChild(img);
301   }, 'timeout');
302
303   t('ancestor picture has a source inserted', function(img) {
304     img.parentNode.parentNode.insertBefore(document.createElement('source'), img.parentNode);
305   }, 'timeout');
306
307   t('ancestor picture has a source removed', function(img) {
308     img.parentNode.parentNode.removeChild(img.parentNode.previousSibling);
309   }, 'timeout');
310
311   t('ancestor picture; previous sibling source inserted', function(img) {
312     img.parentNode.insertBefore(document.createElement('source'), img);
313   }, 'timeout');
314
315   t('ancestor picture; previous sibling source removed', function(img) {
316     img.parentNode.removeChild(img.previousSibling);
317   }, 'timeout');
318
319   t('parent is picture, following sibling source inserted', function(img) {
320     img.parentNode.appendChild(document.createElement('source'));
321   }, 'timeout');
322
323   t('parent is picture, following sibling source removed', function(img) {
324     img.parentNode.removeChild(img.nextSibling);
325   }, 'timeout');
326
327   t('parent is picture, following sibling source has srcset set', function(img) {
328     img.nextSibling.srcset = '';
329   }, 'timeout');
330
331   t('media on img set', function(img) {
332     img.setAttribute('media', '');
333   }, 'timeout');
334
335   t('type on img set', function(img) {
336     img.setAttribute('type', '');
337   }, 'timeout');
338
339   t('class on img set', function(img) {
340     img.className = '';
341   }, 'timeout');
342
343   t('alt on img set', function(img) {
344     img.alt = '';
345   }, 'timeout');
346
347   t('src on previous sibling source set', function(img) {
348     img.previousSibling.setAttribute('src', '');
349   }, 'timeout');
350
351   t('class on previous sibling source set', function(img) {
352     img.previousSibling.className = '';
353   }, 'timeout');
354
355   t('inserted/removed children of img', function(img) {
356     img.appendChild(document.createElement('source'));
357     setTimeout(this.step_func(function() {
358       img.removeChild(img.firstChild);
359     }), 0);
360   }, 'timeout');
361
362   t('picture is inserted; img has src', function(img) {
363     img.parentNode.nextSibling.appendChild(img.parentNode);
364   }, 'timeout');
365
366   t('picture is inserted; img has srcset', function(img) {
367     img.parentNode.nextSibling.appendChild(img.parentNode);
368   }, 'timeout');
369
370   t('picture is inserted; img has previous sibling source', function(img) {
371     img.parentNode.nextSibling.appendChild(img.parentNode);
372   }, 'timeout');
373
374   t('picture is inserted; img has following sibling source', function(img) {
375     img.parentNode.nextSibling.appendChild(img.parentNode);
376   }, 'timeout');
377
378   t('picture is removed; img has src', function(img) {
379     img.parentNode.parentNode.removeChild(img.parentNode);
380   }, 'timeout');
381
382   t('picture is removed; img has srcset', function(img) {
383     img.parentNode.parentNode.removeChild(img.parentNode);
384   }, 'timeout');
385
386   t('picture is removed; img has previous sibling source', function(img) {
387     img.parentNode.parentNode.removeChild(img.parentNode);
388   }, 'timeout');
389
390   t('picture is removed; img has following sibling source', function(img) {
391     img.parentNode.parentNode.removeChild(img.parentNode);
392   }, 'timeout');
393
394   t('parent is picture, following img inserted', function(img) {
395     img.parentNode.appendChild(document.createElement('img'));
396   }, 'timeout');
397
398   t('parent is picture, following img removed', function(img) {
399     img.parentNode.removeChild(img.nextSibling);
400   }, 'timeout');
401
402   t('parent is picture, following img has src set', function(img) {
403     img.nextSibling.src = '';
404   }, 'timeout');
405
406   t('parent is picture, following img has srcset set', function(img) {
407     img.nextSibling.srcset = '';
408   }, 'timeout');
409
410   t('parent is picture, following img has sizes set', function(img) {
411     img.nextSibling.sizes = '';
412   }, 'timeout');
413
414   done();
415 };
416 </script>