[css-backgrounds-3] Add additional examples for w3c#7103.

This contains the update originally in
w3c#7103 (comment)
and adds @fantasai's proposal to this set of examples.

Author: dbaron

css-backgrounds-3/radius-expansion-continuity.html

@@ -65,6 +65,10 @@
     <input type="radio" name="algorithm" value="cubic-edge-portion">
     Rounded portion of edges (cubic)
   </label>
+  <label>
+    <input type="radio" name="algorithm" value="interpolate-straight-rounded">
+    Interpolation based on straight/rounded (linear)
+  </label>
 </form>
 <div id="output"></div>
 <script>
@@ -209,7 +213,6 @@
       break;
     }
     case "percentage-same-axis": {
-      debugger;
       const xRatio = 1 + 2 * testCase.spread / testCase.width;
       const yRatio = 1 + 2 * testCase.spread / testCase.height;
       const map = ([x, y]) => [x * xRatio, y * yRatio];
@@ -222,7 +225,6 @@
       break;
     }
     case "percentage-same-axis-ratio": {
-      debugger;
       const xRatio = 1 + 2 * testCase.spread / testCase.width;
       const yRatio = 1 + 2 * testCase.spread / testCase.height;
       const map = ([x, y]) => [x * xRatio, y * yRatio];
@@ -261,15 +263,16 @@
       break;
     }
     case "linear-edge-portion":
-    case "cubic-edge-portion": {
+    case "cubic-edge-portion":
+    case "interpolate-straight-rounded": {
       // The portion of each edge that is rounded
       const portion = {
         top:    (radii.topLeft[0] + radii.topRight[0]) / testCase.width,
         right:  (radii.topRight[1] + radii.bottomRight[1]) / testCase.height,
         bottom: (radii.bottomLeft[0] + radii.bottomRight[0]) / testCase.width,
         left:   (radii.topLeft[1] + radii.bottomLeft[1]) / testCase.height,
       };
-      const map = (value, cap) => {
+      const map = (value, cap, idx) => {
         if (value >= testCase.spread) {
           return value + testCase.spread;
         }
@@ -282,13 +285,25 @@
             let r = Math.max(value / testCase.spread, cap);
             return value + testCase.spread * (1 + (r - 1)**3);
           }
+          case "interpolate-straight-rounded": {
+            const straight = 1 - cap;
+            const ratio = Math.min(straight / cap, 1);
+
+            const r = value / testCase.spread;
+            const cubic = value + testCase.spread * (1 + (r - 1)**3);
+
+            const pctratio = 1 + 2 * testCase.spread / ((idx == 0) ? testCase.width : testCase.height);
+            const percentage = value * pctratio;
+
+            return (1 - ratio) * percentage + ratio * cubic;
+          }
         }
       }
       r = {
-        topLeft: radii.topLeft.map((r) => map(r, Math.max(portion.top, portion.left))),
-        topRight: radii.topRight.map((r) => map(r, Math.max(portion.top, portion.right))),
-        bottomLeft: radii.bottomLeft.map((r) => map(r, Math.max(portion.bottom, portion.left))),
-        bottomRight: radii.bottomRight.map((r) => map(r, Math.max(portion.bottom, portion.right))),
+        topLeft: radii.topLeft.map((r, idx) => map(r, Math.max(portion.top, portion.left, idx))),
+        topRight: radii.topRight.map((r, idx) => map(r, Math.max(portion.top, portion.right, idx))),
+        bottomLeft: radii.bottomLeft.map((r, idx) => map(r, Math.max(portion.bottom, portion.left, idx))),
+        bottomRight: radii.bottomRight.map((r, idx) => map(r, Math.max(portion.bottom, portion.right, idx))),
       };
       break;
     }