1 files changed, 75 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html b/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html
new file mode 100644
index 0000000000..0b7a7bb3cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Serialization of basic shapes</title>
+<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-serialization"/>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script>
+function checkEquals(input, expected) {
+    test(function() {
+        let div = document.createElement('div');
+        div.style.clipPath = input;
+        let serialized = div.style.clipPath;
+        assert_equals(serialized, expected, input);
+    });
+}
+
+// Keywords get replaced by percentages in 2-value form
+checkEquals("circle(at left bottom)", "circle(at 0% 100%)");
+checkEquals("circle(at bottom left)", "circle(at 0% 100%)");
+checkEquals("circle(at right calc(10% + 5px))",
+            "circle(at 100% calc(10% + 5px))");
+checkEquals("ellipse(at left bottom)", "ellipse(at 0% 100%)");
+checkEquals("ellipse(at bottom left)", "ellipse(at 0% 100%)");
+checkEquals("ellipse(at right calc(10% + 5px))",
+            "ellipse(at 100% calc(10% + 5px))");
+
+// Only 2 or 4 value form allowed
+checkEquals("circle()", "circle()");
+checkEquals("circle(0px)", "circle(0px)");
+checkEquals("circle(closest-side)", "circle()");
+checkEquals("circle(farthest-side)",
+            "circle(farthest-side)");
+checkEquals("ellipse()", "ellipse()");
+checkEquals("ellipse(closest-side farthest-side)",
+            "ellipse(closest-side farthest-side)");
+
+
+checkEquals("circle(at top 0% right 5px)", "circle(at calc(100% - 5px) 0%)");
+checkEquals("ellipse(at top 0% right 10px)", "ellipse(at calc(100% - 10px) 0%)");
+// Remove defaults like closest-side
+checkEquals("circle(closest-side at center)",
+            "circle(at 50% 50%)");
+checkEquals("ellipse(closest-side closest-side at center)",
+            "ellipse(at 50% 50%)");
+
+// don't remove non defaults
+checkEquals("circle(farthest-side at center)",
+            "circle(farthest-side at 50% 50%)");
+checkEquals("circle(10px at center)",
+            "circle(10px at 50% 50%)");
+checkEquals("ellipse(farthest-side 10px at center)",
+            "ellipse(farthest-side 10px at 50% 50%)");
+// Ellipse can have 0 radii or two, not one. We cannot
+// eliminate a single closest-side if the other is different
+checkEquals("ellipse(closest-side farthest-side at 50% 50%)",
+            "ellipse(closest-side farthest-side at 50% 50%)");
+checkEquals("ellipse(closest-side 10% at 50% 50%)",
+            "ellipse(closest-side 10% at 50% 50%)");
+
+  // Transform to <length-percentage>.
+checkEquals("circle(at right 5px bottom 10px)",
+            "circle(at calc(100% - 5px) calc(100% - 10px))");
+checkEquals("ellipse(at right 5px bottom 10px)",
+            "ellipse(at calc(100% - 5px) calc(100% - 10px))");
+
+// Don't convert zero lengths to 0%
+checkEquals("circle(at right 5% top 0px)", "circle(at calc(95%) 0px)");
+checkEquals("ellipse(at right 5% top 0px)", "ellipse(at calc(95%) 0px)");
+
+// Transform calcs
+checkEquals("circle(at right calc(10% + 5px) bottom calc(10% + 5px))",
+            "circle(at calc(90% - 5px) calc(90% - 5px))");
+checkEquals("ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))",
+            "ellipse(at calc(90% - 5px) calc(90% - 5px))");
+</script>