Update radius-expansion.html with new algorithm and testcases

The new testcases are from https://yarusome.github.io/box-shadow-proposal/

Co-authored-by: fantasai <[email protected]>
Co-authored-by: yarusome <[email protected]>

Author: 3 people

css-backgrounds-3/radius-expansion.html

@@ -72,7 +72,11 @@
 	</label>
 	<label>
 		<input type="radio" name="algorithm" value="oriol">
-		Oriol's variant of current spec
+		Oriol's variant of current spec (adding a cubic factor)
+	</label>
+	<label>
+		<input type="radio" name="algorithm" value="oriol2">
+		Oriol's variant of current spec (adding a linear factor)
 	</label>
 </form>
 <output id="output"></output>
@@ -93,6 +97,8 @@
   {width: 500, height: 50, spread: 30, borderRadius: "50%"},
   {width: 500, height: 50, spread: 30, borderRadius: "50% 50% 1px 50%"},
   {width: 200, height: 40, spread: 50, borderRadius: "0 100% 0 100%"},
+  {width: 200, height: 40, spread: 50, borderRadius: "10% 90% / 5%"},
+  {width: 200, height: 40, spread: 50, borderRadius: "0 50% / 50%"},
   {width: 0, height: 0, spread: 30, borderRadius: "50px 0px 0px 0px"},
   {width: 500, height: 500, spread: 30, borderRadius: "50px"},
 ];
@@ -302,6 +308,21 @@
 			});
 		}
 	}
+	else if (algorithm === "oriol2") {
+		for (let corner in radii) {
+			let coverage = Math.max(
+				2 * radii[corner][0] / testCase.width,
+				2 * radii[corner][1] / testCase.height,
+			) || 0;
+			r[corner] = radii[corner].map(value => {
+				if (value >= testCase.spread || coverage >= 1) {
+					return value + testCase.spread;
+				}
+				let r = 1 - value / testCase.spread;
+				return value + testCase.spread * (1 - r**3 * (1 - coverage));
+			});
+		}
+	}
 
 	return `${r.topLeft[0]}px ${r.topRight[0]}px ${r.bottomRight[0]}px ${r.bottomLeft[0]}px / ${r.topLeft[1]}px ${r.topRight[1]}px ${r.bottomRight[1]}px ${r.bottomLeft[1]}px`;
 }
@@ -312,4 +333,4 @@
 </script>
 
 </body>
-</html>
+</html>