mirror of
https://github.com/servo/servo.git
synced 2025-09-04 03:58:23 +01:00
layout: Use overflow: visible if overflow was propagated to viewport (#38598)
The `overflow-*` values of either the root element or the `<body>` get propagated to the viewport. However, we were missing this part: > The element from which the value is propagated must then have a used `overflow` value of `visible`. See https://drafts.csswg.org/css-overflow/#overflow-propagation Testing: - `css/cssom-view/scrolling-quirks-vs-nonquirks.html` - `css/css-overflow/overflow-body-propagation-007.html` - `css/css-overflow/overflow-body-propagation-008.html` - `css/css-overflow/overflow-body-propagation-009.html` - `css/css-overflow/scrollable-overflow-with-nested-elements-001.html` - `css/css-overflow/scrollable-overflow-with-nested-elements-002.html` - `css/css-overflow/scrollable-overflow-with-nested-elements-003.html` - `css/css-overflow/scrollable-overflow-with-nested-elements-004.html` - `css/css-overflow/scrollbar-gutter-scroll-into-view.html` Failures: - `css/css-overflow/overflow-body-propagation-010.html` Failing because of missing support for `contain: paint`. - `css/css-overflow/scrollable-overflow-with-nested-elements-005.html` Failing because of wrong `data-expected-height`, but correct `data-expected-scroll-height` which is core of this PR. `data-expected-height` can be dealt separately. Fixes: #38248 --------- Signed-off-by: Shubham Gupta <shubham13297@gmail.com> Signed-off-by: Oriol Brufau <obrufau@igalia.com> Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Shubham Gupta
GitHub
parent
37088aa4c3
commit
d8ff9c7a08
22 changed files with 373 additions and 72 deletions
35
tests/wpt/meta/MANIFEST.json
vendored
35
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -607767,6 +607767,41 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"scrollable-overflow-with-nested-elements-001.html": [
|
||||
"9bf0d16841996fbe9643b44868bc81ca190fe30b",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"scrollable-overflow-with-nested-elements-002.html": [
|
||||
"10ec866995ebf5cb55425599dbd11083a29f543f",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"scrollable-overflow-with-nested-elements-003.html": [
|
||||
"563cadb7faeb66ff0eb8611e61c3681fd576e9b6",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"scrollable-overflow-with-nested-elements-004.html": [
|
||||
"07866f341b9b2ae74e3566b8883adc735cefe702",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"scrollable-overflow-with-nested-elements-005.html": [
|
||||
"95e3e53e09fa9aaf8b54435dcb3b9a8236031e0d",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"scrollable-overflow-zero-one-axis.html": [
|
||||
"1986a8d48b98fde17fda826c5bbf9d75d870f45e",
|
||||
[
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[overflow-body-propagation-007.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[overflow-body-propagation-008.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[overflow-body-propagation-009.html]
|
||||
expected: FAIL
|
||||
2
tests/wpt/meta/css/css-overflow/overflow-body-propagation-010.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-overflow/overflow-body-propagation-010.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[overflow-body-propagation-010.html]
|
||||
expected: FAIL
|
||||
3
tests/wpt/meta/css/css-overflow/scrollable-overflow-with-nested-elements-005.html.ini
vendored
Normal file
3
tests/wpt/meta/css/css-overflow/scrollable-overflow-with-nested-elements-005.html.ini
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[scrollable-overflow-with-nested-elements-005.html]
|
||||
[html 1]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[scrollbar-gutter-scroll-into-view.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
[scrolling-quirks-vs-nonquirks.html]
|
||||
[scrollWidth/scrollHeight on the root element in non-quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scrollWidth/scrollHeight on the root element in quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scrollWidth/scrollHeight on the HTML body element in quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scroll() on the root element in non-quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scrollBy() on the root element in non-quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scrollLeft/scrollTop on the root element in non-quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scroll() on the HTML body element in quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scrollBy() on the HTML body element in quirks mode]
|
||||
expected: FAIL
|
||||
|
||||
[scrollLeft/scrollTop on the HTML body element in quirks mode]
|
||||
expected: FAIL
|
||||
37
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-001.html
vendored
Normal file
37
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-001.html
vendored
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</title>
|
||||
<link rel="author" title="Shubham Gupta" href="mailto:shubham13297@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
||||
<meta name="assert" content="Checks the scrollable overflow with overflow property and some nested element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
.container-2 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
background: silver;
|
||||
border: solid thick;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 1000px;
|
||||
height: 5000px;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('.container')">
|
||||
<div class="container" data-expected-scroll-height="110" data-expected-height="110"
|
||||
data-expected-client-height="110">
|
||||
<div class="container-2" data-expected-scroll-height="5000" data-expected-scroll-width="1000"
|
||||
data-expected-client-width="100" data-expected-client-height="100"
|
||||
data-expected-bounding-client-rect-width="110" data-expected-bounding-client-rect-height="110"
|
||||
data-expected-height="110" data-expected-width="110">
|
||||
<div class="element">hello</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
50
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-002.html
vendored
Normal file
50
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-002.html
vendored
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</title>
|
||||
<link rel="author" title="Shubham Gupta" href="mailto:shubham13297@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
||||
<meta name="assert" content="Checks the scrollable overflow of parent with overflow auto and some nested element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: silver;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.list .item {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: lime;
|
||||
position: absolute;
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
background: grey;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('.container')">
|
||||
<div class="container" style="overflow-x: hidden;" data-expected-scroll-height="1010" data-expected-height="100" data-expected-width="100">
|
||||
<div class="list" data-expected-scroll-height="1010"
|
||||
data-expected-bounding-client-rect-height="0" data-expected-bounding-client-rect-width="100"
|
||||
data-expected-height="0" data-expected-width="100">
|
||||
<p class="item" style="top:0px;"></p>
|
||||
<p class="item" style="top:1000px;"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" data-expected-scroll-height="1010" data-expected-height="100" data-expected-width="100">
|
||||
<div class="list" data-expected-scroll-height="1010"
|
||||
data-expected-bounding-client-rect-height="0" data-expected-bounding-client-rect-width="100"
|
||||
data-expected-height="0" data-expected-width="100">
|
||||
<p class="item" style="top:0px;"></p>
|
||||
<p class="item" style="top:1000px;"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
34
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-003.html
vendored
Normal file
34
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-003.html
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</title>
|
||||
<link rel="author" title="Shubham Gupta" href="mailto:shubham13297@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
||||
<meta name="assert" content="Checks the scrollable overflow with overflow property and some nested element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.list .item {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: lime;
|
||||
position: absolute;
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
background: grey;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('body')" data-expected-scroll-height="1010" data-expected-height="0" data-expected-client-height="0">
|
||||
<div class="list" data-expected-scroll-height="1010" data-expected-height="0">
|
||||
<p class="item" style="top:0px;"></p>
|
||||
<p class="item" style="top:1000px;"></p>
|
||||
</div>
|
||||
</body>
|
||||
42
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-004.html
vendored
Normal file
42
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-004.html
vendored
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</title>
|
||||
<link rel="author" title="Shubham Gupta" href="mailto:shubham13297@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
||||
<meta name="assert" content="Checks the scrollable overflow with overflow property and some nested element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow-x: hidden;
|
||||
background: silver;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.list .item {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: lime;
|
||||
position: absolute;
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
background: grey;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('body')" data-expected-scroll-height="100" data-expected-height="100">
|
||||
<div class="container" data-expected-scroll-height="1010"
|
||||
data-expected-height="100" data-expected-width="100"
|
||||
data-expected-client-height="100" data-expected-client-width="100">
|
||||
<div class="list" data-expected-scroll-height="1010" data-expected-height="0">
|
||||
<p class="item" style="top:0px;"></p>
|
||||
<p class="item" style="top:1000px;"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
39
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-005.html
vendored
Normal file
39
tests/wpt/tests/css/css-overflow/scrollable-overflow-with-nested-elements-005.html
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html data-expected-scroll-height="1018" data-expected-height="8">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</title>
|
||||
<link rel="author" title="Shubham Gupta" href="mailto:shubham13297@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
|
||||
<meta name="assert" content="Checks the scrollable overflow with overflow property and some nested element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<style>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.list .item {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: lime;
|
||||
position: absolute;
|
||||
margin: 0%;
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
background: grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body onload="checkLayout('html')" data-expected-scroll-height="1010" data-expected-height="0" data-expected-client-height="0">
|
||||
<div class="list" data-expected-scroll-height="1010" data-expected-height="0" data-expected-client-height="0">
|
||||
<p class="item" style="top:0px;"></p>
|
||||
<p class="item" style="top:1000px;"></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue