canvas-dimension-attributes.html (1450B)
1 <!DOCTYPE html> 2 <title>Canvas width and height attributes are used as the surface size, and also to infer aspect ratio</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images"> 5 <link rel="match" href="/css/reference/ref-filled-green-200px-square.html"> 6 <meta name="assert" content=" 7 Unlike <img>, <canvas> doesn't map its dimension attributes to the dimension properties. 8 Therefore, the 1st <canvas> should be 100px wide since it infers an aspect ratio of 150 / 150. 9 The 2nd <canvas> should be 100px tall since it infers an aspect ratio of 150 / 300. 10 The 3rd <canvas> should be 150px wide since it infers an aspect ratio of 150 / 100. 11 The 4th <canvas> should be 100px tall since it infers an aspect ratio of 150 / 300."> 12 13 <style> 14 div { 15 background: red; 16 width: 200px; 17 font-size: 0; 18 } 19 canvas { 20 vertical-align: top; 21 } 22 </style> 23 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 24 <div> 25 <canvas id="canvas" width="150" style="background: green; height: 100px"></canvas> 26 <canvas id="canvas" height="300" style="background: green; width: 100px"></canvas> 27 <canvas id="canvas" width="150" height="100" style="background: green; height: 100px"></canvas> 28 <canvas id="canvas" width="150" height="300" style="background: green; width: 50px"></canvas> 29 </div>