basic-shape-circle-ellipse-serialization.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-shapes/basic-shape-circle-ellipse-serialization.html - WPT Dashboard Interop Dashboard

<!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>