| <!doctype html> |
| <title>Canvas width and height attributes are used as the surface size</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="resources/aspect-ratio.js"></script> |
| <style> |
| canvas { |
| width: 100%; |
| max-width: 100px; |
| height: auto; |
| } |
| </style> |
| <body> |
| <canvas id="contained" width="250" height="100" style="contain: size;"></canvas> |
| <script> |
| 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. |
| test(function() { |
| var canvas = document.createElement("canvas"); |
| canvas.setAttribute("width", "250"); |
| canvas.setAttribute("height", "100"); |
| 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"); |
| |
| 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> |
