[Resize-Observer] Updated spec text to reflect IDL changes and added example

Author: Greg Whitworth

resize-observer-1/Overview.bs

@@ -36,6 +36,10 @@ urlPrefix: https://www.w3.org/TR/SVG2/#InterfaceSVGGraphicsElement
         url: #InterfaceSVGGraphicsElement; type: dfn; text: SVGGraphicsElement
 urlPrefix: https://www.w3.org/TR/css3-multicol/
     url: #; type: dfn; text: Multi-column
+urlPrefix: https://www.w3.org/TR/css-overflow-3/
+    url: #scrollport; type:dfn; text: scrollport
+urlPrefix: https://www.w3.org/TR/css-overflow-3/
+    url: #scroll-container; type:dfn; text: scroll container
 </pre>
 <pre class=link-defaults>
 spec:dom; type:interface; text:Document
@@ -137,7 +141,7 @@ more boxes than solely the {{content-box}} ResizeObserver takes one or more of t
 
 * {{border-box}}  : the {{border-box}} as defined in CSS2
 * {{content-box}} : the {{content-box}} as defined in CSS2
-* {{content-box}} : the {{scrollport}} of the {{scroll container}}
+* {{scroll-box}}  : the <a>scrollport</a> of the <a>scroll container</a>
 
 <pre class="idl">
     dictionary ResizeObserverOptions {
@@ -147,6 +151,23 @@ more boxes than solely the {{content-box}} ResizeObserver takes one or more of t
 
 <p class='issue'>Is size the right name here? It's actually denoting which layout box we want to observe, possibly `box`?</p>
 
+This section is non-normative. An author may desire to observe more than one CSS box, as such the author 
+can provide one or many boxes to be observed. For example:
+
+<pre highlight="js">
+    // Observe the content-box
+    ro.observe(document.querySelector('#menu'));
+
+    // Observe the content and the border box
+    ro.observe(document.querySelector('#menu'), ['content-box', 'border-box']);
+
+    // Observe just the border box
+    ro.observe(document.querySelector('#menu'), 'border-box');
+</pre>
+
+<p class="note">This does not have any impact on which box dimensions are returned to the defined callback when the event is fired,
+                it solely defines which boxes the author wishes to observe layout changes on.</p>
+
 <pre class="idl">
 [Exposed=(Window),
  Constructor(ResizeObserverCallback callback)]
@@ -225,13 +246,13 @@ interface ResizeObserverEntry {
         The {{Element}} whose size has changed.
     : <dfn>borderBoxSize</dfn>
     ::
-        {{Element}}'s <a>border box rect</a> when {{ResizeObserverCallback}} is invoked.
+        {{Element}}'s <a>border box</a> rect 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.
+        {{Element}}'s <a>scrollport</a> when {{ResizeObserverCallback}} is invoked.
 </div>
 
 <div dfn-type="method" dfn-for="ResizeObserverEntry">
@@ -251,6 +272,12 @@ interface ResizeObserverEntry {
 
             4. Set |this|.|contentRect|.left to |target|.<a>padding left</a>.
 
+            5. To set the {{borderBoxSize}}, {{contentSize}}, and {{scrollSize}} of the current |target| do the following:
+
+                1. Set |this|.inlineSize to the box's inline edge size
+
+                2. Set |this|.blockSize to the box's block edge size
+
         4. If |target| is an SVG element do these steps:
 
             1. Set |this|.|contentRect|.top and |this|.contentRect.left to 0.
@@ -259,6 +286,12 @@ interface ResizeObserverEntry {
 
             3. Set |this|.|contentRect|.height to |target|.<a>bounding box</a>.height.
 
+            4. To set the {{borderBoxSize}}, {{contentSize}}, and {{scrollSize}} of the current |target| do the following:
+
+                1. Set |this|.inlineSize to the box's inline bounding box size
+
+                2. Set |this|.blockSize to the box's block bounding box size
+
 </div>
 
 <pre class="idl">
@@ -268,7 +301,7 @@ interface ResizeObserverEntry {
     };
 </pre>
 
-<p class="issue">We're covering the dimensions of the extra boxes, do we want to also cover their positions?</p>
+<p class="issue">We're covering the dimensions of the extra boxes, do we want to also cover their positions similiar to that of the initial contentRect?</p>
 
 <h3 id="resize-observation-interface">ResizeObservation</h3>
 ResizeObservation holds observation information for a single {{Element}}. This