forked from mirrors/gecko-dev
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
33 lines
1.4 KiB
HTML
33 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Overflow: getComputedStyle() for 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/computed-testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="target"></div>
|
|
<script>
|
|
test_computed_value("overflow-clip-margin", "0px", "0px");
|
|
test_computed_value("overflow-clip-margin", "10px");
|
|
|
|
test_computed_value("overflow-clip-margin", "content-box");
|
|
test_computed_value("overflow-clip-margin", "content-box 0px", "content-box");
|
|
test_computed_value("overflow-clip-margin", "content-box 10px");
|
|
test_computed_value("overflow-clip-margin", "10px content-box", "content-box 10px");
|
|
|
|
test_computed_value("overflow-clip-margin", "padding-box", "0px");
|
|
test_computed_value("overflow-clip-margin", "padding-box 0px", "0px");
|
|
test_computed_value("overflow-clip-margin", "padding-box 10px", "10px");
|
|
test_computed_value("overflow-clip-margin", "10px padding-box", "10px");
|
|
|
|
test_computed_value("overflow-clip-margin", "border-box");
|
|
test_computed_value("overflow-clip-margin", "border-box 0px", "border-box");
|
|
test_computed_value("overflow-clip-margin", "border-box 10px");
|
|
test_computed_value("overflow-clip-margin", "10px border-box", "border-box 10px");
|
|
</script>
|
|
</body>
|
|
</html>
|