eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-01 20:17:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tests: Import some css-shapes tests

Browse Source
This commit is contained in:
Callum Law
2025-10-17 00:37:40 +13:00
committed by Tim Ledbetter
parent 383dd28217
commit fb64be2f78
Notes: github-actions[bot] 2025-10-17 10:11:54 +00:00 
Author: https://github.com/Calme1709
Commit: https://github.com/LadybirdBrowser/ladybird/commit/fb64be2f788
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6493
Reviewed-by: https://github.com/tcl3 ✅
70 changed files with 2711 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/circle-function-computed.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: the computed value of the circle() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-circle">
<meta name="assert" content="Tests parsing of the circle() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("shape-outside", "circle()");
test_computed_value("shape-outside", "circle(1px)");
test_computed_value("shape-outside", "circle(20px at center)", "circle(20px at 50% 50%)");
test_computed_value("shape-outside", "circle(at 10% 20%)");
test_computed_value("shape-outside", "circle(4% at top right)", "circle(4% at 100% 0%)");
test_computed_value("shape-outside", "circle(calc(100% - 20px) at calc(100% - 20px) calc(100% / 4))", "circle(calc(100% - 20px) at calc(100% - 20px) 25%)");
test_computed_value("shape-outside", "circle(closest-corner at center)", "circle(closest-corner at 50% 50%)");
test_computed_value("shape-outside", "circle(closest-corner at 20px 50px)", "circle(closest-corner at 20px 50px)");
test_computed_value("shape-outside", "circle(closest-side at center)", "circle(at 50% 50%)");
test_computed_value("shape-outside", "circle(closest-side at 20px 30%)", "circle(at 20px 30%)");
test_computed_value("shape-outside", "circle(farthest-corner at center top)", "circle(farthest-corner at 50% 0%)");
test_computed_value("shape-outside", "circle(farthest-corner at center)", "circle(farthest-corner at 50% 50%)");
test_computed_value("shape-outside", "circle(farthest-side at center top)", "circle(farthest-side at 50% 0%)");
test_computed_value("shape-outside", "circle(farthest-side at center)", "circle(farthest-side at 50% 50%)");
</script>
</body>
</html>

26
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/circle-function-invalid.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the circle() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-circle">
<meta name="assert" content="Tests parsing of the circle() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("shape-outside", "circle(123)");
test_invalid_value("shape-outside", "circle(at)");
test_invalid_value("shape-outside", "circle(4% 20%)");
test_invalid_value("shape-outside", "circle(4% 20% at center)");
test_invalid_value("shape-outside", "circle(4px 20px)");
test_invalid_value("shape-outside", "circle(4px, 20px)");
test_invalid_value("shape-outside", "circle(at 4px, 20px)");
test_invalid_value("shape-outside", "circle(-10px at 20px 30px)");
test_invalid_value("shape-outside", "circle(-10% at 20% 30%)");
test_invalid_value("shape-outside", "circle(1% 2% at 0% 100%)");
</script>
</body>
</html>

32
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/circle-function-valid.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the circle() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-circle">
<meta name="assert" content="Tests parsing of the circle() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_valid_value("shape-outside", "circle()");
test_valid_value("shape-outside", "circle(1px)");
test_valid_value("shape-outside", "circle(20px at center)", "circle(20px at 50% 50%)");
test_valid_value("shape-outside", "circle(at 10% 20%)");
test_valid_value("shape-outside", "circle(4% at top right)", "circle(4% at 100% 0%)");
test_valid_value("shape-outside", "circle(calc(100% - 20px) at calc(100% - 20px) calc(100% / 4))", "circle(calc(100% - 20px) at calc(100% - 20px) calc(25%))");
test_valid_value("shape-outside", "circle(closest-corner at center)", "circle(closest-corner at 50% 50%)");
test_valid_value("shape-outside", "circle(closest-corner at 20px 50px)", "circle(closest-corner at 20px 50px)");
test_valid_value("shape-outside", "circle(closest-side at center)", "circle(at 50% 50%)");
test_valid_value("shape-outside", "circle(closest-side at 20px 30%)", "circle(at 20px 30%)");
test_valid_value("shape-outside", "circle(farthest-corner at center top)", "circle(farthest-corner at 50% 0%)");
test_valid_value("shape-outside", "circle(farthest-corner at center)", "circle(farthest-corner at 50% 50%)");
test_valid_value("shape-outside", "circle(farthest-side at center top)", "circle(farthest-side at 50% 0%)");
test_valid_value("shape-outside", "circle(farthest-side at center)", "circle(farthest-side at 50% 50%)");
</script>
</body>
</html>

