Fix the size and position of overflow:scroll clip

The clip for overflow:scroll clip was not including the space for
padding, which could lead to some content being clipped when it
shouldn't. This changes fixes that issue.

A test is skipped because this fix also stops hiding a failure due to
mispositioned text.

Fixes #16576.
This commit is contained in:
Martin Robinson 2017-06-30 09:57:20 -07:00
parent 9d74ae890b
commit 39a98d4ff1
6 changed files with 102 additions and 3 deletions

View file

@ -29,4 +29,4 @@ p {
<script>
document.getElementById('outer').scrollTop = 15;
</script>
</body></html>
</body></html>

View file

@ -0,0 +1,3 @@
[attachment-local-clipping-image-6.htm]
type: reftest
expected: FAIL

View file

@ -4199,6 +4199,18 @@
{}
]
],
"css/overflow_hidden_clip.html": [
[
"/_mozilla/css/overflow_hidden_clip.html",
[
[
"/_mozilla/css/overflow_hidden_clip_ref.html",
"=="
]
],
{}
]
],
"css/overflow_position_abs_inline_block.html": [
[
"/_mozilla/css/overflow_position_abs_inline_block.html",
@ -9267,6 +9279,11 @@
{}
]
],
"css/overflow_hidden_clip_ref.html": [
[
{}
]
],
"css/overflow_position_abs_inline_block_ref.html": [
[
{}
@ -24829,6 +24846,14 @@
"f645ece68f6c7afe273daee4d1ec172c7d245632",
"support"
],
"css/overflow_hidden_clip.html": [
"bd829a86a3afba8d50bd95877b01d8f291428319",
"reftest"
],
"css/overflow_hidden_clip_ref.html": [
"1fb1cb37455ec869689beee8937e409e57422c73",
"support"
],
"css/overflow_position_abs_inline_block.html": [
"7550f9c9f3e91635c15554d9ae21e172944054e6",
"reftest"

View file

@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Size of clip used for overflow:hidden</title>
<link rel="match" href="overflow_hidden_clip_ref.html">
</head>
<body>
<style>
#box {
background-color: black;
height: 50px;
overflow: hidden;
padding: 0 10px;
position: relative;
width: 30px;
}
#inside {
background-color: grey;
position: absolute;
right: 0px;
width: 25px;
height: 50px;
}
</style>
<div id="box">
<div id="inside">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<style>
#black {
background-color: black;
height: 50px;
position: relative;
width: 25px;
}
#grey {
background-color: grey;
position: relative;
width: 25px;
height: 50px;
left: 25px;
top: -50px;
}
</style>
<div id="black"></div>
<div id="grey"></div>
</div>
</body>
</html>