relevant-mutations.html (2114B)
1 <!DOCTYPE html> 2 <title>Moving triggers relevant mutations</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 7 <div></div> 8 9 <script> 10 promise_test(async t => { 11 const div = document.querySelector('div'); 12 div.innerHTML = ` 13 <picture> 14 <source srcset="/images/green.png" media="(min-width: 10px)"> 15 <img src="/images/red.png"> 16 </picture>`; 17 18 const picture = document.querySelector('picture'); 19 const source = document.querySelector('source'); 20 const img = document.querySelector('img'); 21 22 t.add_cleanup(() => { 23 picture.remove(); 24 source.remove(); 25 img.remove(); 26 }); 27 28 await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true})); 29 30 // Moving <source> out of <picture> triggers a relevant mutation on <img>. 31 document.body.moveBefore(source, null); 32 33 await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true})); 34 }, "Moving <source> out of <picture> triggers a relevant mutation on sibling <img>"); 35 36 promise_test(async t => { 37 const div = document.querySelector('div'); 38 div.innerHTML = ` 39 <picture> 40 <source srcset="/images/green.png" media="(min-width: 10px)"> 41 </picture>`; 42 43 const picture = document.querySelector('picture'); 44 const source = document.querySelector('source'); 45 const img = document.body.appendChild(document.createElement('img')); 46 img.src = '/images/red.png'; 47 48 t.add_cleanup(() => { 49 picture.remove(); 50 source.remove(); 51 img.remove(); 52 }); 53 54 // The <img> will first load outside of the picture. 55 await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true})); 56 57 // Moving the <img> element to the <picture> (as the last child), triggers a 58 // relevant mutation and loads the <source> picture — which still fires a 59 // load event at the <img>. 60 picture.moveBefore(img, null); 61 62 await new Promise(resolve => img.addEventListener('load', e => resolve(), {once: true})); 63 }, "Moving <img> into a <picture> triggers a relevant mutation on the <img>, " + 64 "loading <source>"); 65 </script>