[css-backgrounds-3] Add Oriol's variant and testcases to radius-expansion.html

Author: Loirooriol

css-backgrounds-3/radius-expansion.html

@@ -70,6 +70,10 @@
 		<input type="radio" name="algorithm" value="elika">
 		Elika’s Interpolation based on rounded/straight ratio
 	</label>
+	<label>
+		<input type="radio" name="algorithm" value="oriol">
+		Oriol's variant of current spec
+	</label>
 </form>
 <output id="output"></output>
 <script>
@@ -82,10 +86,15 @@
   {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: 60, spread: 30, borderRadius: "20px 20px 40px 40px"},
   {width: 500, height: 50, spread: 30, borderRadius: "1px 1px 49px 49px"},
+  {width: 500, height: 60, spread: 30, borderRadius: "0px 0px 30px 30px"},
+  {width: 250, height: 35, spread: 50, borderRadius: "0px 0px 25px 25px"},
   {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: 0, height: 0, spread: 30, borderRadius: "50px 0px 0px 0px"},
+  {width: 500, height: 500, spread: 30, borderRadius: "50px"},
 ];
 
 function show({incremental = false} = {}) {
@@ -278,6 +287,21 @@
 
 		}
 	}
+	else if (algorithm === "oriol") {
+		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) * (1 - coverage);
+				return value + testCase.spread * (1 - r**3);
+			});
+		}
+	}
 
 	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`;
 }