Skip to content

GitLab

T
tangled
Commit 97ce7c88 authored by rob.buis@samsung.com's avatar rob.buis@samsung.com
Browse files
Options

Add tests for sticky and various display values 

Add tests for sticky and various display values, tests should show up all green.

BUG=231754

Review URL: https://codereview.chromium.org/178453002

git-svn-id: svn://svn.chromium.org/blink/trunk@168595 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 6bd0742a
Hide whitespace changes
Inline Side-by-side
Showing with 533 additions and 0 deletions
third_party/WebKit/LayoutTests/fast/css/sticky/sticky-display-expected.html 0 → 100644
View file @ 97ce7c88
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
width: 2000px;
overflow: hidden; /* hide scrollbars */
}
p {
position: relative;
left: 100px;
}
.group {
position: relative;
width: 500px;
height: 200px;
}
.container {
width: 400px;
height: 180px;
outline: 2px solid black;
}
.box {
width: 200px;
height: 180px;
}
.sticky {
position: sticky;
left: 100px;
background-color: green;
}
.indicator {
position: absolute;
top: 0;
left: 0;
background-color: red;
}
</style>
<script>
function doTest()
{
window.scrollTo(100, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<p>Block</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box"></div>
</div>
</div>
<p>Table</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box"></div>
</div>
</div>
<p>Grid</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box"></div>
</div>
</div>
<p>Flex box</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box"></div>
</div>
</div>
<div style="position: absolute; top: 500px;">
This test checks the behavior of position:sticky with various display values.
There should be no red.
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/sticky/sticky-display.html 0 → 100644
View file @ 97ce7c88
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
width: 2000px;
overflow: hidden; /* hide scrollbars */
}
p {
position: relative;
left: 100px;
}
.group {
position: relative;
width: 500px;
height: 200px;
}
.container {
width: 400px;
height: 180px;
outline: 2px solid black;
}
.box {
width: 200px;
height: 180px;
}
.sticky {
position: sticky;
left: 100px;
background-color: green;
}
.indicator {
position: absolute;
top: 0;
left: 0;
background-color: red;
}
</style>
<script>
function doTest()
{
window.scrollTo(100, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<p>Block</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box"></div>
</div>
</div>
<p>Table</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box" style="display: table"></div>
</div>
</div>
<p>Grid</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box" style="display: grid"></div>
</div>
</div>
<p>Flex box</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="container">
<div class="sticky box" style="display: flex"></div>
</div>
</div>
<div style="position: absolute; top: 500px;">
This test checks the behavior of position:sticky with various display values.
There should be no red.
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox-expected.html 0 → 100644
View file @ 97ce7c88
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
width: 2000px;
overflow: hidden; /* hide scrollbars */
}
p {
position: relative;
left: 100px;
}
.group {
position: relative;
width: 500px;
height: 200px;
}
.flex-container {
position: relative;
display: flex;
width: 200px;
height: 180px;
flex-flow: row wrap;
outline: 2px solid black;
}
.box {
width: 100px;
height: 180px;
}
.flex-item {
width: 100px;
height: 180px;
display: flex;
}
.sticky {
position: relative;
background-color: green;
}
</style>
<script>
function doTest()
{
window.scrollTo(100, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<p>This test checks the behavior of position:sticky with flex box items.
There should be no red.</p>
<div class="group" style="left: 100px">
<div class="flex-container" style="left: 0px;">
<div class="sticky flex-item" style="left:100px"></div>
<div class="flex-item" style="background-color: green;"></div>
</div>
</div>
<div class="group" style="left: 150px">
<div class="flex-container" style="left: 0px;">
<div class="sticky flex-item" style="left:50px"></div>
<div class="flex-item" style="background-color: green;"></div>
</div>
</div>
<div class="group" style="left: 200px">
<div class="flex-container" style="left: 0px;">
<div class="sticky flex-item"></div>
<div class="flex-item" style="background-color: green;"></div>
</div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox.html 0 → 100644
View file @ 97ce7c88
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
width: 2000px;
overflow: hidden; /* hide scrollbars */
}
p {
position: relative;
left: 100px;
}
.group {
position: relative;
width: 500px;
height: 200px;
}
.flex-container {
position: relative;
display: flex;
width: 200px;
height: 180px;
flex-flow: row wrap;
outline: 2px solid black;
}
.box {
width: 100px;
height: 180px;
}
.flex-item {
width: 100px;
height: 180px;
display: flex;
}
.sticky {
position: sticky;
left: 100px;
background-color: green;
}
.indicator {
position: absolute;
top: 0;
left: 0;
background-color: red;
}
</style>
<script>
function doTest()
{
window.scrollTo(100, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<p>This test checks the behavior of position:sticky with flex box items.
There should be no red.</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="flex-container" style="left: 0px;">
<div class="sticky flex-item"></div>
<div class="flex-item" style="background-color: green;"></div>
</div>
</div>
<div class="group" style="left: 150px">
<div class="indicator box" style="left: 50px;"></div>
<div class="flex-container" style="left: 0px;">
<div class="sticky flex-item"></div>
<div class="flex-item" style="background-color: green;"></div>
</div>
</div>
<div class="group" style="left: 200px">
<div class="indicator box" style="left: 0;"></div>
<div class="flex-container" style="left: 0px;">
<div class="sticky flex-item"></div>
<div class="flex-item" style="background-color: green;"></div>
</div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/sticky/sticky-grid-expected.html 0 → 100644
View file @ 97ce7c88
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
width: 2000px;
overflow: hidden; /* hide scrollbars */
}
p {
position: relative;
left: 100px;
}
.group {
position: relative;
width: 500px;
height: 200px;
}
.grid-container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
width: 200px;
height: 180px;
outline: 2px solid black;
}
.box {
width: 100px;
height: 180px;
}
.grid-item {
width: 100%;
height: 100%;
}
.sticky {
left: 100px;
background-color: green;
}
</style>
<script>
function doTest()
{
window.scrollTo(100, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<p>This test checks the behavior of position:sticky with grid items.
There should be no red.</p>
<div class="group" style="left: 100px">
<div class="grid-container" style="left: 100px">
<div class="sticky grid-item" style="grid-column: 2; grid-row: 1;"></div>
<div class="grid-item" style="grid-column: 1; grid-row: 1;"></div>
</div>
</div>
<div class="group" style="left: 150px">
<div class="grid-container" style="left: 100px; grid-template-columns: 25% 50% 25%">
<div class="sticky grid-item" style="grid-column: 2; grid-row: 1;"></div>
<div class="grid-item" style="grid-column: 3; grid-row: 1;"></div>
</div>
</div>
<div class="group" style="left: 200px">
<div class="grid-container" style="left: 100px">
<div class="sticky grid-item" style="grid-column: 1; grid-row: 1;"></div>
<div class="grid-item" style="grid-column: 2; grid-row: 1;"></div>
</div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/css/sticky/sticky-grid.html 0 → 100644
View file @ 97ce7c88
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
width: 2000px;
overflow: hidden; /* hide scrollbars */
}
p {
position: relative;
left: 100px;
}
.group {
position: relative;
width: 500px;
height: 200px;
}
.grid-container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
width: 200px;
height: 180px;
outline: 2px solid black;
}
.box {
width: 100px;
height: 180px;
}
.grid-item {
width: 100%;
height: 100%;
}
.sticky {
position: sticky;
left: 100px;
background-color: green;
}
.indicator {
position: absolute;
top: 0;
left: 0;
background-color: red;
}
</style>
<script>
function doTest()
{
window.scrollTo(100, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<p>This test checks the behavior of position:sticky with grid items.
There should be no red.</p>
<div class="group" style="left: 100px">
<div class="indicator box" style="left: 100px;"></div>
<div class="grid-container">
<div class="sticky grid-item" style="grid-column: 1; grid-row: 1;"></div>
<div class="grid-item" style="grid-column: 2; grid-row: 1;"></div>
</div>
</div>
<div class="group" style="left: 150px">
<div class="indicator box" style="left: 50px;"></div>
<div class="grid-container" style="left: 100px">
<div class="sticky grid-item" style="grid-column: 1; grid-row: 1;"></div>
<div class="grid-item" style="grid-column: 2; grid-row: 1;"></div>
</div>
</div>
<div class="group" style="left: 200px">
<div class="indicator box" style="left: 0px;"></div>
<div class="grid-container" style="left: 100px">
<div class="sticky grid-item" style="grid-column: 1; grid-row: 1;"></div>
<div class="grid-item" style="grid-column: 2; grid-row: 1;"></div>
</div>
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment