diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
index 686fda348977936ae53cebb3f794c9eaec1e2139..119523d250ffc215ceb04738e7f49c01f06c60a1 100644
--- a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html
@@ -14,7 +14,6 @@
<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) {
let epsilon = 0.001;
assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
@@ -24,54 +23,50 @@ 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 = getVideoURI('/media/2x2-green');
- 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() {
- video = document.createElement("video");
- video.setAttribute("width", "250");
- video.setAttribute("height", "100");
- video.src = getVideoURI('/media/2x2-green');
- document.body.appendChild(video);
- assert_ratio(video, 2.5);
-
- video.onloadeddata = t.step_func_done(function() {
- // When loaded this video is square.
- assert_ratio(video, 1);
- });
-}, "aspect ratio for regular video");
-
-// Same but with auto width.
-t.step(function() {
- video = document.createElement("video");
- video.setAttribute("width", "250");
- video.setAttribute("height", "100");
- video.style.width = "auto";
- video.src = getVideoURI('/media/2x2-green');
- document.body.appendChild(video);
- assert_ratio(video, 2.5);
+promise_test(async function() {
+ {
+ let video = document.getElementById("contained");
+ video.src = getVideoURI('/media/2x2-green');
+ assert_ratio(video, 2.5, "contain:size aspect ratio");
+ }
- video.onloadeddata = t.step_func_done(function() {
+ // 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
+ {
+ let video = document.createElement("video");
+ video.setAttribute("width", "250");
+ video.setAttribute("height", "100");
+ video.src = getVideoURI('/media/2x2-green');
+ document.body.appendChild(video);
+ assert_ratio(video, 2.5, "aspect ratio for regular video before load");
+ await new Promise(r => video.addEventListener("loadeddata", r, { once: true }));
// When loaded this video is square.
- assert_ratio(video, 1);
- });
-}, "aspect ratio for regular video with width: auto and height: auto");
+ assert_ratio(video, 1, "aspect ratio for regular video after load");
+ }
-test_computed_style("10", "20", "auto 10 / 20");
-test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
-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(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");
+ // Same but with auto width.
+ {
+ let video = document.createElement("video");
+ video.setAttribute("width", "250");
+ video.setAttribute("height", "100");
+ video.style.width = "auto";
+ video.src = getVideoURI('/media/2x2-green');
+ document.body.appendChild(video);
+ assert_ratio(video, 2.5, "aspect ratio for regular video with width: auto before load");
+ await new Promise(r => video.addEventListener("loadeddata", r, { once: true }));
+ assert_ratio(video, 1, "aspect ratio for regular video with width: auto after load");
+ }
+ test_computed_style("10", "20", "auto 10 / 20");
+ test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+ 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(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>