Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-08 06:55:31 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #16463 - mrobinson:various-overflow-fixes, r=emilio

Browse source 
Fix various issues with overflow clipping

When dealing absolutely positioned items, we should use clip of our
containing block, even if our containing block doesn't itself establish
a new overflow clip. Additionally, we need to properly handle
assigning scroll root ids to fragments of inline elements.

We add a test for this behavior.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [ ] These changes fix #__ (github issue number if applicable).

<!-- Either: -->
- [x] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/16463)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2017-04-17 09:13:48 -05:00 • committed by GitHub
commit b9274b7527
4 changed files with 111 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

25
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -4127,6 +4127,18 @@
{}
]
],
"css/overflow_clipping.html": [
[
"/_mozilla/css/overflow_clipping.html",
[
[
"/_mozilla/css/overflow_clipping_ref.html",
"=="
]
],
{}
]
],
"css/overflow_position_abs_inline_block.html": [
[
"/_mozilla/css/overflow_position_abs_inline_block.html",
@ -8483,6 +8495,11 @@
{}
]
],
"css/overflow_clipping_ref.html": [
[
{}
]
],
"css/overflow_position_abs_inline_block_ref.html": [
[
{}
@ -22795,6 +22812,14 @@
"3798d0efb1b9858ad47ecf6f09357c3c0dae1b80",
"support"
],
"css/overflow_clipping.html": [
"f87d3c74c15393fb490e3855c88f6331fce9e077",
"reftest"
],
"css/overflow_clipping_ref.html": [
"d9a6a3b4fa21742d0f4ddd3f348534ec35ab8579",
"support"
],
"css/overflow_position_abs_inline_block.html": [
"7550f9c9f3e91635c15554d9ae21e172944054e6",
"reftest"

39
tests/wpt/mozilla/tests/css/overflow_clipping.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<link rel='match' href='overflow_clipping_ref.html'>
<style>
.test { float: left; margin-right: 25px; }
.box { height: 50px; width: 50px; }
.grayer { background: rgb(80, 80, 80); }
.grayest { background: rgb(0, 0, 0); }
.overflowing-absolute-child {
position: absolute;
left: 10px;
top: 10px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="test grayest box" style="overflow: scroll">
<div style="position: relative;">
<div class="overflowing-absolute-child grayer"></div>
</div>
</div>
<!-- This box is positioned and sized very strangely because of
https://github.com/servo/servo/issues/16462. For now we diable
this test until the bug is fixed.
<div class="test grayest box" style="overflow: scroll">
<span style="position: relative;">
<div class="overflowing-absolute-child grayer"></div>
</span>
</div>
-->
</body>
</html>

26
tests/wpt/mozilla/tests/css/overflow_clipping_ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style>
.test { float: left; margin-right: 25px; }
.box { height: 50px; width: 50px; }
.smallbox { height: 40px; width: 40px; }
.grayer { background: rgb(80, 80, 80); }
.grayest { background: rgb(0, 0, 0); }
</style>
</head>
<body>
<div class="test grayest box">
<div class="grayer smallbox" style="margin-left: 10px; margin-top: 10px;"></div>
</div>
<!-- This box is positioned and sized very strangely because of
https://github.com/servo/servo/issues/16462. For now we diable
this test until the bug is fixed.
<div class="test grayest box">
<div class="grayer smallbox" style="margin-left: 10px; margin-top: 25px; height: 25px;"></div>
</div>
-->
</body>
</html>