LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html - Issue 168823003: Take padding into account during calculation of overflow constraining rect for sticky positioning.

Unified Diff: LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html

Issue 168823003: Take padding into account during calculation of overflow constraining rect for sticky positioning. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Rebased patch. Created 6 years, 10 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

Index: LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html

diff --git a/LayoutTests/fast/css/sticky/sticky-top-overflow.html b/LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html

similarity index 62%

copy from LayoutTests/fast/css/sticky/sticky-top-overflow.html

copy to LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html

index dfda8ae3db7452f59994493c3ebad433e3042c88..89d2f81aa36b017f63ae5abe2d33b0f6eee955aa 100644

--- a/LayoutTests/fast/css/sticky/sticky-top-overflow.html

+++ b/LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html

@@ -1,4 +1,5 @@

<!DOCTYPE html>

<html>

<head>

<style>

@@ -11,8 +12,9 @@

#overflow {

width: 600px;

- height: 550px;

+ height: 400px;

overflow: hidden; /* Still scrollable with JS */

+ padding: 20px;

border: 1px solid black;

}

@@ -23,18 +25,18 @@

}

.container {

width: 100px;

- height: 400px;

+ height: 300px;

outline: 2px solid black;

}

.box {

width: 100px;

- height: 200px;

+ height: 150px;

}

.sticky {

position: sticky;

- top: 100px;

+ bottom: 0px;

background-color: green;

}

@@ -48,36 +50,41 @@

function doTest()

{

- document.getElementById('overflow').scrollTop = 120;

+ document.getElementById('overflow').scrollTop = 100;

}

window.addEventListener('load', doTest, false);

</script>

</head>

<body>

-This test checks that sticky positioned elements are contained by their enclosing ancestor with an overflow clip.

-There should be no red.

- <div class="group">

- <div class="indicator box" style="top: 200px;"></div>

+ <div class="group" style="top: 350px">

+ <div class="indicator box" style="top: 0px;"></div>

+ <div class="box"></div>

</div>

- <div class="group" style="top: 100px">

- <div class="indicator box" style="top: 120px;"></div>

+ <div class="group" style="top: 250px">

+ <div class="indicator box" style="top: 100px;"></div>

+ <div class="box"></div>

</div>

- <div class="group" style="top: 240px">

- <div class="indicator box" style="top: 0;"></div>

+ <div class="group" style="top: 200px">

+ <div class="indicator box" style="top: 150px;"></div>

+ <div class="box"></div>

</div>

+ <div style="position: absolute; top: 500px;">

+ This test checks that sticky positioned blocks positioned correctly in overflow with padding.

+ There should be no red.

+ </div>

</body>

</html>

« no previous file with comments | « no previous file | LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding-expected.html » ('j') | no next file with comments »