diff --git a/layout/style/test/manual/clip_path_WPT-tests.html b/layout/style/test/manual/clip_path_WPT-tests.html new file mode 100644 index 0000000000..14e03a92ee --- /dev/null +++ b/layout/style/test/manual/clip_path_WPT-tests.html @@ -0,0 +1,599 @@ + + + + + + Pale Moon CSS clip-path: Geometry-Box Test Suite + + + +
+
+

CSS clip-path: Geometry-Box Test Suite

+

Comprehensive test coverage for Pale Moon browser - Bug #2757

+
+ Bugzilla #1465988 | Support CSS clip-path:<geometry-box> +
+
+ + +
+

Core Geometry Box Tests

+

These tests validate basic <geometry-box> functionality with and without complex box models.

+ +
+ +
+

Test 1: margin-box

+

Clip path set to margin-box. Should show full element.

+
+
+ margin-box +
+
+
+ CSS: clip-path: margin-box; +
+
+ Expected: Full element visible +
+
+ + +
+

Test 2: border-box

+

Clip path set to border-box. Should show full element.

+
+
+ border-box +
+
+
+ CSS: clip-path: border-box; +
+
+ Expected: Full element visible +
+
+ + +
+

Test 3: padding-box

+

Clip path set to padding-box. Should show full element.

+
+
+ padding-box +
+
+
+ CSS: clip-path: padding-box; +
+
+ Expected: Full element visible +
+
+ + +
+

Test 4: content-box

+

Clip path set to content-box. Should show full element.

+
+
+ content-box +
+
+
+ CSS: clip-path: content-box; +
+
+ Expected: Full element visible +
+
+ + +
+

Test 5: margin-box (complex)

+

Clip path set to margin-box. Should show entire element including border.

+
+
+ margin-box +
+
+
+ CSS: clip-path: margin-box; +
+
+ Expected: Full element with border visible +
+
+ + +
+

Test 6: content-box (complex)

+

Clip path set to content-box. Should show only the content area.

+
+
+ content-box +
+
+
+ CSS: clip-path: content-box; +
+
+ Expected: Only content area visible +
+
+
+
+ +
+

Combined Shape Function Tests

+

These tests validate combinations of shape functions with geometry-box values.

+ +
+ +
+

Test 7: inset(10%) border-box

+

10% inset from border-box boundaries. Should clip all sides equally.

+
+
+ inset(10%) border-box +
+
+
+ CSS: clip-path: inset(10%) border-box; +
+
+ Expected: 15px clipping on all sides +
+
+ + +
+

Test 8: inset(20px) content-box

+

20px inset from content-box boundaries. Should clip inside padding area.

+
+
+ inset(20px) content-box +
+
+
+ CSS: clip-path: inset(20px) content-box; +
+
+ Expected: 20px clipping inside content +
+
+ + +
+

Test 9: circle(40%) padding-box

+

Circle centered in padding-box. Should clip to circle shape.

+
+
+ circle(40%) padding-box +
+
+
+ CSS: clip-path: circle(40%) padding-box; +
+
+ Expected: Circular clipping area +
+
+ + +
+

Test 10: circle(30px at 30px 30px) margin-box

+

Circle at specific position in margin-box. Should clip with offset.

+
+
+ circle(30px at 30px 30px) margin-box +
+
+
+ CSS: clip-path: circle(30px at 30px 30px) margin-box; +
+
+ Expected: Circle at top-left position +
+
+
+
+ +
+

Inline Element Tests

+

These tests validate clip-path behavior on inline elements with border-radius.

+ +
+ +
+

Test 11: Inline - border-box

+

Inline element with border-box clip-path and border-radius.

+
+
+ border-box +
+
+
+ CSS: clip-path: border-box; +
+
+ Expected: Rounded corners visible +
+
+ + +
+

Test 12: Inline - margin-box

+

Inline element with margin-box clip-path and border-radius.

+
+
+ margin-box +
+
+
+ CSS: clip-path: margin-box; +
+
+ Expected: Margin area visible +
+
+ + +
+

Test 13: Inline - content-box

+

Inline element with content-box clip-path and border-radius.

+
+
+ content-box +
+
+
+ CSS: clip-path: content-box; +
+
+ Expected: Only content area visible +
+
+ + +
+

Test 14: Inline - padding-box

+

Inline element with padding-box clip-path and border-radius.

+
+
+ padding-box +
+
+
+ CSS: clip-path: padding-box; +
+
+ Expected: Padding area visible +
+
+
+
+ +
+

Edge Case: Margin-Box with Border-Radius

+

This test validates the margin-box edge case with border-radius.

+ +
+ +
+

Test 15: Margin-box Edge Case

+

Margin-box clip-path with border-radius and specific margin/border ratio.

+
+
+ margin: 10%
+ border-radius: 50%
+ clip-path: margin-box +
+
+
+ CSS: clip-path: margin-box;
+ margin: 10%; border-radius: 50%; +
+
+ Expected: Circular clipping with margin +
+
+ + +
+

Reference: Margin-box Edge Case

+

Expected result for the margin-box edge case test.

+
+
+ Expected
Result +
+
+
+ Reference: Circular element without margins +
+
+ Compare to: Test 15 +
+
+
+
+ +
+

Reference Comparisons

+

Compare test results with these reference elements to validate correct clipping behavior.

+ +
+
+

Reference: No clip-path

+

Simple element without any clipping applied

+
+
+ No clip-path +
+
+
+ Compare to: Tests 1-4 +
+
+ +
+

Reference: No clip-path (complex)

+

Element with borders and padding without clipping

+
+
+ No clip-path +
+
+
+ Compare to: Test 5 +
+
+ +
+

Reference: Content-only

+

Green content without border or padding

+
+
+ Content only +
+
+
+ Compare to: Test 6 +
+
+ +
+

Reference: Inline Element

+

Inline element without any clipping

+
+
+ No clip-path +
+
+
+ Compare to: Tests 11-14 +
+
+
+
+ + +
+ + \ No newline at end of file