32
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/ellipse-function-computed.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: the computed value of the ellipse() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-ellipse">
<meta name="assert" content="Tests parsing of the ellipse() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("shape-outside", "ellipse()");
test_computed_value("shape-outside", "ellipse(1px 2px)");
test_computed_value("shape-outside", "ellipse(20px 40px at center)", "ellipse(20px 40px at 50% 50%)");
test_computed_value("shape-outside", "ellipse(closest-side 20%)");
test_computed_value("shape-outside", "ellipse(farthest-side 20%)");
test_computed_value("shape-outside", "ellipse(closest-corner 20%)");
test_computed_value("shape-outside", "ellipse(farthest-corner 20%)");
test_computed_value("shape-outside", "ellipse(at 10% 20%)");
test_computed_value("shape-outside", "ellipse(at -10px -20%)");
test_computed_value("shape-outside", "ellipse(4% 20% at top right)", "ellipse(4% 20% at 100% 0%)");
test_computed_value("shape-outside", "ellipse(calc(100% - 20px) calc(80% - 10px) at calc(100% - 20px) calc(100% / 4))", "ellipse(calc(100% - 20px) calc(80% - 10px) at calc(100% - 20px) 25%)");
test_computed_value("shape-outside", "ellipse(10px closest-side at top right)", "ellipse(10px closest-side at 100% 0%)");
test_computed_value("shape-outside", "ellipse(farthest-side 20px at center top)", "ellipse(farthest-side 20px at 50% 0%)");
test_computed_value("shape-outside", "ellipse(farthest-side farthest-side at top right)", "ellipse(farthest-side farthest-side at 100% 0%)");
</script>
</body>
</html>

26
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/ellipse-function-invalid.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the ellipse() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-ellipse">
<meta name="assert" content="Tests parsing of the ellipse() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("shape-outside", "ellipse(10px)");
test_invalid_value("shape-outside", "ellipse(10px -20px)");
test_invalid_value("shape-outside", "ellipse(20px, 40px at center)");
test_invalid_value("shape-outside", "ellipse(farthest-side at)");
test_invalid_value("shape-outside", "ellipse(1% 2% top right)");
test_invalid_value("shape-outside", "ellipse(3% at 100% 0%)");
test_invalid_value("shape-outside", "ellipse(closest-side)");
test_invalid_value("shape-outside", "ellipse(farthest-side at 100% 0%)");
test_invalid_value("shape-outside", "ellipse(10% -20% at 30% 40%)");
test_invalid_value("shape-outside", "ellipse(-50px 60px at 70% 80%)");
</script>
</body>
</html>

31
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/ellipse-function-valid.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the ellipse() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-ellipse">
<meta name="assert" content="Tests parsing of the ellipse() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("shape-outside", "ellipse()");
test_valid_value("shape-outside", "ellipse(1px 2px)");
test_valid_value("shape-outside", "ellipse(20px 40px at center)", "ellipse(20px 40px at 50% 50%)");
test_valid_value("shape-outside", "ellipse(closest-side 20%)");
test_valid_value("shape-outside", "ellipse(farthest-side 20%)");
test_valid_value("shape-outside", "ellipse(closest-corner 20%)");
test_valid_value("shape-outside", "ellipse(farthest-corner 20%)");
test_valid_value("shape-outside", "ellipse(at 10% 20%)");
test_valid_value("shape-outside", "ellipse(at -10px -20%)");
test_valid_value("shape-outside", "ellipse(4% 20% at top right)", "ellipse(4% 20% at 100% 0%)");
test_valid_value("shape-outside", "ellipse(calc(100% - 20px) calc(80% - 10px) at calc(100% - 20px) calc(100% / 4))", "ellipse(calc(100% - 20px) calc(80% - 10px) at calc(100% - 20px) calc(25%))");
test_valid_value("shape-outside", "ellipse(10px closest-side at top right)", "ellipse(10px closest-side at 100% 0%)");
test_valid_value("shape-outside", "ellipse(farthest-side 20px at center top)", "ellipse(farthest-side 20px at 50% 0%)");
test_valid_value("shape-outside", "ellipse(farthest-side farthest-side at top right)", "ellipse(farthest-side farthest-side at 100% 0%)");
</script>
</body>
</html>

