Index: LayoutTests/fast/dom/HTMLImageElement/image-sizes-1x.html |
diff --git a/LayoutTests/fast/dom/HTMLImageElement/image-sizes-1x.html b/LayoutTests/fast/dom/HTMLImageElement/image-sizes-1x.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b2d00e0cbedd4c9ef04ba98df5ad0ee8f4ec99bb |
--- /dev/null |
+++ b/LayoutTests/fast/dom/HTMLImageElement/image-sizes-1x.html |
@@ -0,0 +1,55 @@ |
+<html> |
+<head> |
+<script src="../../../resources/js-test.js"></script> |
+<script> |
+ if (window.testRunner) |
+ testRunner.dumpAsText(); |
+ |
+ addEventListener("load", function() { |
+ shouldBe('document.getElementById("simple").clientWidth', '(window.innerWidth)'); |
+ shouldBe('document.getElementById("simple").currentSrc', '"../../hidpi/resources/image-set-2x.png"'); |
+ shouldBe('document.getElementById("small_sizes").clientWidth', '300'); |
+ shouldBe('document.getElementById("small_sizes").currentSrc', '"../../hidpi/resources/image-set-1x.png"'); |
+ shouldBe('document.getElementById("sizes_x_descriptors").clientWidth', '400'); |
+ shouldBe('document.getElementById("sizes_x_descriptors").currentSrc', '"../../hidpi/resources/image-set-1x.png"'); |
+ shouldBe('document.getElementById("sizes_src").clientWidth', '400'); |
+ shouldBe('document.getElementById("sizes_src").currentSrc', '"../../hidpi/resources/image-set-1x.png"'); |
+ shouldBe('document.getElementById("default_sizes").clientWidth', 'window.innerWidth'); |
+ shouldBe('document.getElementById("default_sizes").currentSrc', '"../../hidpi/resources/image-set-2x.png"'); |
+ shouldBe('document.getElementById("invalid_length").clientWidth', 'window.innerWidth'); |
+ shouldBe('document.getElementById("invalid_length").currentSrc', '"../../hidpi/resources/image-set-2x.png"'); |
+ shouldBe('document.getElementById("src_and_w").clientWidth', '700'); |
+ shouldBe('document.getElementById("src_and_w").currentSrc', '"resources/image-set-4x.png"'); |
+ shouldBe('document.getElementById("x_and_w").clientWidth', '700'); |
+ shouldBe('document.getElementById("x_and_w").currentSrc', '"resources/image-set-4x.png"'); |
+ shouldBe('document.getElementById("x_and_w2").clientWidth', '400'); |
+ shouldBe('document.getElementById("x_and_w2").currentSrc', '"../../hidpi/resources/image-set-2x.png"'); |
+ shouldBe('document.getElementById("x_and_w3").clientWidth', '400'); |
+ shouldBe('document.getElementById("x_and_w3").currentSrc', '"../../hidpi/resources/image-set-2x.png"'); |
+ shouldBe('document.getElementById("half_size").clientWidth', '(window.innerWidth/2)'); |
+ shouldBe('document.getElementById("half_size").currentSrc', '"../../hidpi/resources/image-set-2x.png"'); |
+ shouldBe('document.getElementById("infitisimal_sizes").clientWidth', '(window.innerWidth/100)'); |
+ shouldBe('document.getElementById("infitisimal_sizes").currentSrc', '"../../hidpi/resources/image-set-2x.png"'); |
+ }, false); |
+</script> |
+</head> |
+ |
+<body id="body"> |
+ <img id="simple" src="" sizes="(max-width: 300px) 400px, 800px" srcset="../../hidpi/resources/image-set-1x.png 400w, ../../hidpi/resources/image-set-2x.png 800w"> |
+ <img id="small_sizes" src="" sizes="300px" srcset="../../hidpi/resources/image-set-1x.png 400w, ../../hidpi/resources/image-set-2x.png 800w"> |
+ <!-- 'sizes' has no imapct on 'x' or 'src' resources --> |
+ <img id="sizes_x_descriptors" src="" sizes="50vw" srcset="../../hidpi/resources/image-set-1x.png 1x, ../../hidpi/resources/image-set-2x.png 2x"> |
+ <img id="sizes_src" src="../../hidpi/resources/image-set-1x.png" sizes="50vw"> |
+ <!-- Missing sizes or an invalid one, give a source size of 100vw --> |
+ <img id="default_sizes" src="" srcset="../../hidpi/resources/image-set-1x.png 400w, ../../hidpi/resources/image-set-2x.png 800w, resources/image-set-4x.png 1600w"> |
+ <img id="invalid_length" src="" sizes="(max-width: 300px) 400w, 800w" srcset="../../hidpi/resources/image-set-1x.png 400w, ../../hidpi/resources/image-set-2x.png 800w"> |
+ <img id="src_and_w" src="../../hidpi/resources/image-set-1x.png" sizes="700px" srcset="resources/image-set-4x.png 1600w"> |
+ <img id="x_and_w" sizes="700px" srcset="../../hidpi/resources/image-set-1x.png 0.5x, resources/image-set-4x.png 1600w"> |
+ <!-- The 'x' resource should be picked, and 'sizes' have no impact on its intrisic size --> |
+ <img id="x_and_w2" sizes="700px" srcset="../../hidpi/resources/image-set-2x.png 2x, resources/image-set-4x.png 16000w"> |
+ <img id="x_and_w3" sizes="700px" srcset="resources/image-set-4x.png 16000w, ../../hidpi/resources/image-set-2x.png 2x"> |
+ <!-- The intrinsic size should be identical to the 'sizes' value --> |
+ <img id="half_size" sizes="50vw" srcset="../../hidpi/resources/image-set-2x.png 800w, resources/image-set-4x.png 16000w"> |
+ <img id="infitisimal_sizes" sizes="1vw" srcset="../../hidpi/resources/image-set-2x.png 800w, resources/image-set-4x.png 16000w"> |
+</body> |
+</html> |