Add support for device-pixel-content-box-size #3554

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
 
 </pre>
 <pre class=link-defaults>
@@ -135,14 +137,30 @@ It is modeled after {{MutationObserver}} and {{IntersectionObserver}}.
 
 <pre class="idl">
     enum ResizeObserverBoxOptions {
-        "border-box", "content-box"
+        "border-box", "content-box", "device-pixel-content-box"
     };
 </pre>
 
 ResizeObserver can observe different kinds of CSS sizes:
 
 * {{border-box}}  : size of <a>box border area</a> as defined in CSS2.
 * {{content-box}} : size of <a>content area</a> as defined in CSS2.
+* {{device-pixel-content-box}} : size of <a>content area</a> as defined in CSS2, in device pixels,
+before applying any CSS transforms on the element or its ancestors.
+This size must contain integer values.
+
+<p class="note">
+The {{device-pixel-content-box}} can be approximated by multiplying <a>devicePixelRatio</a> 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.
+</p>
 
 <pre class="idl">
     dictionary ResizeObserverOptions {
@@ -231,6 +249,7 @@ interface ResizeObserverEntry {
     readonly attribute DOMRectReadOnly contentRect;
     readonly attribute ResizeObserverSize borderBoxSize;
     readonly attribute ResizeObserverSize contentBoxSize;
+    readonly attribute ResizeObserverSize devicePixelContentBoxSize;
 };
 </pre>
 
@@ -249,6 +268,9 @@ interface ResizeObserverEntry {
     : <dfn>contentBoxSize</dfn>
     ::
         {{Element}}'s <a>content rect</a> size when {{ResizeObserverCallback}} is invoked.
+    : <dfn>devicePixelContentBoxSize</dfn>
+    ::
+        {{Element}}'s <a>content rect</a> size in integral device pixels when {{ResizeObserverCallback}} is invoked.
 </div>
 
 <div dfn-type="method" dfn-for="ResizeObserverEntry">
@@ -264,15 +286,18 @@ interface ResizeObserverEntry {
         4. Set |this|.{{ResizeObserverEntry/contentBoxSize}} slot to result of <a href="#calculate-box-size">
             computing size given |target| and observedBox of "content-box"</a>.
 
-        5. Set |this|.{{ResizeObserverEntry/contentRect}} to logical |this|.{{ResizeObserverEntry/contentBoxSize}}.
+        5. Set |this|.{{ResizeObserverEntry/devicePixelContentBoxSize}} slot to result of <a href="#calculate-box-size">
+            computing size given |target| and observedBox of "device-pixel-content-box"</a>.
+
+        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|.<a>padding top</a>.
 
             2. Set |this|.|contentRect|.left to |target|.<a>padding left</a>.
 
-        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 <a>calculate depth for node</a> for |observation|.{{ResizeObservation/target}}.
 
         5. Set |shallowestTargetDepth| to |targetDepth| if |targetDepth| < |shallowestTargetDepth|
@@ -505,6 +532,12 @@ To <dfn>calculate box size</dfn>, given |target| and |observedBox|, run these st
 
             2. Set |computedSize|.blockSize to target's <a>content area</a> block length.
 
+        2. If |observedBox| is "device-pixel-content-box"
+
+            1. Set |computedSize|.inlineSize to target's <a>content area</a> inline length, in integral device pixels.
+
+            2. Set |computedSize|.blockSize to target's <a>content area</a> block length, in integral device pixels.
+
         3. return |computedSize|.
 
 <h3 id="lifetime">ResizeObserver Lifetime</h3>