28
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/inset-function-computed.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: the computed value of the inset() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-inset">
<meta name="assert" content="Tests parsing of the inset() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("shape-outside", "inset(100%)");
test_computed_value("shape-outside", "inset(0 1px)", "inset(0px 1px)");
test_computed_value("shape-outside", "inset(0px 1px 2%)");
test_computed_value("shape-outside", "inset(-20px -20px 2%)");
test_computed_value("shape-outside", "inset(0px 1px 2% 3em)", "inset(0px 1px 2% 48px)");
test_computed_value("shape-outside", "inset(0px calc(100% - 20px) 2% 3em)", "inset(0px calc(100% - 20px) 2% 48px)");
test_computed_value("shape-outside", "inset(0px round 100%)");
test_computed_value("shape-outside", "inset(0px round 0 1px)", "inset(0px round 0px 1px)");
test_computed_value("shape-outside", "inset(0px round 0px 1px 2%)");
test_computed_value("shape-outside", "inset(0px round 0px 1px 2% 3em)", "inset(0px round 0px 1px 2% 48px)");
test_computed_value("shape-outside", "inset(10px round 20% / 0px 1px 2% 3em)", "inset(10px round 20% / 0px 1px 2% 48px)");
</script>
</body>
</html>

28
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/inset-function-invalid.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the inset() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-inset">
<meta name="assert" content="Tests parsing of the inset() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("shape-outside", "inset(0px, 1px)");
test_invalid_value("shape-outside", "inset(0px round 0px, 1px)");
test_invalid_value("shape-outside", "inset()");
test_invalid_value("shape-outside", "inset(123)");
test_invalid_value("shape-outside", "inset(1% 2% 3% 4% 5%)");
test_invalid_value("shape-outside", "inset(round 0)");
test_invalid_value("shape-outside", "inset(0px round)");
test_invalid_value("shape-outside", "inset(0px round 123)");
test_invalid_value("shape-outside", "inset(0px round 1% 2% 3% 4% 5%)");
test_invalid_value("shape-outside", "inset(0px round / 1px)");
test_invalid_value("shape-outside", "inset(10px round -20px)");
test_invalid_value("shape-outside", "inset(30% round -40%)");
</script>
</body>
</html>

27
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/inset-function-valid.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the inset() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-inset">
<meta name="assert" content="Tests parsing of the inset() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("shape-outside", "inset(100%)");
test_valid_value("shape-outside", "inset(0 1px)", "inset(0px 1px)");
test_valid_value("shape-outside", "inset(0px 1px 2%)");
test_valid_value("shape-outside", "inset(-20px -20px 2%)");
test_valid_value("shape-outside", "inset(0px 1px 2% 3em)");
test_valid_value("shape-outside", "inset(0px calc(100% - 20px) 2% 3em)");
test_valid_value("shape-outside", "inset(0px round 100%)");
test_valid_value("shape-outside", "inset(0px round 0 1px)", "inset(0px round 0px 1px)");
test_valid_value("shape-outside", "inset(0px round 0px 1px 2%)");
test_valid_value("shape-outside", "inset(0px round 0px 1px 2% 3em)");
test_valid_value("shape-outside", "inset(10px round 20% / 0px 1px 2% 3em)");
</script>
</body>
</html>

21
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/polygon-function-computed.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the polygon() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-polygon">
<meta name="assert" content="Tests parsing of the polygon() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("shape-outside", "polygon(1% 2%)");
test_computed_value("shape-outside", "polygon(calc(100% - 20px) calc(30% + 10px))");
test_computed_value("shape-outside", "polygon(nonzero, 1px 2px, 3em 4em)", "polygon(1px 2px, 48px 64px)");
test_computed_value("shape-outside", "polygon(evenodd, 1px 2px, 3em 4em, 6pt 6%)", "polygon(evenodd, 1px 2px, 48px 64px, 8px 6%)");
</script>
</body>
</html>

