forked from mirrors/gecko-dev
8f16e8d7b0
Automatic update from web-platform-testsCSS: Remove support for position values with 3 parts Intent: https://groups.google.com/a/chromium.org/d/msg/blink-dev/oBKMVCOX1sY/BLsXXiukAgAJ BUG=804187 Change-Id: I94e79b2b426250c521d0ebae1492571fde078f31 Reviewed-on: https://chromium-review.googlesource.com/1013459 Reviewed-by: Emil A Eklund <eae@chromium.org> Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Cr-Commit-Position: refs/heads/master@{#550915} -- wpt-commits: ff4cf69b8f1d705039d71ceef94dee04e74b35c9 wpt-pr: 10469
76 lines
3.2 KiB
HTML
76 lines
3.2 KiB
HTML
<!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>
|