Remove width and height presentational hints for <canvas> (#33211)

According to HTML, the `width` and `height` attributes should only set
the natural sizes and the aspect ratio.
The `width` and `height` properties should stay as `initial` by default.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
Co-authored-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Oriol Brufau 2024-08-28 12:20:18 +02:00 committed by GitHub
parent a6b9640c99
commit 9639d36550
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 44 additions and 33 deletions

View file

@ -332870,6 +332870,19 @@
},
"replaced-elements": {
"attributes-for-embedded-content-and-images": {
"canvas-dimension-attributes.html": [
"536b1cd0c455595372cca3a260f1183e1d221ec5",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"img-dim.html": [
"2d636c9417738423141203001302eb344151e295",
[

View file

@ -1,2 +0,0 @@
[canvas-contain-size.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[replaced-element-017.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[replaced-element-023.html]
expected: FAIL

View file

@ -1,3 +0,0 @@
[replaced-fractional-height-from-aspect-ratio-2.html]
[canvas 1]
expected: FAIL

View file

@ -1,2 +0,0 @@
[replaced-max-size-saturation.html]
expected: FAIL

View file

@ -0,0 +1,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>