[resize-observer] Added layoutBox to resizeObserver method

Author: Greg Whitworth

resize-observer-1/Overview.bs

@@ -4,8 +4,9 @@ Shortname: resize-observer
 Level: 1
 Status: ED
 Work Status: Exploring
-ED: https://drafts.csswg.org/resize-observer-1/
+ED: https://drafts.csswg.org/resize-observer/index.html
 Group: CSSWG
+URL: https://drafts.csswg.org/resize-observer/index.html
 Editor: Greg Whitworth, Microsoft, gwhit@microsoft.com
 Former Editor: Aleks Totic, Google, atotic@google.com
 Abstract: This specification describes an API for observing changes to Element's size.
@@ -126,9 +127,10 @@ The ResizeObserver interface is used to observe changes to {{Element}}'s
 It is modeled after {{MutationObserver}} and <a>IntersectionObserver</a>.
 
 <pre class="idl">
-[Constructor(ResizeObserverCallback callback),
-    Exposed=Window]
+[Exposed=(Window),
+ Constructor(ResizeObserverCallback callback, DOMString layoutBox)]
 interface ResizeObserver {
+    DOMString layoutBox;
     void observe(Element target);
     void unobserve(Element target);
     void disconnect();
@@ -144,6 +146,8 @@ interface ResizeObserver {
 
         3. Add |this| to {{Document}}'s {{Document/resizeObservers}} slot.
 
+        4. Set layoutBox to value provided if it is "padding-box", "border-box", "content-box". If the value is not one of these, use the default value of "content-box".
+
     : <dfn method>observe(target)</dfn>
     ::
         Adds target to the list of observed elements.
@@ -208,23 +212,25 @@ interface ResizeObserverEntry {
 
         2. Set |this| {{ResizeObserverEntry/target}} slot to |target|.
 
+        3. Set the |layoutBox| to the value provided by the author utilizing the rect of same name for steps 3 and 4.
+
         3. If |target| is not an SVG element do these steps:
 
-            1. Set |this|.contentRect.width to |target|.<a>content width</a>.
+            1. Set |this|.|layoutBox|.width to |target|.<a>content width</a>.
 
-            2. Set |this|.contentRect.height to |target|.<a>content height</a>.
+            2. Set |this|.|layoutBox|.height to |target|.<a>content height</a>.
 
-            3. Set |this|.contentRect.top to |target|.<a>padding top</a>.
+            3. Set |this|.|layoutBox|.top to |target|.<a>padding top</a>.
 
-            4. Set |this|.contentRect.left to |target|.<a>padding left</a>.
+            4. Set |this|.|layoutBox|.left to |target|.<a>padding left</a>.
 
         4. If |target| is an SVG element do these steps:
 
-            1. Set |this|.contentRect.top and |this|.contentRect.left to 0.
+            1. Set |this|.|layoutBox|.top and |this|.contentRect.left to 0.
 
-            2. Set |this|.contentRect.width to |target|.<a>bounding box</a>.width.
+            2. Set |this|.|layoutBox|.width to |target|.<a>bounding box</a>.width.
 
-            3. Set |this|.contentRect.height to |target|.<a>bounding box</a>.height.
+            3. Set |this|.|layoutBox|.height to |target|.<a>bounding box</a>.height.
 
 </div>