mozilla-central/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-dimension-attributes.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

  • This WPT test may be referenced by the following Test IDs:
<!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="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>