Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-04 13:10:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

6
components/script/dom/element.rs
View file

@ -107,7 +107,7 @@ use crate::dom::eventtarget::EventTarget;
use crate::dom::htmlanchorelement::HTMLAnchorElement;
use crate::dom::htmlbodyelement::{HTMLBodyElement, HTMLBodyElementLayoutHelpers};
use crate::dom::htmlbuttonelement::HTMLButtonElement;
use crate::dom::htmlcanvaselement::{HTMLCanvasElement, LayoutHTMLCanvasElementHelpers};
use crate::dom::htmlcanvaselement::LayoutHTMLCanvasElementHelpers;
use crate::dom::htmlcollection::HTMLCollection;
use crate::dom::htmlelement::HTMLElement;
use crate::dom::htmlfieldsetelement::HTMLFieldSetElement;
@ -852,8 +852,6 @@ impl<'dom> LayoutElementHelpers<'dom> for LayoutDom<'dom, Element> {
} else if let Some(this) = self.downcast::<HTMLHRElement>() {
// https://html.spec.whatwg.org/multipage/#the-hr-element-2:attr-hr-width
this.get_width()
} else if let Some(this) = self.downcast::<HTMLCanvasElement>() {
this.get_width()
} else {
LengthOrPercentageOrAuto::Auto
};
@ -887,8 +885,6 @@ impl<'dom> LayoutElementHelpers<'dom> for LayoutDom<'dom, Element> {
this.get_height()
} else if let Some(this) = self.downcast::<HTMLImageElement>() {
this.get_height()
} else if let Some(this) = self.downcast::<HTMLCanvasElement>() {
this.get_height()
} else {
LengthOrPercentageOrAuto::Auto
};

18
components/script/dom/htmlcanvaselement.rs
View file

@ -17,7 +17,7 @@ use script_layout_interface::{HTMLCanvasData, HTMLCanvasDataSource};
use script_traits::ScriptMsg;
use servo_media::streams::registry::MediaStreamId;
use servo_media::streams::MediaStreamType;
use style::attr::{AttrValue, LengthOrPercentageOrAuto};
use style::attr::AttrValue;
use crate::dom::attr::Attr;
use crate::dom::bindings::cell::{ref_filter_map, DomRefCell, Ref};
@ -127,8 +127,6 @@ pub trait LayoutCanvasRenderingContextHelpers {
pub trait LayoutHTMLCanvasElementHelpers {
fn data(self) -> HTMLCanvasData;
fn get_width(self) -> LengthOrPercentageOrAuto;
fn get_height(self) -> LengthOrPercentageOrAuto;
fn get_canvas_id_for_layout(self) -> CanvasId;
}
@ -161,20 +159,6 @@ impl LayoutHTMLCanvasElementHelpers for LayoutDom<'_, HTMLCanvasElement> {
}
}
fn get_width(self) -> LengthOrPercentageOrAuto {
self.upcast::<Element>()
.get_attr_for_layout(&ns!(), &local_name!("width"))
.map(AttrValue::as_uint_px_dimension)
.unwrap_or(LengthOrPercentageOrAuto::Auto)
}
fn get_height(self) -> LengthOrPercentageOrAuto {
self.upcast::<Element>()
.get_attr_for_layout(&ns!(), &local_name!("height"))
.map(AttrValue::as_uint_px_dimension)
.unwrap_or(LengthOrPercentageOrAuto::Auto)
}
#[allow(unsafe_code)]
fn get_canvas_id_for_layout(self) -> CanvasId {
let canvas = self.unsafe_get();

13
tests/wpt/meta/MANIFEST.json vendored
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",
[

2
tests/wpt/meta/css/css-flexbox/canvas-contain-size.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-017.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-sizing/aspect-ratio/replaced-element-023.html.ini vendored
View file

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

3
tests/wpt/meta/css/css-sizing/replaced-fractional-height-from-aspect-ratio-2.html.ini vendored
View file

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

2
tests/wpt/meta/css/css-sizing/replaced-max-size-saturation.html.ini vendored
View file

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

29
tests/wpt/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-dimension-attributes.html vendored Normal file
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>