forked from mirrors/gecko-dev
77e633eec2
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
37 lines
1.1 KiB
HTML
37 lines
1.1 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>Verifies overflow-clip-margin supports visual-box</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
|
|
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
|
<link rel="match" href="overflow-clip-margin-visual-box-and-value-with-border-radius-ref.html">
|
|
<meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-100" />
|
|
<style>
|
|
.container {
|
|
width: 100px;
|
|
height: 100px;
|
|
overflow: clip;
|
|
padding: 10px;
|
|
border: 10px solid black;
|
|
border-radius: 0px 15px 25px 35px;
|
|
margin: 10px;
|
|
background: grey;
|
|
}
|
|
|
|
.inner {
|
|
width: 150px;
|
|
height: 150px;
|
|
position: relative;
|
|
top: -25px;
|
|
left: -25px;
|
|
background: blue;
|
|
}
|
|
</style>
|
|
<div class="container" style="overflow-clip-margin: border-box 5px;">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="container" style="overflow-clip-margin: padding-box 5px;">
|
|
<div class="inner"></div>
|
|
</div>
|
|
<div class="container" style="overflow-clip-margin: content-box 5px;">
|
|
<div class="inner"></div>
|
|
</div>
|