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
|
<!DOCTYPE html>
<title>Canvas width and height attributes are used as the surface size, and also to infer aspect ratio</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images">
<link rel="match" href="/css/reference/ref-filled-green-200px-square.html">
<meta name="assert" content="
Unlike <img>, <canvas> doesn't map its dimension attributes to the dimension properties.
Therefore, the 1st <canvas> should be 100px wide since it infers an aspect ratio of 150 / 150.
The 2nd <canvas> should be 100px tall since it infers an aspect ratio of 150 / 300.
The 3rd <canvas> should be 150px wide since it infers an aspect ratio of 150 / 100.
The 4th <canvas> should be 100px tall since it infers an aspect ratio of 150 / 300.">
<style>
div {
background: red;
width: 200px;
font-size: 0;
}
canvas {
vertical-align: top;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div>
<canvas id="canvas" width="150" style="background: green; height: 100px"></canvas>
<canvas id="canvas" height="300" style="background: green; width: 100px"></canvas>
<canvas id="canvas" width="150" height="100" style="background: green; height: 100px"></canvas>
<canvas id="canvas" width="150" height="300" style="background: green; width: 50px"></canvas>
</div>
|
