Added text to start passing new IDL info across the API

Author: Greg Whitworth

resize-observer-1/Overview.bs

@@ -139,8 +139,6 @@ more boxes than solely the {{content-box}} ResizeObserver takes one or more of t
 * {{content-box}} : the {{content-box}} as defined in CSS2
 * {{content-box}} : the {{scrollport}} of the {{scroll container}}
 
-<p class="issue">Is 'pixel-snapped-box' the best name?</p>
-
 <pre class="idl">
     dictionary ResizeObserverOptions {
         (ResizeObserverSizeOptions or sequence&lt;ResizeObserverSizeOptions>) size = "content-box";
@@ -168,9 +166,7 @@ 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>
+    : <dfn method>observe(target, options)</dfn>
     ::
         Adds target to the list of observed elements.
 
@@ -215,7 +211,9 @@ This callback delivers {{ResizeObserver}}'s notifications. It is invoked by a
 interface ResizeObserverEntry {
     readonly attribute Element target;
     readonly attribute DOMRectReadOnly contentRect;
-    readonly attribute ResizeObserverSize boxSize;
+    readonly attribute ResizeObserverSize borderBoxSize;
+    readonly attribute ResizeObserverSize contentSize;
+    readonly attribute ResizeObserverSize scrollSize;
 };
 </pre>
 
@@ -225,9 +223,15 @@ interface ResizeObserverEntry {
     : <dfn>target</dfn>
     ::
         The {{Element}} whose size has changed.
+    : <dfn>borderBoxSize</dfn>
+    ::
+        {{Element}}'s <a>border box rect</a> when {{ResizeObserverCallback}} is invoked.
     : <dfn>contentRect</dfn>
     ::
         {{Element}}'s <a>content rect</a> when {{ResizeObserverCallback}} is invoked.
+    : <dfn>scrollSize</dfn>
+    ::
+        {{Element}}'s <a>scroll port</a> when {{ResizeObserverCallback}} is invoked.
 </div>
 
 <div dfn-type="method" dfn-for="ResizeObserverEntry">
@@ -239,21 +243,21 @@ interface ResizeObserverEntry {
 
         3. If |target| is not an SVG element do these steps:
 
-            1. Set |this|.|layoutBox|.width to |target|.<a>content width</a>.
+            1. Set |this|.|contentRect|.width to |target|.<a>content width</a>.
 
-            2. Set |this|.|layoutBox|.height to |target|.<a>content height</a>.
+            2. Set |this|.|contentRect|.height to |target|.<a>content height</a>.
 
-            3. Set |this|.|layoutBox|.top to |target|.<a>padding top</a>.
+            3. Set |this|.|contentRect|.top to |target|.<a>padding top</a>.
 
-            4. Set |this|.|layoutBox|.left to |target|.<a>padding left</a>.
+            4. Set |this|.|contentRect|.left to |target|.<a>padding left</a>.
 
         4. If |target| is an SVG element do these steps:
 
-            1. Set |this|.|layoutBox|.top and |this|.contentRect.left to 0.
+            1. Set |this|.|contentRect|.top and |this|.contentRect.left to 0.
 
-            2. Set |this|.|layoutBox|.width to |target|.<a>bounding box</a>.width.
+            2. Set |this|.|contentRect|.width to |target|.<a>bounding box</a>.width.
 
-            3. Set |this|.|layoutBox|.height to |target|.<a>bounding box</a>.height.
+            3. Set |this|.|contentRect|.height to |target|.<a>bounding box</a>.height.
 
 </div>
 
@@ -264,6 +268,8 @@ interface ResizeObserverEntry {
     };
 </pre>
 
+<p class="issue">We're covering the dimensions of the extra boxes, do we want to also cover their positions?</p>
+
 <h3 id="resize-observation-interface">ResizeObservation</h3>
 ResizeObservation holds observation information for a single {{Element}}. This
 interface is not visible to Javascript.