source-relevant-mutations.html (3682B)
1 <!DOCTYPE html> 2 <title>img should only look at a parent picture element</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <picture> 6 <source id=s1 media=all srcset="data:,s1"> 7 <source id=s2 media=all srcset="data:,s2"> 8 <source id=s3 media=all srcset="data:,s3"> 9 <img id=img1 src="data:,img1"> 10 <img id=img2 src="data:,img2"> 11 <source id=s4 media=all srcset="data:,s4"> 12 <source id=s5 media=all srcset="data:,s5"> 13 <source media=all srcset="data:,s6"> 14 </picture> 15 <script> 16 17 const picture = document.querySelector("picture"); 18 const img1 = document.getElementById("img1"); 19 const img2 = document.getElementById("img2"); 20 const source1 = document.getElementById("s1"); 21 const source2 = document.getElementById("s2"); 22 const source3 = document.getElementById("s3"); 23 const source4 = document.getElementById("s4"); 24 const source5 = document.getElementById("s5"); 25 26 promise_test(async () => { 27 // Wait for the relevant mutation microtask to run. 28 await Promise.resolve(); 29 assert_equals(img1.currentSrc, "data:,s1", "[img1] First source is correctly chosen"); 30 assert_equals(img2.currentSrc, "data:,s1", "[img2] First source is correctly chosen"); 31 32 // Triggers a relevant mutation for *all* image children under the parent 33 // `<picture>` element to update their source. 34 source1.remove(); 35 await Promise.resolve(); 36 assert_equals(img1.currentSrc, "data:,s2", 37 "[img1] Second source is chosen after first is removed"); 38 assert_equals(img2.currentSrc, "data:,s2", 39 "[img2] Second source is chosen after first is removed"); 40 41 42 source2.remove(); 43 await Promise.resolve(); 44 assert_equals(img1.currentSrc, "data:,s3", 45 "[img1] Third is chosen after first is removed"); 46 assert_equals(img2.currentSrc, "data:,s3", 47 "[img2] Third is chosen after first is removed"); 48 49 50 document.body.moveBefore(source3, null); 51 await Promise.resolve(); 52 assert_equals(img1.currentSrc, "data:,img1", 53 "[img1] Img src attribute is chosen after third source is moved"); 54 assert_equals(img2.currentSrc, "data:,img2", 55 "[img2] Img src attribute is chosen after third source is moved"); 56 57 58 source4.remove(); 59 await Promise.resolve(); 60 assert_equals(img1.currentSrc, "data:,img1", 61 "[img1] Img src attribute is unchanged after source is removed from after the img"); 62 assert_equals(img2.currentSrc, "data:,img2", 63 "[img2] Img src attribute is unchanged after source is removed from after the img"); 64 65 document.body.moveBefore(source5, null); 66 await Promise.resolve(); 67 assert_equals(img1.currentSrc, "data:,img1", 68 "[img1] Img src attribute is unchanged after source is moved from after the img"); 69 assert_equals(img2.currentSrc, "data:,img2", 70 "[img2] Img src attribute is unchanged after source is moved from after the img"); 71 72 picture.prepend(source2); 73 await Promise.resolve(); 74 assert_equals(img1.currentSrc, "data:,s2", 75 "[img1] Second source is chosen after inserted before the img element"); 76 assert_equals(img2.currentSrc, "data:,s2", 77 "[img2] Second source is chosen after inserted before the img element"); 78 79 picture.prepend(source1); 80 await Promise.resolve(); 81 assert_equals(img1.currentSrc, "data:,s1", 82 "[img1] First source is chosen after inserted before the img element"); 83 assert_equals(img2.currentSrc, "data:,s1", 84 "[img2] First source is chosen after inserted before the img element"); 85 }, "Neither the removing, moving, nor insertion steps for the source element " + 86 "track the previous 'next sibling' pointer when triggering relevant " + 87 "mutations for remaining child image elements of its old parent"); 88 </script>