[css-backgrounds] Add additional variations and one additional testcase for w3c#7103.

Author: dbaron

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

@@ -59,15 +59,27 @@
   </label>
   <label>
     <input type="radio" name="algorithm" value="linear-edge-portion">
-    Rounded portion of edges (linear)
+    Cap by rounded portion of edges (linear)
   </label>
   <label>
     <input type="radio" name="algorithm" value="cubic-edge-portion">
-    Rounded portion of edges (cubic)
+    Cap by rounded portion of edges (cubic)
   </label>
   <label>
-    <input type="radio" name="algorithm" value="interpolate-straight-rounded">
-    Interpolation based on straight/rounded (linear)
+    <input type="radio" name="algorithm" value="linear-edge-ratio">
+    Cap by rounded/straight ratio of edges (linear)
+  </label>
+  <label>
+    <input type="radio" name="algorithm" value="cubic-edge-ratio">
+    Cap by rounded/straight ratio of edges (cubic)
+  </label>
+  <label>
+    <input type="radio" name="algorithm" value="interpolate-straight-rounded-portion">
+    Interpolation based on rounded portion of edges
+  </label>
+  <label>
+    <input type="radio" name="algorithm" value="interpolate-straight-rounded-ratio">
+    Interpolation based on rounded/straight ratio
   </label>
 </form>
 <div id="output"></div>
@@ -81,6 +93,7 @@
   {width: 200, height: 40, spread: 50, borderRadius: "100px / 20px"},
   {width: 200, height: 40, spread: 50, borderRadius: "20px / 4px"},
   {width: 500, height: 50, spread: 30, borderRadius: "15px"},
+  {width: 500, height: 50, spread: 30, borderRadius: "25px"},
   {width: 500, height: 50, spread: 30, borderRadius: "1px 1px 49px 49px"},
   {width: 500, height: 50, spread: 30, borderRadius: "50%"},
   {width: 500, height: 50, spread: 30, borderRadius: "50% 50% 1px 50%"},
@@ -264,30 +277,41 @@
     }
     case "linear-edge-portion":
     case "cubic-edge-portion":
-    case "interpolate-straight-rounded": {
+    case "linear-edge-ratio":
+    case "cubic-edge-ratio":
+    case "interpolate-straight-rounded-portion":
+    case "interpolate-straight-rounded-ratio": {
       // 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, idx) => {
+      const map = (value, ratio, idx) => {
         if (value >= testCase.spread) {
           return value + testCase.spread;
         }
         switch (algorithm.value) {
+          case "linear-edge-ratio":
+            ratio = Math.min(ratio / (1 - ratio), 1);
+            // fallthrough
           case "linear-edge-portion": {
             let r = value / testCase.spread;
-            return value + testCase.spread * Math.max(1 + (r - 1)**3, cap);
+            return value + testCase.spread * Math.max(1 + (r - 1)**3, ratio);
           }
+          case "cubic-edge-ratio":
+            ratio = Math.min(ratio / (1 - ratio), 1);
+            // fallthrough
           case "cubic-edge-portion": {
-            let r = Math.max(value / testCase.spread, cap);
+            let r = Math.max(value / testCase.spread, ratio);
             return value + testCase.spread * (1 + (r - 1)**3);
           }
-          case "interpolate-straight-rounded": {
-            const straight = 1 - cap;
-            const ratio = Math.min(straight / cap, 1);
+          case "interpolate-straight-rounded-ratio":
+            ratio = 1 - Math.min((1 - ratio) / ratio, 1);
+            // fallthrough
+          case "interpolate-straight-rounded-portion": {
+            ratio = 1 - ratio;
 
             const r = value / testCase.spread;
             const cubic = value + testCase.spread * (1 + (r - 1)**3);