canvas-aspect-ratio.html (1915B)
1 <!doctype html> 2 <title>Canvas width and height attributes are used as the surface size, and also to infer aspect ratio</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="resources/aspect-ratio.js"></script> 6 <style> 7 canvas { 8 width: 100%; 9 max-width: 100px; 10 height: auto; 11 } 12 </style> 13 <body> 14 <canvas id="contained" width="250" height="100" style="contain: size;"></canvas> 15 <script> 16 function assert_ratio(img, expected) { 17 let epsilon = 0.001; 18 assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon); 19 } 20 21 function test_computed_style(width, height, expected) { 22 test_computed_style_aspect_ratio("canvas", {width: width, height: height}, expected); 23 } 24 25 test(function() { 26 canvas = document.getElementById("contained"); 27 assert_ratio(canvas, 2.5); 28 }, "Canvas width and height attributes are used as the surface size with contain:size"); 29 30 // Create and append a new canvas and immediately check the ratio. 31 test(function() { 32 var canvas = document.createElement("canvas"); 33 canvas.setAttribute("width", "250"); 34 canvas.setAttribute("height", "100"); 35 document.body.appendChild(canvas); 36 // Canvases always use the aspect ratio from their surface size. 37 assert_ratio(canvas, 2.5); 38 }, "Canvas width and height attributes are used as the surface size"); 39 40 test_computed_style("10", "20", "auto 10 / 20"); 41 test_computed_style("0", "1", "auto 0 / 1"); 42 test_computed_style("1", "0", "auto 1 / 0"); 43 test_computed_style("0", "0", "auto 0 / 0"); 44 test_computed_style("0.5", "1.5", "auto 0 / 1"); 45 test_computed_style("10%", "20", "auto 10 / 20"); 46 test_computed_style(null, null, "auto"); 47 test_computed_style("10", null, "auto"); 48 test_computed_style(null, "20", "auto"); 49 test_computed_style("xx", "20", "auto"); 50 test_computed_style("20", "xx", "auto"); 51 52 </script>