Diff
Modified: trunk/LayoutTests/ChangeLog (276295 => 276296)
--- trunk/LayoutTests/ChangeLog 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/ChangeLog 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1,3 +1,14 @@
+2021-04-20 Cathie Chen <[email protected]>
+
+ Update html/rendering/replaced-elements/attributes-for-embedded-content-and-images/ tests from WPT
+ https://bugs.webkit.org/show_bug.cgi?id=224748
+
+ Reviewed by Rob Buis.
+
+ picture-aspect-ratio.html is flaky.
+
+ * TestExpectations:
+
2021-04-20 Tim Nguyen <[email protected]>
Implement CSS display property 2-value syntax
Modified: trunk/LayoutTests/TestExpectations (276295 => 276296)
--- trunk/LayoutTests/TestExpectations 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/TestExpectations 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1417,6 +1417,9 @@
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-img-element/sizes/parse-a-sizes-attribute-standards-mode.html [ Failure Pass ]
imported/w3c/web-platform-tests/html/semantics/embedded-content/the-object-element/object-fallback-failed-cross-origin-navigation.sub.html [ Failure Pass ]
+# Newly importing aspect ratio test is flaky.
+imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html [ Failure Pass ]
+
# Newly importing W3C tests needed support for reftest-wait.
webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-added.html [ Skip ]
webkit.org/b/186045 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-cue-rendering-after-controls-removed.html [ Skip ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1,3 +1,28 @@
+2021-04-20 Cathie Chen <[email protected]>
+
+ Update html/rendering/replaced-elements/attributes-for-embedded-content-and-images/ tests from WPT
+ https://bugs.webkit.org/show_bug.cgi?id=224748
+
+ Reviewed by Rob Buis.
+
+ Update the tests for "mapping attribute width and height as the implicit aspect ratio" which are based on the latest agreement
+ from WPT commit 19445e7b39.
+
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio-expected.txt:
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html:
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt:
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html:
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned-expected.html: Added.
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html: Added.
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio-expected.txt: Added.
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html: Added.
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js: Added.
+ (test_computed_style_aspect_ratio):
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/w3c-import.log: Added.
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio-expected.txt:
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html:
+ * web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/w3c-import.log:
+
2021-04-20 Tim Nguyen <[email protected]>
Implement CSS display property 2-value syntax
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio-expected.txt (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio-expected.txt 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio-expected.txt 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1,3 +1,15 @@
+
+PASS Canvas width and height attributes are used as the surface size with contain:size
PASS Canvas width and height attributes are used as the surface size
+FAIL canvas with {"width":"10","height":"20"} assert_equals: expected "auto 10 / 20" but got "auto"
+PASS canvas with {"width":"0","height":"1"}
+PASS canvas with {"width":"1","height":"0"}
+PASS canvas with {"width":"0","height":"0"}
+FAIL canvas with {"width":"0.5","height":"1.5"} assert_in_array: value "auto" not in array ["auto 0 / 1", "auto 0.5 / 1.5"]
+PASS canvas with {"width":"10%","height":"20"}
+PASS canvas with {"width":null,"height":null}
+PASS canvas with {"width":"10","height":null}
+PASS canvas with {"width":null,"height":"20"}
+PASS canvas with {"width":"xx","height":"20"}
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1,7 +1,8 @@
<!doctype html><!-- webkit-test-runner [ AspectRatioOfImgFromWidthAndHeightEnabled=true ] -->
-<title>Canvas width and height attributes are used as the surface size</title>
+<title>Canvas width and height attributes are used as the surface size, and also to infer aspect ratio</title>
<script src=""
<script src=""
+<script src=""
<style>
canvas {
width: 100%;
@@ -10,14 +11,24 @@
}
</style>
<body>
+<canvas id="contained" width="250" height="100" style="contain: size;"></canvas>
<script>
-let t = async_test("Canvas width and height attributes are used as the surface size");
function assert_ratio(img, expected) {
let epsilon = 0.001;
assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
}
+
+function test_computed_style(width, height, expected) {
+ test_computed_style_aspect_ratio("canvas", {width: width, height: height}, expected);
+}
+
+test(function() {
+ canvas = document.getElementById("contained");
+ assert_ratio(canvas, 2.5);
+}, "Canvas width and height attributes are used as the surface size with contain:size");
+
// Create and append a new canvas and immediately check the ratio.
-t.step(function() {
+test(function() {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", "250");
canvas.setAttribute("height", "100");
@@ -24,7 +35,24 @@
document.body.appendChild(canvas);
// Canvases always use the aspect ratio from their surface size.
assert_ratio(canvas, 2.5);
+}, "Canvas width and height attributes are used as the surface size");
- t.done();
-});
+test_computed_style("10", "20", "auto 10 / 20");
+// These are invalid per spec, but see
+// https://github.com/whatwg/html/issues/4961
+test_computed_style("0", "1", ["auto", "auto 0 / 1"]);
+test_computed_style("1", "0", ["auto", "auto 1 / 0"]);
+test_computed_style("0", "0", ["auto", "auto 0 / 0"]);
+
+// See https://github.com/whatwg/html/issues/4961:
+// https://html.spec.whatwg.org/#attr-canvas-width
+// https://html.spec.whatwg.org/#rules-for-parsing-non-negative-integers
+test_computed_style("0.5", "1.5", ["auto 0 / 1", "auto 0.5 / 1.5"]);
+test_computed_style("10%", "20", ["auto", "auto 10 / 20"]);
+
+test_computed_style(null, null, "auto");
+test_computed_style("10", null, "auto");
+test_computed_style(null, "20", "auto");
+test_computed_style("xx", "20", "auto");
+
</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1,4 +1,34 @@
-FAIL Image width and height attributes are used to infer aspect-ratio assert_approx_equals: expected 1.2547169811320755 +/- 0.001 but got 1.25
+FAIL Image width and height attributes are used to infer aspect-ratio assert_approx_equals: aspect-ratio should override intrinsic size of images that don't have any src. expected 0.8 +/- 0.001 but got Infinity
+FAIL img with {"width":"10","height":"20"} assert_equals: expected "auto 10 / 20" but got "auto"
+FAIL input with {"type":"image","width":"10","height":"20"} assert_equals: expected "auto 10 / 20" but got "auto"
+PASS input with {"type":"submit","width":"10","height":"20"}
+FAIL img with {"width":"0","height":"1"} assert_equals: expected "auto 0 / 1" but got "auto"
+FAIL input with {"type":"image","width":"0","height":"1"} assert_equals: expected "auto 0 / 1" but got "auto"
+PASS input with {"type":"submit","width":"0","height":"1"}
+FAIL img with {"width":"1","height":"0"} assert_equals: expected "auto 1 / 0" but got "auto"
+FAIL input with {"type":"image","width":"1","height":"0"} assert_equals: expected "auto 1 / 0" but got "auto"
+PASS input with {"type":"submit","width":"1","height":"0"}
+FAIL img with {"width":"0","height":"0"} assert_equals: expected "auto 0 / 0" but got "auto"
+FAIL input with {"type":"image","width":"0","height":"0"} assert_equals: expected "auto 0 / 0" but got "auto"
+PASS input with {"type":"submit","width":"0","height":"0"}
+FAIL img with {"width":"0.5","height":"1.5"} assert_equals: expected "auto 0.5 / 1.5" but got "auto"
+FAIL input with {"type":"image","width":"0.5","height":"1.5"} assert_equals: expected "auto 0.5 / 1.5" but got "auto"
+PASS input with {"type":"submit","width":"0.5","height":"1.5"}
+PASS img with {"width":null,"height":null}
+PASS input with {"type":"image","width":null,"height":null}
+PASS input with {"type":"submit","width":null,"height":null}
+PASS img with {"width":"10","height":null}
+PASS input with {"type":"image","width":"10","height":null}
+PASS input with {"type":"submit","width":"10","height":null}
+PASS img with {"width":null,"height":"20"}
+PASS input with {"type":"image","width":null,"height":"20"}
+PASS input with {"type":"submit","width":null,"height":"20"}
+PASS img with {"width":"xx","height":"20"}
+PASS input with {"type":"image","width":"xx","height":"20"}
+PASS input with {"type":"submit","width":"xx","height":"20"}
+PASS img with {"width":"10%","height":"20"}
+PASS input with {"type":"image","width":"10%","height":"20"}
+PASS input with {"type":"submit","width":"10%","height":"20"}
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html 2021-04-20 10:19:21 UTC (rev 276296)
@@ -2,6 +2,7 @@
<title>Image width and height attributes are used to infer aspect-ratio</title>
<script src=""
<script src=""
+<script src=""
<style>
img {
width: 100%;
@@ -14,12 +15,22 @@
<img src="" width=100 height=125>
<img src="" width=100 height=125>
<img src=""
+<img src="" alt="Alt text" width=100 height=500>
<script>
let t = async_test("Image width and height attributes are used to infer aspect-ratio");
-function assert_ratio(img, expected) {
+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);
+ 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.
// This is not racy because the spec requires the user agent to queue a task:
// https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data
@@ -49,10 +60,28 @@
_onload_ = t.step_func_done(function() {
let images = document.querySelectorAll("img");
- assert_ratio(images[0], 2.0); // Loaded image's aspect ratio, at least by default, overrides width / height ratio.
- assert_ratio(images[1], 2.0); // 2.0 is the original aspect ratio of green.png
- assert_equals(getComputedStyle(images[2]).height, "0px"); // aspect-ratio doesn't override intrinsic size of images that don't have any src.
- assert_equals(getComputedStyle(images[3]).height, getComputedStyle(images[4]).height); // aspect-ratio doesn't override intrinsic size of error images.
- assert_ratio(images[5], 133/106); // The original aspect ratio of blue.png
+ assert_ratio(images[0], 2.0, "2.0 is the original aspect ratio of green.png");
+ assert_ratio(images[1], 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio.");
+ assert_ratio(images[2], 100/125, "aspect-ratio should override intrinsic size of images that don't have any src.");
+ assert_ratio(images[3], 100/125, "aspect-ratio should affect the size of error images.");
+ assert_not_equals(images[5].offsetHeight, 500, "Images with alt text should be inline and ignore the aspect ratio");
+ assert_ratio(images[6], 133/106, "The original aspect ratio of blue.png");
});
+
+test_computed_style("10", "20", "auto 10 / 20");
+// These are invalid per spec, but see
+// https://github.com/whatwg/html/issues/4961
+test_computed_style("0", "1", "auto 0 / 1");
+test_computed_style("1", "0", "auto 1 / 0");
+test_computed_style("0", "0", "auto 0 / 0");
+// https://html.spec.whatwg.org/#map-to-the-aspect-ratio-property
+// https://html.spec.whatwg.org/#rules-for-parsing-non-zero-dimension-values
+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");
+
</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned-expected.html (0 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned-expected.html 2021-04-20 10:19:21 UTC (rev 276296)
@@ -0,0 +1,8 @@
+<!doctype html>
+<style>
+input {
+ color: black;
+ text-align: right;
+}
+</style>
+<input type=number value=0>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html (0 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html 2021-04-20 10:19:21 UTC (rev 276296)
@@ -0,0 +1,16 @@
+<!doctype html>
+<link rel="author" title="Emilio Cobos Álvarez" href=""
+<link rel="author" title="Mozilla" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+input {
+ color: black;
+ text-align: right;
+}
+input::placeholder {
+ color: inherit;
+ opacity: 1;
+}
+</style>
+<input type=number placeholder=0>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio-expected.txt (0 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio-expected.txt 2021-04-20 10:19:21 UTC (rev 276296)
@@ -0,0 +1,16 @@
+
+
+
+
+FAIL source width and height attributes are used to infer aspect-ratio in <picture> assert_equals: expected "auto 100 / 100" but got "auto"
+FAIL Computed style for width/height/aspect-ratio assert_approx_equals: expected 1 +/- 0.001 but got Infinity
+FAIL Source width/height should take precedence over img attributes. assert_approx_equals: expected 2 +/- 0.001 but got 5
+FAIL Make sure style gets invalidated correctly when the source gets removed. assert_equals: expected "auto 250 / 50" but got "auto"
+FAIL If the <source> has only one of width/height, we don't get an aspect ratio, even if the <img> has both. assert_equals: expected "100px" but got "200px"
+FAIL If we don't have width/height on the source, we fall back to width/height on the <img>. assert_equals: expected "auto 200 / 100" but got "auto"
+FAIL If we only have one width/height attribute, we should get that attribute mapped but no aspect ratio, even if <img> has attributes. assert_equals: expected "100px" but got "200px"
+FAIL Dynamically changing width/height should change computed style assert_equals: expected "auto 100 / 100" but got "auto"
+FAIL Changing which <source> matches should change computed style assert_equals: expected "auto 100 / 100" but got "auto"
+FAIL Percentages on source should be ignored for aspect-ratio but used for width/height. assert_equals: expected 100 but got 0
+FAIL Trailing garbage should be ignored but not make the attribute invalid assert_equals: expected 100 but got 0
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html (0 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html 2021-04-20 10:19:21 UTC (rev 276296)
@@ -0,0 +1,230 @@
+<!doctype html>
+<title>Image width and height attributes are used to infer aspect-ratio</title>
+<script src=""
+<script src=""
+<style>
+ img:not([nowidth]) {
+ width: 100%;
+ max-width: 100px;
+ height: auto;
+ }
+</style>
+<picture>
+ <source srcset="/images/green-100x50.png"></source>
+ <img>
+</picture>
+
+<picture>
+ <source srcset="/images/green-100x50.png" width="100" height="100"></source>
+ <img>
+</picture>
+
+<picture>
+ <source srcset="/images/green-100x50.png" width="100" height="100"></source>
+ <img width="50" height="100">
+</picture>
+
+<picture>
+ <source srcset="/images/green-100x50.png" width="100" height="100" id="twosource-s1"></source>
+ <source srcset="/images/green-100x50.png" width="300" height="150"></source>
+ <img id="twosource-img">
+</picture>
+
+<div style="width: 100px;">
+ <picture>
+ <source srcset="/images/green-100x50.png" width="100%" height="50%" id="percent-src"></source>
+ <img style="contain:size;" id="percent-img" nowidth="true">
+ </picture>
+</div>
+
+<picture>
+ <source srcset="/images/green-100x50.png" width="100abc" height="50abc" id="trailing-src"></source>
+ <img style="contain:size;" id="trailing-img" nowidth="true">
+</picture>
+
+<script>
+let t = async_test("source width and height attributes are used to infer aspect-ratio in <picture>");
+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 createPicture(width, height) {
+ var picture = document.createElement("picture");
+ var source = document.createElement("source");
+ if (width !== undefined)
+ source.setAttribute("width", width);
+ if (height !== undefined)
+ source.setAttribute("height", height);
+ source.setAttribute("srcset", "/images/green.png");
+ picture.appendChild(source);
+ var img = document.createElement("img");
+ picture.appendChild(img);
+ document.body.appendChild(picture);
+ return img;
+}
+
+function assert_cs(img, val) {
+ assert_equals(getComputedStyle(img).aspectRatio, val);
+}
+
+// Create and append a new image and immediately check the ratio.
+// This is not racy because the spec requires the user agent to queue a task:
+// https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data
+test(function() {
+ var img = createPicture(100, 100);
+ assert_ratio(img, 1.0);
+ assert_cs(img, "auto 100 / 100");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "100px");
+ assert_equals(getComputedStyle(img).height, "100px");
+ var source = img.previousSibling;
+ assert_equals(getComputedStyle(source).width, "auto");
+ assert_equals(getComputedStyle(source).height, "auto");
+}, "Computed style for width/height/aspect-ratio");
+
+test(function() {
+ img = createPicture(200, 100);
+ img.setAttribute("width", 250);
+ img.setAttribute("height", 50);
+ assert_ratio(img, 2.0);
+ assert_cs(img, "auto 200 / 100");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "200px");
+ assert_equals(getComputedStyle(img).height, "100px");
+ source = img.previousSibling;
+ assert_equals(getComputedStyle(source).width, "auto");
+ assert_equals(getComputedStyle(source).height, "auto");
+}, "Source width/height should take precedence over img attributes.");
+
+test(function() {
+ img.parentNode.removeChild(img.previousSibling);
+ assert_cs(img, "auto 250 / 50");
+ img.src = ""
+ assert_ratio(img, 5.0);
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "250px");
+ assert_equals(getComputedStyle(img).height, "50px");
+}, "Make sure style gets invalidated correctly when the source gets removed.");
+
+test(function() {
+ img = createPicture(100, undefined);
+ img.setAttribute("width", 200);
+ img.setAttribute("height", 100);
+ assert_cs(img, "auto");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "100px");
+ assert_equals(getComputedStyle(img).height, "auto");
+}, "If the <source> has only one of width/height, we don't get an aspect ratio, even if the <img> has both.");
+
+test(function() {
+ img = createPicture(undefined, undefined);
+ img.setAttribute("width", 200);
+ img.setAttribute("height", 100);
+ assert_cs(img, "auto 200 / 100");
+}, "If we don't have width/height on the source, we fall back to width/height on the <img>.");
+
+test(function() {
+ img = createPicture(100, undefined);
+ img.parentNode.style.display = "none";
+ img.setAttribute("width", "200");
+ img.setAttribute("height", "300");
+ img.setAttribute("nowidth", "true");
+ assert_cs(img, "auto");
+ assert_equals(getComputedStyle(img).width, "100px");
+ assert_equals(getComputedStyle(img).height, "auto");
+
+ img = createPicture(undefined, 100);
+ img.parentNode.style.display = "none";
+ img.setAttribute("width", "200");
+ img.setAttribute("height", "300");
+ img.setAttribute("nowidth", "true");
+ assert_cs(img, "auto");
+ assert_equals(getComputedStyle(img).width, "auto");
+ assert_equals(getComputedStyle(img).height, "100px");
+}, "If we only have one width/height attribute, we should get that attribute mapped but no aspect ratio, even if <img> has attributes.");
+
+test(function() {
+ img = createPicture(100, 100);
+ assert_cs(img, "auto 100 / 100");
+ img.previousSibling.setAttribute("height", "300");
+ assert_cs(img, "auto 100 / 300");
+ img.previousSibling.setAttribute("width", "10");
+ assert_cs(img, "auto 10 / 300");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "10px");
+ assert_equals(getComputedStyle(img).height, "300px");
+}, "Dynamically changing width/height should change computed style");
+
+test(function() {
+ img = document.getElementById("twosource-img");
+ assert_cs(img, "auto 100 / 100");
+ source = document.getElementById("twosource-s1");
+ source.setAttribute("type", "x-foo/x-bar");
+ // We should now match the second source
+ assert_cs(img, "auto 300 / 150");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "300px");
+ assert_equals(getComputedStyle(img).height, "150px");
+}, "Changing which <source> matches should change computed style");
+
+test(function() {
+ img = document.getElementById("percent-img");
+ assert_equals(img.offsetWidth, 100);
+ assert_equals(img.offsetHeight, 0);
+ assert_cs(img, "auto");
+ source = document.getElementById("percent-src");
+ assert_equals(source.width, 100);
+ assert_equals(source.height, 50);
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "100%");
+ assert_equals(getComputedStyle(img).height, "50%");
+}, "Percentages on source should be ignored for aspect-ratio but used for width/height.");
+
+test(function() {
+ img = document.getElementById("trailing-img");
+ assert_equals(img.offsetWidth, 100);
+ assert_equals(img.offsetHeight, 50);
+ assert_cs(img, "auto 100 / 50");
+ source = document.getElementById("trailing-src");
+ assert_equals(source.width, 100);
+ assert_equals(source.height, 50);
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "100px");
+ assert_equals(getComputedStyle(img).height, "50px");
+}, "Trailing garbage should be ignored but not make the attribute invalid");
+
+_onload_ = t.step_func_done(function() {
+ let images = document.querySelectorAll("img");
+ var img = images[0];
+ assert_ratio(img, 2.0, "2.0 is the original aspect ratio of green-100x50.png");
+ assert_cs(img, "auto");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "auto");
+ assert_equals(getComputedStyle(img).height, "auto");
+ img = images[1];
+ assert_ratio(img, 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio.");
+ assert_cs(img, "auto 100 / 100");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "100px");
+ assert_equals(getComputedStyle(img).height, "100px");
+ img = images[2];
+ assert_ratio(img, 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio (2).");
+ assert_cs(img, "auto 100 / 100");
+ img.style.display = "none";
+ img.setAttribute("nowidth", "true");
+ assert_equals(getComputedStyle(img).width, "100px");
+ assert_equals(getComputedStyle(img).height, "100px");
+});
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js (0 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js 2021-04-20 10:19:21 UTC (rev 276296)
@@ -0,0 +1,18 @@
+function test_computed_style_aspect_ratio(tag, attributes, expected) {
+ test(function() {
+ var elem = document.createElement(tag);
+ for (name in attributes) {
+ let val = attributes[name];
+ if (val !== null)
+ elem.setAttribute(name, val);
+ }
+ document.body.appendChild(elem);
+ let aspectRatio = getComputedStyle(elem).aspectRatio;
+ if (Array.isArray(expected)) {
+ assert_in_array(aspectRatio, expected);
+ } else {
+ assert_equals(aspectRatio, expected);
+ }
+ elem.remove();
+ }, `${tag} with ${JSON.stringify(attributes)}`);
+}
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/w3c-import.log (0 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/w3c-import.log (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/w3c-import.log 2021-04-20 10:19:21 UTC (rev 276296)
@@ -0,0 +1,17 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+ https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio-expected.txt (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio-expected.txt 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio-expected.txt 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1,4 +1,14 @@
-PASS Video width and height attributes are not used to infer aspect-ratio
+FAIL Video width and height attributes are not used to infer aspect-ratio assert_approx_equals: expected 2.5 +/- 0.001 but got 2
+FAIL video with {"width":"10","height":"20"} assert_equals: expected "auto 10 / 20" but got "auto"
+FAIL video with {"width":"0.5","height":"1.5"} assert_equals: expected "auto 0.5 / 1.5" but got "auto"
+PASS video with {"width":"0","height":"1"}
+PASS video with {"width":"1","height":"0"}
+PASS video with {"width":"0","height":"0"}
+PASS video with {"width":null,"height":null}
+PASS video with {"width":"10","height":null}
+PASS video with {"width":null,"height":"20"}
+PASS video with {"width":"xx","height":"20"}
+PASS video with {"width":"10%","height":"20"}
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html 2021-04-20 10:19:21 UTC (rev 276296)
@@ -1,8 +1,9 @@
<!doctype html><!-- webkit-test-runner [ AspectRatioOfImgFromWidthAndHeightEnabled=true ] -->
-<title>Video width and height attributes are not used to infer aspect-ratio</title>
+<title>Video width and height attributes are used to infer aspect-ratio</title>
<script src=""
<script src=""
<script src=""
+<script src=""
<style>
video {
width: 100%;
@@ -11,6 +12,7 @@
}
</style>
<body>
+<video width="250" height="100" id="contained" style="contain: size;"></video>
<script>
let t = async_test("Video width and height attributes are not used to infer aspect-ratio");
function assert_ratio(img, expected) {
@@ -17,11 +19,22 @@
let epsilon = 0.001;
assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
}
+
+function test_computed_style(width, height, expected) {
+ test_computed_style_aspect_ratio("video", {width: width, height: height}, expected);
+}
+
+t.step(function() {
+ var video = document.getElementById("contained");
+ video.src = ""
+ assert_ratio(video, 2.5);
+}, "contain:size aspect ratio");
+
// Create and append a new video and immediately check the ratio.
// This is not racy because the spec requires the user agent to queue a task:
// https://html.spec.whatwg.org/multipage/media.html#concept-media-load-algorithm
t.step(function() {
- var video = document.createElement("video");
+ video = document.createElement("video");
video.setAttribute("width", "250");
video.setAttribute("height", "100");
video.src = ""
@@ -35,5 +48,21 @@
// When loaded this video is square.
assert_ratio(video, 1);
});
-});
+}, "aspect ratio for regular video");
+
+test_computed_style("10", "20", "auto 10 / 20");
+test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+
+// These are invalid per spec, but see
+// https://github.com/whatwg/html/issues/4961
+test_computed_style("0", "1", ["auto", "auto 0 / 1"]);
+test_computed_style("1", "0", ["auto", "auto 1 / 0"]);
+test_computed_style("0", "0", ["auto", "auto 0 / 0"]);
+
+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");
+
</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/w3c-import.log (276295 => 276296)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/w3c-import.log 2021-04-20 09:50:24 UTC (rev 276295)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/w3c-import.log 2021-04-20 10:19:21 UTC (rev 276296)
@@ -38,8 +38,11 @@
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/input-image-inline-alt.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/input-type-change-from-image-1-expected.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/input-type-change-from-image-1.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_perc-expected.xhtml
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_perc.xhtml
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_pixel-expected.xhtml
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/object_border_pixel.xhtml
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/picture-aspect-ratio.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
