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
35 lines
789 B
HTML
35 lines
789 B
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>Overflow: verifies multi-col layout uses overflow-clip-margin correctly</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-clip-margin">
|
|
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
|
<style>
|
|
body {
|
|
width: 200px;
|
|
height: 50px;
|
|
column-count: 2;
|
|
}
|
|
|
|
.container {
|
|
overflow: clip;
|
|
}
|
|
.wrapper {
|
|
height: 50px;
|
|
border: 5px solid grey;
|
|
padding: 5px;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
top: -20px;
|
|
left: -20px;
|
|
width: 100px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<div class="wrapper">
|
|
<div class="content" style="background:blue"></div>
|
|
<div class="content" style="background:green"></div>
|
|
</div>
|
|
</div>
|