19
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/polygon-function-invalid.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the polygon() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-polygon">
<meta name="assert" content="Tests parsing of the polygon() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("shape-outside", "polygon(100px)");
test_invalid_value("shape-outside", "polygon(1%)");
test_invalid_value("shape-outside", "polygon(evenodd, 1px, 2px, 3em 4em, 5pt 6%)");
</script>
</body>
</html>

20
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/polygon-function-valid.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the polygon() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-polygon">
<meta name="assert" content="Tests parsing of the polygon() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("shape-outside", "polygon(1% 2%)");
test_valid_value("shape-outside", "polygon(calc(100% - 20px) calc(30% + 10px))");
test_valid_value("shape-outside", "polygon(nonzero, 1px 2px, 3em 4em)", "polygon(1px 2px, 3em 4em)");
test_valid_value("shape-outside", "polygon(evenodd, 1px 2px, 3em 4em, 5pt 6%)");
</script>
</body>
</html>

28
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/rect-function-computed.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: the computed value of the rect() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect">
<meta name="assert" content="Tests parsing of the inset() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("clip-path", "rect(0 0 0 0)", "inset(0px 100% 100% 0px)");
test_computed_value("clip-path", "rect(10px auto 20px 30px)", "inset(10px 0% calc(100% - 20px) 30px)");
test_computed_value("clip-path", "rect(auto auto auto auto)", "inset(0%)");
test_computed_value("clip-path", "rect(10% 20% 15% 12%)", "inset(10% 80% 85% 12%)");
test_computed_value("clip-path", "rect(10% 95% 97% 12%)", "inset(10% 5% 3% 12%)");
test_computed_value("clip-path", "rect(-10% -20% -15% -12%)", "inset(-10% 120% 115% -12%)");
test_computed_value("clip-path", "rect(10px 12% 20px 30px round 100%)", "inset(10px 88% calc(100% - 20px) 30px round 100%)");
test_computed_value("clip-path", "rect(10px 12% 20px 30px round 0 1px)", "inset(10px 88% calc(100% - 20px) 30px round 0px 1px)");
test_computed_value("clip-path", "rect(10px 12% 20px 30px round 0px 1px 2%)", "inset(10px 88% calc(100% - 20px) 30px round 0px 1px 2%)");
test_computed_value("clip-path", "rect(10px 12% 20px 30px round 0px 1px 2% 3em)", "inset(10px 88% calc(100% - 20px) 30px round 0px 1px 2% 48px)");
test_computed_value("clip-path", "rect(10px 12% 20px 30px round 20% / 0px 1px 2% 3em)", "inset(10px 88% calc(100% - 20px) 30px round 20% / 0px 1px 2% 48px)");
</script>
</body>
</html>

30
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/rect-function-invalid.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the rect() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect">
<meta name="assert" content="Tests parsing of the inset() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("clip-path", "rect()");
test_invalid_value("clip-path", "rect(0px)");
test_invalid_value("clip-path", "rect(0px 1px)");
test_invalid_value("clip-path", "rect(0px 1px 2px)");
test_invalid_value("clip-path", "rect(0px, 1px, 2px, 3px)");
test_invalid_value("clip-path", "rect(0, 1, 2, 3)");
test_invalid_value("clip-path", "rect(1% 2% 3% 4% 5%)");
test_invalid_value("clip-path", "rect(round 0)");
test_invalid_value("clip-path", "rect(10px auto 20px 30px round)");
test_invalid_value("clip-path", "rect(10px auto 20px 30px round 123)");
test_invalid_value("clip-path", "rect(10px auto 20px 30px round 1% 2% 3% 4% 5%)");
test_invalid_value("clip-path", "rect(10px auto 20px 30px round / 1px)");
test_invalid_value("clip-path", "rect(10px auto 20px 30px round -20px)");
test_invalid_value("clip-path", "rect(10px auto 20px 30px round -40%)");
</script>
</body>
</html>

