1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!doctype html>
<title>Canvas width and height attributes are used as the surface size, and also to infer aspect ratio</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_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 / 1");
test_computed_style("10%", "20", "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");
test_computed_style("20", "xx", "auto");
</script>
|
