test_picture_apng.html (2559B)
1 <!DOCTYPE HTML> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Image srcset mutations</title> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 9 </head> 10 <script type="application/javascript"> 11 "use strict"; 12 window.onload = function() { 13 // Smoke test, check picture working as expected 14 const t0 = document.querySelector("#test0 img"); 15 ok(t0.currentSrc.endsWith("apng"), `t0: expected pass.apng, got '${t0.currentSrc}'`); 16 17 // Test that the apng is selected over bogus types. 18 const t1 = document.querySelector("#test1 img"); 19 ok(t1.currentSrc.endsWith("apng"), `t1: expected pass.apng, got '${t1.currentSrc}'`); 20 21 // Test that tree order precedence applies 22 const t2 = document.querySelector("#test2 img"); 23 ok(t2.currentSrc.endsWith("apng"), `t2: expected pass.apng, got '${t2.currentSrc}'`); 24 25 // Test that apng doesn't alway win 26 const t3 = document.querySelector("#test3 img"); 27 ok(t3.currentSrc.endsWith("apng"), `t3: expected pass.apng, got '${t3.currentSrc}'`); 28 29 // Test dynamically constructed picture, where apng is selected over a bogus 30 // source or the img src attribute 31 const pic = document.createElement("picture"); 32 pic.id = "test4"; 33 const t4 = document.createElement("img"); 34 const bogusSource = document.createElement("source"); 35 bogusSource.type = "bogus/bogus"; 36 bogusSource.srcset = "fail.png"; 37 const legitSource = document.createElement("source"); 38 legitSource.type = "image/apng"; 39 legitSource.srcset = "pass.apng"; 40 pic.appendChild(bogusSource); 41 pic.appendChild(legitSource); 42 pic.appendChild(t4); 43 t4.src = "fail.png"; 44 document.body.appendChild(pic); 45 t4.onload = ()=>{ 46 ok(t4.currentSrc.endsWith("apng"), `t4: Expected pass.apng, got '${t4.currentSrc}'`); 47 SimpleTest.finish(); 48 } 49 }; 50 SimpleTest.waitForExplicitFinish(); 51 </script> 52 53 <body> 54 <picture id="test0"> 55 <source> 56 <img src="pass.apng"> 57 </picture> 58 <picture id="test1"> 59 <source type="bogus/type" srcset="fail.png"> 60 <source type="image/apng" srcset="pass.apng"> 61 <source type="image/jpeg" srcset="fail.png"> 62 <img src="fail-fallback"> 63 </picture> 64 <picture id="test2"> 65 <source type="image/png" srcset="pass.apng"> 66 <source srcset="fail.png"> 67 <source type="bogus/type" srcset="fail.png"> 68 <img src="fail-fallback"> 69 </picture> 70 <picture id="test3"> 71 <source type="image/jpeg" srcset="pass.apng"> 72 <source type="image/apng" srcset="fail.png"> 73 <img src="fail-fallback"> 74 </picture> 75 </body> 76 77 </html>