27
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/rect-function-valid.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the rect() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-rect">
<meta name="assert" content="Tests parsing of the inset() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("clip-path", "rect(0 0 0 0)", "rect(0px 0px 0px 0px)");
test_valid_value("clip-path", "rect(10px auto 20px 30px)");
test_valid_value("clip-path", "rect(auto auto auto auto)");
test_valid_value("clip-path", "rect(10% 20% 15% 12%)");
test_valid_value("clip-path", "rect(10% 95% 97% 12%)");
test_valid_value("clip-path", "rect(-10% -20% -15% -12%)");
test_valid_value("clip-path", "rect(10px 12% 20px 30px round 100%)");
test_valid_value("clip-path", "rect(10px 12% 20px 30px round 0 1px)", "rect(10px 12% 20px 30px round 0px 1px)");
test_valid_value("clip-path", "rect(10px 12% 20px 30px round 0px 1px 2%)");
test_valid_value("clip-path", "rect(10px 12% 20px 30px round 0px 1px 2% 3em)");
test_valid_value("clip-path", "rect(10px 12% 20px 30px round 20% / 0px 1px 2% 3em)");
</script>
</body>
</html>

65
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/shape-function-computed.html Normal file
View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 2: computed values for the shape() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function">
<meta name="assert" content="Tests parsing of the circle() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("clip-path", "shape(from 20px 40px, line to 20px 30px)");
test_computed_value("clip-path", "shape(from 20px 40px, line to 20px 30px )", "shape(from 20px 40px, line to 20px 30px)");
test_computed_value("clip-path", "shape(from 0 0, line to 100% 100%)", "shape(from 0px 0px, line to 100% 100%)");
test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, line by 20px 30px)");
test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to 100px)");
test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by 100%)");
test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to 100px)");
test_computed_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by 100%)");
test_computed_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px)");
test_computed_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px / 12px 32px)");
test_computed_value("clip-path", "shape(from center, curve to center bottom with top right / bottom right)",
"shape(from 50% 50%, curve to 50% 100% with 100% 0% / 100% 100%)");
test_computed_value("clip-path", "shape(from center, curve by 20px 20px with 10px 30px from end / 12px 32px from start)",
"shape(from 50% 50%, curve by 20px 20px with 10px 30px from end / 12px 32px)");
test_computed_value("clip-path", "shape(from center right, curve by 20px 20px with 10px 30px from origin / 12px 32px from origin)",
"shape(from 100% 50%, curve by 20px 20px with 10px 30px from origin / 12px 32px from origin)");
test_computed_value("clip-path", "shape(from 20px 40px, curve to top right with 10px 30px from origin / 12px 32px from origin)",
"shape(from 20px 40px, curve to 100% 0% with 10px 30px / 12px 32px)");
test_computed_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px)");
test_computed_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px with 12px 32px)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10%)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 0)", "shape(from 20px 40px, arc by 20px 20px of 0px)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 0)", "shape(from 20px 40px, arc by 20px 20px of 10% 0px)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 0deg)", "shape(from 20px 40px, arc by 20px 20px of 10%)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20%)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of -10% -20% large)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 1deg)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 12deg)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 3.14159265rad)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 180deg)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large cw)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)");
test_computed_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg large)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)");
document.getElementById('target').remove();
</script>
</body>
</html>

74
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/shape-function-invalid.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the shape() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function">
<meta name="assert" content="Tests parsing of the circle() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("clip-path", "shape(from 20px 40px line to 20px 30px)");
test_invalid_value("clip-path", "shape(from 20px 40px line to 20px 30px,)");
test_invalid_value("clip-path", "shape(from 20px, 40px, line to 20px, 30px)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to top)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to bottom)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to y-start)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to y-end)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to left)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to right)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to x-start)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to x-end)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to top 20px)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to right, vline to bottom left, close)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by left)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by right)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by top)");
test_invalid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by bottom)");
// Control points start after "with"
test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px, using 10px 30px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px using 10px 30px, 12px 32px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px, using 10px 30px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px using 10px 30px, 12px 32px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px via 10px 30px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px via 10px 30px 12px 32px)");
test_invalid_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px via 10px 30px / 12px 32px)");
test_invalid_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px using 10px 30px 12px 32px)");
// Multiple control points should be separated by /
test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px with 10px 30px 12px 32px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px 12px 32px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px /)");
// <position> in places that only accept <coordinate-pair>
test_invalid_value("clip-path", "shape(from 20px 40px, curve by top left using 10px 30px)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 30px using top right)");
test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 30px using top right / 20px from end)");
test_invalid_value("clip-path", "shape(from 20px 40px, arc by top right of 10% 20%)");
test_invalid_value("clip-path", "shape(from 20px 40px, arc by 10px 20px of top right small cw)");
// "from start" only applies to control points
test_invalid_value("clip-path", "shape(from 20px 40px, curve by 20px 30px from start, using 23px 32px)");
// 'from origin' not allowed for <position> control points
test_invalid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px using top left from origin / 12px 32px from end)");
test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% 12deg)");
test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg rotate 13deg)");
test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large 12deg)");
test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% small large)");
test_invalid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw ccw)");
</script>
</body>
</html>

