mirror of
https://github.com/servo/servo.git
synced 2025-08-14 09:55:35 +01:00
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:
parent
a6b9640c99
commit
9639d36550
9 changed files with 44 additions and 33 deletions
13
tests/wpt/meta/MANIFEST.json
vendored
13
tests/wpt/meta/MANIFEST.json
vendored
|
@ -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",
|
||||
[
|
||||
|
|
|
@ -1,2 +0,0 @@
|
|||
[canvas-contain-size.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[replaced-element-017.html]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[replaced-element-023.html]
|
||||
expected: FAIL
|
|
@ -1,3 +0,0 @@
|
|||
[replaced-fractional-height-from-aspect-ratio-2.html]
|
||||
[canvas 1]
|
||||
expected: FAIL
|
|
@ -1,2 +0,0 @@
|
|||
[replaced-max-size-saturation.html]
|
||||
expected: FAIL
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue