[resize-observer-1] Fix and improve "calculate box size"

 - Define computedSize
 - Ensure all paths return
 - Link more terms
 - Use switch and "otherwise".

Fixes w3c#7615.
Fixes w3c#7616.

Author: Loirooriol

resize-observer-1/Overview.bs

@@ -533,41 +533,54 @@ these elements do not use standard CSS box model.
 
 To <dfn>calculate box size</dfn>, given |target| and |observedBox|, run these steps:
 
-    1. If |target| is an {{SVGGraphicsElement}} that does not have an associated CSS layout box
+    1. Let |computedSize| be a new {{ResizeObserverSize}} object.
 
-        1. If |observedBox| is "border-box" or "content-box"
+    2. If |target| is an {{SVGGraphicsElement}} that does not have an associated CSS layout box:
 
-            1. Set |computedSize|.inlineSize to |target|'s <a>bounding box</a> inline length.
+        <dl class=switch>
+          <dt>If |observedBox| is {{"border-box"}}
 
-            2. Set |computedSize|.blockSize to |target|'s <a>bounding box</a> block length.
+          <dt>If |observedBox| is {{"content-box"}}
 
-        2. 1. If |observedBox| is "device-pixel-content-box"
+          <dd>
+            1. Set |computedSize|'s {{ResizeObserverSize/inlineSize}} attribute to |target|'s <a>bounding box</a> inline length.
 
-            1. Set |computedSize|.inlineSize to |target|'s <a>bounding box</a> inline length, in integral device pixels.
+            2. Set |computedSize|'s {{ResizeObserverSize/blockSize}} attribute to |target|'s <a>bounding box</a> block length.
 
-            2. Set |computedSize|.blockSize to |target|'s <a>bounding box</a> block length, in integral device pixels.
+          <dt>If |observedBox| is {{"device-pixel-content-box"}}
 
-    2. If |target| is not an {{SVGGraphicsElement}} or |target| is an {{SVGGraphicsElement}} that has an associated CSS layout box
+          <dd>
+            1. Set |computedSize|'s {{ResizeObserverSize/inlineSize}} attribute to |target|'s <a>bounding box</a> inline length, in integral device pixels.
 
-        1. If |observedBox| is "border-box"
+            2. Set |computedSize|'s {{ResizeObserverSize/blockSize}} attribute to |target|'s <a>bounding box</a> block length, in integral device pixels.
+        </dl>
 
-            1. Set |computedSize|.inlineSize to target's <a>border area</a> inline length.
+    3. Otherwise:
 
-            2. Set |computedSize|.blockSize to target's <a>border area</a> block length.
+        <dl class=switch>
+          <dt>If |observedBox| is {{"border-box"}}
 
-        2. If |observedBox| is "content-box"
+          <dd>
+            1. Set |computedSize|'s {{ResizeObserverSize/inlineSize}} attribute to |target|'s <a>border area</a> inline length.
 
-            1. Set |computedSize|.inlineSize to target's <a>content area</a> inline length.
+            2. Set |computedSize|'s {{ResizeObserverSize/blockSize}} attribute to |target|'s <a>border area</a> block length.
 
-            2. Set |computedSize|.blockSize to target's <a>content area</a> block length.
+          <dt>If |observedBox| is {{"content-box"}}
 
-        2. If |observedBox| is "device-pixel-content-box"
+          <dd>
+            1. Set |computedSize|'s {{ResizeObserverSize/inlineSize}} attribute to |target|'s <a>content area</a> inline length.
 
-            1. Set |computedSize|.inlineSize to target's <a>content area</a> inline length, in integral device pixels.
+            2. Set |computedSize|'s {{ResizeObserverSize/blockSize}} attribute to |target|'s <a>content area</a> block length.
 
-            2. Set |computedSize|.blockSize to target's <a>content area</a> block length, in integral device pixels.
+          <dt>If |observedBox| is {{"device-pixel-content-box"}}
 
-        3. return |computedSize|.
+          <dd>
+            1. Set |computedSize|'s {{ResizeObserverSize/inlineSize}} attribute to |target|'s <a>content area</a> inline length, in integral device pixels.
+
+            2. Set |computedSize|'s {{ResizeObserverSize/blockSize}} attribute to |target|'s <a>content area</a> block length, in integral device pixels.
+        </dl>
+
+    4. Return |computedSize|.
 
 <h3 id="lifetime">ResizeObserver Lifetime</h3>