103
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/shape-function-valid.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 2: parsing the shape() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function">
<meta name="assert" content="Tests parsing of the circle() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("clip-path", "shape(from 20px 40px, line to 20px 30px)");
test_valid_value("clip-path", "shape(from 20px 40px, line to 20px 30px )", "shape(from 20px 40px, line to 20px 30px)");
test_valid_value("clip-path", "shape(from 0 0, line to 100% 100%)", "shape(from 0px 0px, line to 100% 100%)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, line by 20px 30px)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to 100px)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline by 100%)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to 100px)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline by 100%)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to left, hline to center, hline to right)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, hline to x-start, vline to y-start)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to top, vline to center, vline to bottom)");
test_valid_value("clip-path", "shape(from 20px 40px, move to 20px 30px, vline to y-start, vline to y-end)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to 20px 20px with 10px 30px)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to 20em 20pt with 10vw 30vh)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to 10% 20% with 10px 30px / 12px 32px)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to top left with 10px 30px / 12px 32px)",
"shape(from 20px 40px, curve to left top with 10px 30px / 12px 32px)");
test_valid_value("clip-path", "shape(from 20% 40%, curve to center with center right / bottom center)",
"shape(from 20% 40%, curve to center center with right center / center bottom)");
test_valid_value("clip-path", "shape(from bottom right, curve to left with center right / bottom center)",
"shape(from right bottom, curve to left center with right center / center bottom)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to bottom left with 10px 30px from end)",
"shape(from 20px 40px, curve to left bottom with 10px 30px from end)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from start / 12px 32px from end)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from start/12px 32px from end)"
, "shape(from 20px 40px, curve to right center with 10px 30px from start / 12px 32px from end)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from end / 12px 32px from origin)",
"shape(from 20px 40px, curve to right center with 10px 30px from end / 12px 32px)");
test_valid_value("clip-path", "shape(from 20px 40px, curve to right center with 10px 30px from origin / 12px 32px from start)",
"shape(from 20px 40px, curve to right center with 10px 30px / 12px 32px from start)");
test_valid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px)");
test_valid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px from origin)");
test_valid_value("clip-path", "shape(from 20px 40px, curve by 20px 20px with 10px 30px / 12px 32px)");
test_valid_value("clip-path", "shape(from 20px 40px, curve by 20% 20em with 10px 30px from start / 12px 32px from end)",
"shape(from 20px 40px, curve by 20% 20em with 10px 30px / 12px 32px from end)");
test_valid_value("clip-path", "shape(from 20px 40px, curve by 20% 20em with 10.3% 30px from origin / 12pt 5.4% from start)",
"shape(from 20px 40px, curve by 20% 20em with 10.3% 30px from origin / 12pt 5.4%)");
test_valid_value("clip-path", "shape(from top left, smooth to top right)",
"shape(from left top, smooth to right top)");
test_valid_value("clip-path", "shape(from 20px 40px, smooth to center 20%)");
test_valid_value("clip-path", "shape(from 20px 40px, smooth by 20px 20px)");
test_valid_value("clip-path", "shape(from right bottom, smooth by 20px 20px with 12px 32px)");
test_valid_value("clip-path", "shape(from 20px 40px, smooth by 20pt 20px with 12px 32px from start)",
"shape(from 20px 40px, smooth by 20pt 20px with 12px 32px)");
test_valid_value("clip-path", "shape(from center 40px, smooth by 20% 20% with 12px 32px from end)");
test_valid_value("clip-path", "shape(from center, smooth by 20px 20px with 12px 32px from origin)",
"shape(from center center, smooth by 20px 20px with 12px 32px from origin)");
test_valid_value("clip-path", "shape(from 20px 40px, arc to top right of 10%)",
"shape(from 20px 40px, arc to right top of 10%)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10%)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 0)", "shape(from 20px 40px, arc by 20px 20px of 0px)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 0)", "shape(from 20px 40px, arc by 20px 20px of 10% 0px)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20% 20pt of 10% rotate 0deg)",
"shape(from 20px 40px, arc by 20% 20pt of 10%)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20%)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of -10% -20% large)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% rotate 1deg)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw rotate 12deg)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10px 20px cw rotate 0.52rad)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large cw)",
"shape(from 20px 40px, arc by 20px 20px of 10% 20% cw large)");
test_valid_value("clip-path", "shape(from 20px 40px, arc by 20px 20px of 10% 20% rotate 12deg large)", "shape(from 20px 40px, arc by 20px 20px of 10% 20% large rotate 12deg)");
</script>
</body>
</html>

