diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html | 76 |
1 files changed, 76 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..5e4842d234 --- /dev/null +++ b/testing/web-platform/tests/css/css-shapes/basic-shape-circle-ellipse-serialization.html @@ -0,0 +1,76 @@ +<!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(at 50% 50%)"); +checkEquals("circle(0px)", "circle(0px at 50% 50%)"); +checkEquals("circle(closest-side)", "circle(at 50% 50%)"); +checkEquals("circle(farthest-side)", + "circle(farthest-side at 50% 50%)"); +checkEquals("ellipse()", "ellipse(at 50% 50%)"); +checkEquals("ellipse(closest-side farthest-side)", + "ellipse(closest-side farthest-side at 50% 50%)"); + + +checkEquals("circle(at top 0% right 5px)", "circle(at right 5px top 0%)"); +checkEquals("ellipse(at top 0% right 10px)", "ellipse(at right 10px top 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%)"); + +// Don't transform nonzero lengths +checkEquals("circle(at right 5px bottom 10px)", + "circle(at right 5px bottom 10px)"); +checkEquals("ellipse(at right 5px bottom 10px)", + "ellipse(at right 5px bottom 10px)"); + +// Convert keyword-percentage pairs to plain percentages +// Convert zero lengths to 0% +checkEquals("circle(at right 5% top 0px)", "circle(at 95% 0%)"); +checkEquals("ellipse(at right 5% top 0px)", "ellipse(at 95% 0%)"); + +// Don't transform calcs +checkEquals("circle(at right calc(10% + 5px) bottom calc(10% + 5px))", + "circle(at right calc(10% + 5px) bottom calc(10% + 5px))"); +checkEquals("ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))", + "ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))"); +</script> |