mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-27 02:20:17 +00:00
LibWeb: Enable different overflow along the x and y axis
This commit is contained in:
Psychpsyo
Alexander Kalenik
parent
85883ee5ce
commit
ed7374783d
Notes:
github-actions[bot]
2025-05-13 12:32:37 +00:00
Author: https://github.com/Psychpsyo
Commit: ed7374783d
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4565
Reviewed-by: https://github.com/gmta
Reviewed-by: https://github.com/kalenikaliaksandr
15 changed files with 518 additions and 8 deletions
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: overflow:clip can be combined with overflow:visible</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-overflow/clip-002-ref.html">
|
||||
<style>
|
||||
.outer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -40px;
|
||||
background: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
<!-- there should be no overflow -->
|
||||
<div class="outer" style="overflow:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
<!-- there should be overflow in the vertical dimension, but not horizontally -->
|
||||
<div class="outer" style="overflow-x:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
<!-- there should be overflow in the horizontal dimension, but not vertically -->
|
||||
<div class="outer" style="overflow-y:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: overflow:clip can be combined with overflow:visible</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-overflow/clip-003-ref.html">
|
||||
<style>
|
||||
.wrapper {
|
||||
margin-left: 30px;
|
||||
margin-bottom: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.outer {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background: blue;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
<!-- there should be no scrollbars -->
|
||||
<div class="wrapper" style="overflow: auto">
|
||||
<div class="outer" style="overflow:clip; outline:solid red">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- there should be no white areas inside the outline -->
|
||||
<div class="wrapper" style="outline: solid">
|
||||
<div class="outer" style="overflow-x:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- there should be a vertical scrollbar, but not a horizontal one -->
|
||||
<div class="wrapper" style="overflow: auto; margin-top:50px">
|
||||
<div class="outer" style="overflow-x:clip">
|
||||
<div class="inner" style="width:1px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- there should be no white areas inside the outline -->
|
||||
<div class="wrapper" style="outline: solid">
|
||||
<div class="outer" style="overflow-y:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- there should be horizontal scrollbar, but not a vertical one -->
|
||||
<div class="wrapper" style="overflow: auto">
|
||||
<div class="outer" style="overflow-y:clip">
|
||||
<div class="inner" style="height:1px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: overflow:clip can be combined with overflow:visible</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-overflow/clip-004-ref.html">
|
||||
<style>
|
||||
.outer {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -40px;
|
||||
background: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
<!-- there should be no overflow -->
|
||||
<div class="outer" style="overflow:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
<!-- there should be overflow in the vertical dimension, but not horizontally -->
|
||||
<div class="outer" style="overflow-x:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
<!-- there should be overflow in the horizontal dimension, but not vertically -->
|
||||
<div class="outer" style="overflow-y:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: overflow:clip doesn't affect the box' own outline</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1531609">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-clip">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-overflow/clip-005-ref.html">
|
||||
<style>
|
||||
.outer {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 10px;
|
||||
margin-left: 100px;
|
||||
margin-top: 100px;
|
||||
background: black;
|
||||
outline: 2px solid grey;
|
||||
}
|
||||
|
||||
.inner {
|
||||
position: relative;
|
||||
top: -20px;
|
||||
left: -40px;
|
||||
background: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
<!-- there should be no overflow -->
|
||||
<div class="outer" style="overflow:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
<!-- there should be overflow in the vertical dimension, but not horizontally -->
|
||||
<div class="outer" style="overflow-x:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
||||
<!-- there should be overflow in the horizontal dimension, but not vertically -->
|
||||
<div class="outer" style="overflow-y:clip">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: verifies content visual overflow is shown</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-overflow/overflow-clip-content-visual-overflow-ref.html">
|
||||
<style>
|
||||
body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.parent {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
box-shadow: 10px 50px 5px red;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
<div class="parent" style="overflow-x: clip; overflow-y: visible">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="parent" style="overflow-x: visible; overflow-y: clip">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: can have different clip and visible value in x/y directions with svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-overflow/overflow-clip-x-visible-y-svg-ref.html">
|
||||
<style>
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-y: visible;
|
||||
overflow-x: clip;
|
||||
}
|
||||
</style>
|
||||
<svg>
|
||||
<rect width="150" height="150" fill="green"></rect>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Overflow: can have different clip and visible value in x/y directions with svg</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#valdef-overflow-clip">
|
||||
<link rel="author" title="Khushal Sagar" href="mailto:khushalsagar@chromium.org">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-overflow/overflow-clip-y-visible-x-svg-ref.html">
|
||||
<style>
|
||||
svg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-x: visible;
|
||||
overflow-y: clip;
|
||||
}
|
||||
</style>
|
||||
<svg>
|
||||
<rect width="150" height="150" fill="green"></rect>
|
||||
</svg>
|
||||
Loading…
Add table
Add a link
Reference in a new issue