summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html
blob: 0b7a7bb3ccdbbccdacf2cab55d9a8d1dc3c1b6ed (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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>