diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html')
| -rw-r--r-- | testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html new file mode 100644 index 0000000000..4dee3cf7ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html @@ -0,0 +1,120 @@ +<!doctype html> +<title>Image width and height attributes are used to infer aspect-ratio</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/aspect-ratio.js"></script> +<style> + img { + width: 100%; + max-width: 100px; + height: auto; + } +</style> +<img src="/images/green.png"> +<img src="/images/green.png" width=100 height=125> +<img src="" width=100 height=125> +<img src="error.png" width=100 height=125> +<img src="error.png"> +<img src="error.png" alt="Alt text" width=100 height=500> +<script> +let guard = async_test("Image width and height attributes are used to infer aspect-ratio"); +let cookie = Math.random(); +function assert_ratio(img, expected, description) { + let epsilon = 0.001; + assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10), + expected, epsilon, description); +} + +function test_computed_style(width, height, expected) { + test_computed_style_aspect_ratio("img", {width: width, height: height}, expected); + test_computed_style_aspect_ratio("input", {type: "image", width: width, height: height}, expected); + // input type=submit should not do this mapping. + test_computed_style_aspect_ratio("input", {type: "submit", width: width, height: height}, "auto"); +} + +// Create and append a new image and immediately check the ratio. +// We append a random query to the URL(s) to avoid matching something in the 'list +// of available images' (step 6 of the algorithm below) and thus have the actual +// load run in a microtask. +// https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data +test(function() { + // This img will be tested again after loaded. In order to locate it correctly, body should append it first. + var img = new Image(); + img.width = 250; + img.height = 100; + img.src = "/images/blue.png?" + cookie; + document.body.appendChild(img); + assert_ratio(img, 2.5); +}, "Create, append and test immediately: <img> with attributes width=250, height=100"); + +test(function () { + img = new Image(); + img.setAttribute("width", "0.8"); + img.setAttribute("height", "0.2"); + img.src = "/images/blue.png?" + (cookie + 1); + document.body.appendChild(img); + assert_ratio(img, 4); +}, "Create, append and test immediately: <img> with attributes width=0.8, height=0.2"); + +test(function () { + img = new Image(); + img.setAttribute("width", "50%"); + img.setAttribute("height", "25%"); + img.src = "/images/blue.png?" + (cookie + 2); + document.body.appendChild(img); + // Percentages should be ignored. + assert_equals(getComputedStyle(img).height, "0px"); +}, "Create, append and test immediately: <img> with attributes width=50% height=25%"); + +test(function () { + img = new Image(); + img.setAttribute("width", "50pp"); + img.setAttribute("height", "25xx"); + img.src = "/images/blue.png?" + (cookie + 3); + document.body.appendChild(img); + assert_ratio(img, 2); +}, "Create, append and test immediately: <img> with invalid trailing attributes width=50pp height=25xx"); + +test_computed_style("10", "20", "auto 10 / 20"); +test_computed_style("0", "1", "auto 0 / 1"); +test_computed_style("1", "0", "auto 1 / 0"); +test_computed_style("0", "0", "auto 0 / 0"); +test_computed_style("0.5", "1.5", "auto 0.5 / 1.5"); +test_computed_style(null, null, "auto"); +test_computed_style("10", null, "auto"); +test_computed_style(null, "20", "auto"); +test_computed_style("xx", "20", "auto"); +test_computed_style("10%", "20", "auto"); + +onload = function() { + let images = document.querySelectorAll("img"); + // Tests for images finished loading. + test(function() { + assert_ratio(images[0], 2.0, "2.0 is the original aspect ratio of green.png"); + }, "Loaded images test: <img> without width height attributes"); + + test(function() { + assert_ratio(images[1], 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio."); + }, "Loaded images test: <img> with width and height attributes, but conflicting to the original aspect ratio"); + + test(function () { + assert_ratio(images[2], 100 / 125, "aspect-ratio should override intrinsic size of images that don't have any src."); + }, "Loaded images test: <img> with width, height and empty src attributes"); + + test(function () { + assert_ratio(images[3], 100 / 125, "aspect-ratio should affect the size of error images."); + }, "Loaded images test: Error image with width and height attributes"); + + test(function () { + assert_not_equals(images[5].offsetHeight, 500, "Images with alt text should be inline and ignore the aspect ratio"); + // Though aspect-ratio is ignored, its value does not change. + assert_equals(getComputedStyle(images[5]).aspectRatio, "auto 100 / 500"); + }, "Loaded images test: Error image with width, height and alt attributes"); + + test(function () { + assert_ratio(images[6], 133 / 106, "The original aspect ratio of blue.png"); + }, "Loaded images test: <img> with width and height attributes, but not equal to the original aspect ratio"); + + guard.done(); +}; +</script> |