fune/testing/web-platform/tests/css/css-overflow/parsing/overflow-clip-margin.html
Khushal 77e633eec2 Bug 1766918 [wpt PR 33853] - css: Add support for visual box in overflow-clip-margin., a=testonly
Automatic update from web-platform-tests
css: Add support for visual box in overflow-clip-margin.

This change allows overflow-clip-margin to specify a reference box as
defined in the spec[1] to configure the box an element's content is
clipped to.

The current implementation allows specifying a single length value. This
value is the distance from the element's overflow clip edge in each
direction that its content is clipped to. The overflow clip edge
defaults to the outer edge of the padding box.

After this change the overflow clip edge can be changed to the outer
edge of the element's border box or content box. A length value, if
specified, is the distance the content is clipped to from this edge.

This change also ensures that the border-radius curve is set correctly
as specified in the spec for corner-shaping[2].

[1]: https://drafts.csswg.org/css-overflow/#valdef-overflow-clip-margin-visual-box
[2]: https://drafts.csswg.org/css-backgrounds-3/#corner-shaping

Bug: 1320869
Change-Id: Ibd1e300a9d227045ec022c0de55bc11d728723f7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3611752
Commit-Queue: Khushal Sagar <khushalsagar@chromium.org>
Auto-Submit: Khushal Sagar <khushalsagar@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1005333}

--

wpt-commits: 655c6566e4764bdd6fd5cb057697831abd53df8c
wpt-pr: 33853
2022-05-24 10:13:45 +00:00

34 lines
1.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Overflow: parsing overflow-clip-margin</title>
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
<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("overflow-clip-margin", '10px', '10px');
test_valid_value("overflow-clip-margin", 'content-box', 'content-box');
test_valid_value("overflow-clip-margin", 'content-box 10px', 'content-box 10px');
test_valid_value("overflow-clip-margin", '10px content-box', 'content-box 10px');
test_valid_value("overflow-clip-margin", '0px content-box', 'content-box');
test_valid_value("overflow-clip-margin", 'padding-box', '0px');
test_valid_value("overflow-clip-margin", 'padding-box 0px', '0px');
test_valid_value("overflow-clip-margin", 'padding-box 10px', '10px');
test_valid_value("overflow-clip-margin", '10px padding-box', '10px');
test_valid_value("overflow-clip-margin", 'border-box', 'border-box');
test_valid_value("overflow-clip-margin", 'border-box 0px', 'border-box');
test_valid_value("overflow-clip-margin", 'border-box 10px', 'border-box 10px');
test_valid_value("overflow-clip-margin", '10px border-box', 'border-box 10px');
test_invalid_value("overflow-clip-margin", 'margin-box');
test_invalid_value("overflow-clip-margin", 'inset(10px)');
</script>
</body>
</html>