| <!DOCTYPE html> |
| <script src="resources/srcset-helper.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| function updateSrc() { |
| var img = document.getElementById("foo"); |
| // The below should not trigger the load of the blue image according to the spec. |
| img.src = "resources/blue-100-px-square.png" |
| img.srcset = "resources/blue-100-px-square.png 1x, resources/green-400-px-square.png 2x"; |
| } |
| addEventListener("DOMContentLoaded", function() { |
| if (window.testRunner && sessionStorage.pageReloaded) { |
| // Have to make sure to only load the src after the reload. |
| // Otherwise, we'd request and cache the 1x URL while the |
| // scale factor is 1, and after we reload we find the URL |
| // in the cache and reuse it, leading us to dump two requests. |
| updateSrc(); |
| } else if (!window.testRunner) { |
| // This else exists purely to allow running the test manually. |
| updateSrc(); |
| } |
| }, false); |
| addEventListener("load", function() { |
| shouldBeTrue('document.getElementById("foo").clientWidth==200'); |
| }, false); |
| </script> |
| <div>This test passes if this img tag below is a green square when the scale factor is 2. |
| It ensures that attributes can be changed dynamically from javascript, and that only the correct resource is loaded.</div> |
| <img id="foo"> |
