| <!doctype html> |
| <title>Video width and height attributes are not used to infer aspect-ratio</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/common/media.js"></script> |
| <script src="resources/aspect-ratio.js"></script> |
| <style> |
| video { |
| width: 100%; |
| max-width: 100px; |
| height: auto; |
| } |
| </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) { |
| 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 = 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); |
| // Videos default to a size of 300x150px and calculate their aspect ratio |
| // based on that before the video is loaded. So this should be 2, ignoring |
| // the 2.5 that it would be based on the attributes. |
| assert_ratio(video, 2); |
| |
| video.onloadeddata = t.step_func_done(function() { |
| // When loaded this video is square. |
| assert_ratio(video, 1); |
| }); |
| }, "aspect ratio for regular video"); |
| |
| test(function() { |
| 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"); |
| }, "Computed style"); |
| |
| test(function() { |
| 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"); |
| }, "Computed style for invalid ratios"); |
| |
| </script> |
