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

This adds the additional examples originally added in
w3c#7103 (comment)

This adds 3 additional options.  One of them is the old (discontinuous)
behavior which is still what non-Chromium engines implement (along with
old Chromium). The other two are an additional capping method that I
came up with (with 2 variants).

Author: dbaron

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

@@ -33,6 +33,10 @@
     <input type="radio" name="algorithm" value="increase-by-spread">
     Increase radius by spread
   </label>
+  <label>
+    <input type="radio" name="algorithm" value="old-spec">
+    Old spec (discontinuous)
+  </label>
   <label>
     <input type="radio" name="algorithm" value="current-spec">
     Current spec
@@ -53,6 +57,14 @@
     <input type="radio" name="algorithm" value="percentage-same-axis-ratio">
     Percentage of same axis,<br>ceiling to keep ratio if possible
   </label>
+  <label>
+    <input type="radio" name="algorithm" value="linear-edge-portion">
+    Rounded portion of edges (linear)
+  </label>
+  <label>
+    <input type="radio" name="algorithm" value="cubic-edge-portion">
+    Rounded portion of edges (cubic)
+  </label>
 </form>
 <div id="output"></div>
 <script>
@@ -142,6 +154,20 @@
       };
       break;
     }
+    case "old-spec": {
+      const map = (value) => {
+        if (value == 0)
+          return 0;
+        return value + testCase.spread;
+      }
+      r = {
+        topLeft: radii.topLeft.map(map),
+        topRight: radii.topRight.map(map),
+        bottomLeft: radii.bottomLeft.map(map),
+        bottomRight: radii.bottomRight.map(map),
+      };
+      break;
+    }
     case "current-spec": {
       const map = (value) => {
         if (value >= testCase.spread) {
@@ -234,6 +260,38 @@
       adjust("topRight", "bottomRight", 1);
       break;
     }
+    case "linear-edge-portion":
+    case "cubic-edge-portion": {
+      // 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) => {
+        if (value >= testCase.spread) {
+          return value + testCase.spread;
+        }
+        switch (algorithm.value) {
+          case "linear-edge-portion": {
+            let r = value / testCase.spread;
+            return value + testCase.spread * Math.max(1 + (r - 1)**3, cap);
+          }
+          case "cubic-edge-portion": {
+            let r = Math.max(value / testCase.spread, cap);
+            return value + testCase.spread * (1 + (r - 1)**3);
+          }
+        }
+      }
+      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))),
+      };
+      break;
+    }
     default: {
       throw "Not implemented: " + algorithm.value;
       break;