clip-path-shape-parsing.html

mozilla-central/testing/web-platform/tests/css/css-masking/parsing/clip-path-shape-parsing.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Web Painting

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-masking/parsing/clip-path-shape-parsing.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function">

<meta name="assert" content="clip-path supports the full shape() grammar.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/parsing-testcommon.js"></script>

</head>

<body>

<script>

// basic

test_valid_value("clip-path", "shape(from 0px 0px, line to 10px 10px)");

test_valid_value("clip-path", "shape(evenodd from 0px 0px, line to 10px 10px)");

test_valid_value("clip-path", "shape(nonzero from 0px 0px, line to 10px 10px)", "shape(from 0px 0px, line to 10px 10px)");

test_valid_value("clip-path", "shape(  from 0px    0px, line  to 10px  10px     )", "shape(from 0px 0px, line to 10px 10px)");

test_valid_value("clip-path", "shape(from 1em 50%, line to 10px 10px)");

test_valid_value("clip-path", "shape(EvenOdd from 0px 0Px, CLOSE)", "shape(evenodd from 0px 0px, close)");

test_valid_value("clip-path", "shape(from 1ch 50px, line to 10rem 10vh)");

test_valid_value("clip-path", "shape(from 1ch -50px, line to -10% 12px)");

// segment types

test_valid_value("clip-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)");

test_valid_value("clip-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)");

test_valid_value("clip-path", "shape(from 10px 10px, vline by 5%, hline to 1vw)");

test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1%)");

test_valid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1px / 20vh 1ch)");

test_valid_value("clip-path", "shape(from 10px 10px, curve by 50px 20px with 10rem 1px / 20vh 1ch)");

test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px with 10rem 1%)");

test_valid_value("clip-path", "shape(from 10px 10px, smooth to 50px 1pt)");

test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px)", "shape(from 10px 10px, arc to 50px 1pt of 10px)");

test_valid_value("clip-path", "shape(from 10px 10px, arc to 50px 1pt of 10px 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 1pt of 10px)");

test_valid_value("clip-path", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)", "shape(from 10% 1rem, arc to 50px 1pt of 20% cw large rotate 25deg)");

test_valid_value("clip-path", "shape(evenodd from 0px 0px, close)");

// nonsense

test_invalid_value("clip-path", "shape(evenodd from 0px 0px, close path)");

test_invalid_value("clip-path", "shape(nonzero, from 0px 0px, line to 10px 10px)");

test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem)");

test_invalid_value("clip-path", "shape(from 10px 10px, curve to 50px 20px via 10rem 1% 12px)");

test_invalid_value("clip-path", "shape(from 10px 10px, hline byy 10px, vline to 5rem)");

test_invalid_value("clip-path", "shape(from 10px 10px, vline by 5% hline by 1vw");

test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem)");

test_invalid_value("clip-path", "shape(from 10px 10px, smooth to 50px 20px via 10rem 2px 2pt)");

test_invalid_value("clip-path", "shape()");

test_invalid_value("clip-path", "shape(from)");

test_invalid_value("clip-path", "shape(from 0px)");

test_invalid_value("clip-path", "shape(from 0px 20px,)");

test_invalid_value("clip-path", "shape(close)");

test_invalid_value("clip-path", "shape(nonzero, close)");

test_invalid_value("clip-path", "shape(from 0px 10px)");

test_invalid_value("clip-path", "shape(allkindsofnonsense)");

test_invalid_value("clip-path", "shape(arc)");

</script>

</body>

</html>