From bc144352a2c77415ab3aa17a3d783bc6fa4d90e4 Mon Sep 17 00:00:00 2001 From: Daniel Libby Date: Fri, 8 Nov 2019 14:21:14 -0800 Subject: [PATCH] Add support for device-pixel-content-box-size #3554 (#4476) Authors need a way to get the content box size in integral physical pixels. This allows for the correct sizing of the backing store of a canvas to match the snapped CSS size and prevents moire patterns that arise when the sizes are mismatched. Currently authors could use devicePixelRatio and rounding in order to approximate this, but due to implementation differences in pixel snapping, can still get the wrong answer. Additionally, this can be affected by position changes which authors cannot currently hook into in a reasonable manner. --- resize-observer-1/Overview.bs | 41 +++++++++++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/resize-observer-1/Overview.bs b/resize-observer-1/Overview.bs index ab051633308..40d5533cd96 100644 --- a/resize-observer-1/Overview.bs +++ b/resize-observer-1/Overview.bs @@ -42,6 +42,8 @@ urlPrefix: https://www.w3.org/TR/CSS21/box.html url: #box-border-area; type: dfn; text: box border area urlPrefix: https://drafts.csswg.org/css-box-3/ url: #content-area; type: dfn; text: content area +urlPrefix: https://www.w3.org/TR/cssom-view-1/ + url: #dom-window-devicepixelratio; type: dfn; text: devicePixelRatio 
@@ -135,7 +137,7 @@ It is modeled after {{MutationObserver}} and {{IntersectionObserver}}.
 
 
     enum ResizeObserverBoxOptions {
-        "border-box", "content-box"
+        "border-box", "content-box", "device-pixel-content-box"
     };
 

 
@@ -143,6 +145,22 @@ ResizeObserver can observe different kinds of CSS sizes:
 
 * {{border-box}}  : size of box border area as defined in CSS2.
 * {{content-box}} : size of content area as defined in CSS2.
+* {{device-pixel-content-box}} : size of content area as defined in CSS2, in device pixels,
+before applying any CSS transforms on the element or its ancestors.
+This size must contain integer values.
+
+

+The {{device-pixel-content-box}} can be approximated by multiplying devicePixelRatio by the {{content-box}} size.
+However, due to browser-specific subpixel snapping behavior,
+authors cannot determine the correct way to round this scaled {{content-box}} size.
+How a UA computes the device pixel box for an element is implementation-dependent.
+One possible implementation could be to multiply the box size and position by the device pixel ratio,
+then round both the resulting floating-point size and position of the box to integer values,
+in a way that maximizes the quality of the rendered output.
+
+Note that this size can be affected by position changes to the target,
+and thus is typically more expensive to observe than the other sizes.
+

 
 
     dictionary ResizeObserverOptions {
@@ -231,6 +249,7 @@ interface ResizeObserverEntry {
     readonly attribute DOMRectReadOnly contentRect;
     readonly attribute ResizeObserverSize borderBoxSize;
     readonly attribute ResizeObserverSize contentBoxSize;
+    readonly attribute ResizeObserverSize devicePixelContentBoxSize;
 };
 

 
@@ -249,6 +268,9 @@ interface ResizeObserverEntry {
     : contentBoxSize
     ::
         {{Element}}'s content rect size when {{ResizeObserverCallback}} is invoked.
+    : devicePixelContentBoxSize
+    ::
+        {{Element}}'s content rect size in integral device pixels when {{ResizeObserverCallback}} is invoked.
 
 
 

@@ -264,15 +286,18 @@ interface ResizeObserverEntry {
         4. Set |this|.{{ResizeObserverEntry/contentBoxSize}} slot to result of 
             computing size given |target| and observedBox of "content-box".
 
-        5. Set |this|.{{ResizeObserverEntry/contentRect}} to logical |this|.{{ResizeObserverEntry/contentBoxSize}}.
+        5. Set |this|.{{ResizeObserverEntry/devicePixelContentBoxSize}} slot to result of 
+            computing size given |target| and observedBox of "device-pixel-content-box".
+
+        6. Set |this|.{{ResizeObserverEntry/contentRect}} to logical |this|.{{ResizeObserverEntry/contentBoxSize}} given |target| and observedBox of "content-box".
 
-        6. If |target| is not an SVG element do these steps:
+        7. If |target| is not an SVG element do these steps:
 
             1. Set |this|.|contentRect|.top to |target|.padding top.
 
             2. Set |this|.|contentRect|.left to |target|.padding left.
 
-        7. If |target| is an SVG element do these steps:
+        8. If |target| is an SVG element do these steps:
 
             1. Set |this|.|contentRect|.top and |this|.contentRect.left to 0.
 
@@ -448,6 +473,8 @@ run these steps:
 
             2. Matching size is |entry|.{{ResizeObserverEntry/contentBoxSize}} if |observation|.{{ResizeObservation/observedBox}} is "content-box"
 
+            3. Matching size is |entry|.{{ResizeObserverEntry/devicePixelContentBoxSize}} if |observation|.{{ResizeObservation/observedBox}} is "device-pixel-content-box"
+
         4. Set |targetDepth| to the result of calculate depth for node for |observation|.{{ResizeObservation/target}}.
 
         5. Set |shallowestTargetDepth| to |targetDepth| if |targetDepth| < |shallowestTargetDepth|
@@ -505,6 +532,12 @@ To calculate box size, given |target| and |observedBox|, run these st
 
             2. Set |computedSize|.blockSize to target's content area block length.
 
+        2. If |observedBox| is "device-pixel-content-box"
+
+            1. Set |computedSize|.inlineSize to target's content area inline length, in integral device pixels.
+
+            2. Set |computedSize|.blockSize to target's content area block length, in integral device pixels.
+
         3. return |computedSize|.
 
 
ResizeObserver Lifetime