Map width/height to the aspect-ratio property for canvas

This matches the code for <img> added in https://crrev.com/c/2495560 and for <video> in https://crrev.com/c/2642857 as well as the spec in whatwg/html#6032 . Change-Id: I897bcf12952cf0cf817b03c7dbd825d4c7212906 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2650135 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#848136} GitOrigin-RevId: b08b91bf78c22bb660b2c7f13091a06800cf1c96
mjfroman · Jan 28, 2021 · 275ce1a · 275ce1a
1 parent 935cb89
commit 275ce1a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 0 deletions.
diff --git a/blink/renderer/core/html/canvas/html_canvas_element.cc b/blink/renderer/core/html/canvas/html_canvas_element.cc
@@ -1067,6 +1067,32 @@ void HTMLCanvasElement::toBlob(V8BlobCallback* callback,
   }
 }
 
+bool HTMLCanvasElement::IsPresentationAttribute(
+    const QualifiedName& name) const {
+  if (name == html_names::kWidthAttr || name == html_names::kHeightAttr)
+    return true;
+  return HTMLElement::IsPresentationAttribute(name);
+}
+
+void HTMLCanvasElement::CollectStyleForPresentationAttribute(
+    const QualifiedName& name,
+    const AtomicString& value,
+    MutableCSSPropertyValueSet* style) {
+  if (name == html_names::kWidthAttr) {
+    if (FastHasAttribute(html_names::kHeightAttr)) {
+      const AtomicString& height = FastGetAttribute(html_names::kHeightAttr);
+      ApplyAspectRatioToStyle(value, height, style);
+    }
+  } else if (name == html_names::kHeightAttr) {
+    if (FastHasAttribute(html_names::kWidthAttr)) {
+      const AtomicString& width = FastGetAttribute(html_names::kWidthAttr);
+      ApplyAspectRatioToStyle(width, value, style);
+    }
+  } else {
+    HTMLElement::CollectStyleForPresentationAttribute(name, value, style);
+  }
+}
+
 void HTMLCanvasElement::AddListener(CanvasDrawListener* listener) {
   listeners_.insert(listener);
 }

diff --git a/blink/renderer/core/html/canvas/html_canvas_element.h b/blink/renderer/core/html/canvas/html_canvas_element.h
@@ -141,6 +141,11 @@ class CORE_EXPORT HTMLCanvasElement final
     return toBlob(callback, mime_type, ScriptValue(), exception_state);
   }
 
+  bool IsPresentationAttribute(const QualifiedName&) const final;
+  void CollectStyleForPresentationAttribute(const QualifiedName&,
+                                            const AtomicString&,
+                                            MutableCSSPropertyValueSet*) final;
+
   // Used for canvas capture.
   void AddListener(CanvasDrawListener*);
   void RemoveListener(CanvasDrawListener*);

diff --git a/...ing/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html b/...ing/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html
@@ -10,11 +10,18 @@
   }
 </style>
 <body>
+<canvas id="contained" width="250" height="100" style="contain: size;"></canvas>
 <script>
 function assert_ratio(img, expected) {
   let epsilon = 0.001;
   assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
 }
+
+test(function() {
+  canvas = document.getElementById("contained");
+  assert_ratio(canvas, 2.5);
+}, "Canvas width and height attributes are used as the surface size with contain:size");
+
 // Create and append a new canvas and immediately check the ratio.
 test(function() {
   var canvas = document.createElement("canvas");