25
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/xywh-function-computed.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: the computed value of the xywh() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh">
<meta name="assert" content="Tests parsing of the xywh() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("shape-outside", "xywh(0px 1px 2% 3em)", "inset(1px 98% calc(100% - 49px) 0px)");
test_computed_value("shape-outside", "xywh(0px calc(100% - 20px) 2% 3em)", "inset(calc(100% - 20px) 98% calc(0% - 28px) 0px)");
test_computed_value("shape-outside", "xywh(10px 20px 30px 25px round 100%)", "inset(20px calc(100% - 40px) calc(100% - 45px) 10px round 100%)");
test_computed_value("shape-outside", "xywh(10px 20px 30px 25px round 0 1px)", "inset(20px calc(100% - 40px) calc(100% - 45px) 10px round 0px 1px)");
test_computed_value("shape-outside", "xywh(10px 20px 30px 25px round 0px 1px 2%)", "inset(20px calc(100% - 40px) calc(100% - 45px) 10px round 0px 1px 2%)");
test_computed_value("shape-outside", "xywh(10px 20px 30px 25px round 0px 1px 2% 3em)", "inset(20px calc(100% - 40px) calc(100% - 45px) 10px round 0px 1px 2% 48px)");
test_computed_value("shape-outside", "xywh(10px 20px 30px 25px round 20% / 0px 1px 2% 3em)", "inset(20px calc(100% - 40px) calc(100% - 45px) 10px round 20% / 0px 1px 2% 48px)");
</script>
</body>
</html>

22
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/xywh-function-invalid.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the xywh() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh">
<meta name="assert" content="Tests parsing of the xywh() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("shape-outside", "xywh(0px 1px -2% 3em)");
test_invalid_value("shape-outside", "xywh(0px 1px 2% -3em)");
test_invalid_value("shape-outside", "xywh(10px 20px)");
test_invalid_value("shape-outside", "xywh(10px 20px 30px)");
test_invalid_value("shape-outside", "xywh(10px 20px, 30px 25px)");
test_invalid_value("shape-outside", "xywh(10px 20px 30px 25px round 0px -1px 2%)");
</script>
</body>
</html>

23
Tests/LibWeb/Text/input/wpt-import/css/css-shapes/shape-functions/xywh-function-valid.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Shapes Module Level 1: parsing the xywh() function</title>
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-xywh">
<meta name="assert" content="Tests parsing of the xywh() function">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("shape-outside", "xywh(0px 1px 2% 3em)");
test_valid_value("shape-outside", "xywh(0px calc(100% - 20px) 2% 3em)");
test_valid_value("shape-outside", "xywh(10px 20px 30px 25px round 100%)");
test_valid_value("shape-outside", "xywh(10px 20px 30px 25px round 0 1px)", "xywh(10px 20px 30px 25px round 0px 1px)");
test_valid_value("shape-outside", "xywh(10px 20px 30px 25px round 0px 1px 2%)");
test_valid_value("shape-outside", "xywh(10px 20px 30px 25px round 0px 1px 2% 3em)");
test_valid_value("shape-outside", "xywh(10px 20px 30px 25px round 20% / 0px 1px 2% 3em)");
</script>
</body>
</html>