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