diff --git a/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.cpp
index c149f914d3..5ba37f888c 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.cpp
@@ -12,6 +12,9 @@
#include
#include
#include
+#include
+#include
+#include
#include
#include
#include
@@ -52,6 +55,28 @@ void HTMLCanvasElement::visit_edges(Cell::Visitor& visitor)
});
}
+void HTMLCanvasElement::apply_presentational_hints(CSS::StyleProperties& style) const
+{
+ // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images
+ // The width and height attributes map to the aspect-ratio property on canvas elements.
+
+ // FIXME: Multiple elements have aspect-ratio presentational hints, make this into a helper function
+
+ // https://html.spec.whatwg.org/multipage/rendering.html#map-to-the-aspect-ratio-property
+ // if element has both attributes w and h, and parsing those attributes' values using the rules for parsing non-negative integers doesn't generate an error for either
+ auto w = parse_non_negative_integer(attribute(HTML::AttributeNames::width));
+ auto h = parse_non_negative_integer(attribute(HTML::AttributeNames::height));
+
+ if (w.has_value() && h.has_value())
+ // then the user agent is expected to use the parsed integers as a presentational hint for the 'aspect-ratio' property of the form auto w / h.
+ style.set_property(CSS::PropertyID::AspectRatio,
+ CSS::StyleValueList::create(CSS::StyleValueVector {
+ CSS::IdentifierStyleValue::create(CSS::ValueID::Auto),
+ CSS::RatioStyleValue::create(CSS::Ratio { static_cast(w.value()), static_cast(h.value()) }) },
+
+ CSS::StyleValueList::Separator::Space));
+}
+
unsigned HTMLCanvasElement::width() const
{
// https://html.spec.whatwg.org/multipage/canvas.html#obtain-numeric-values
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.h b/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.h
index 625d672806..c8f26c7e31 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.h
+++ b/Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.h
@@ -44,6 +44,8 @@ private:
virtual void initialize(JS::Realm&) override;
virtual void visit_edges(Cell::Visitor&) override;
+ virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+
virtual JS::GCPtr create_layout_node(NonnullRefPtr) override;
enum class HasOrCreatedContext {