mirror of
https://github.com/servo/servo.git
synced 2025-08-14 01:45:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -35,6 +35,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="flex-item"></div>
|
||||
|
|
@ -59,5 +61,3 @@ window.addEventListener('load', function() {
|
|||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="flex-container">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
|
|
@ -79,5 +81,3 @@ window.addEventListener('load', function() {
|
|||
<div class="green flex-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="grid-item" style="grid-column: 1;"></div>
|
||||
|
|
@ -72,5 +74,3 @@ window.addEventListener('load', function() {
|
|||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,6 +62,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<p>You should see three green boxes of varying size below. There should be no red or blue.</p>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="grid-container">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
|
|
@ -91,5 +93,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<p>You should see three green boxes of varying size above. There should be no red or blue.</p>
|
||||
|
|
|
|||
|
|
@ -28,8 +28,10 @@ window.addEventListener('load', function() {
|
|||
document.querySelector('.scroller').scrollTop = 100;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div>You should see a sticky link at the top of the scrollable area.</div>
|
||||
|
||||
<div class='scroller'>
|
||||
<a href='#' class='positioned'>Link</a>
|
||||
<div class='spacer'></div>
|
||||
</div>
|
||||
<div>You should see a sticky link at the top of the scrollable area.</div>
|
||||
|
|
|
|||
|
|
@ -32,8 +32,9 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see a sticky link at the top of the scrollable area.</div>
|
||||
|
||||
<div class='scroller'>
|
||||
<a href='#' class='sticky'>Link</a>
|
||||
<div class='spacer'></div>
|
||||
</div>
|
||||
<div>You should see a sticky link at the top of the scrollable area.</div>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green rectangles below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
|
|
@ -65,5 +67,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green rectangles below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator inline" style="top: 150px;">XXX</div>
|
||||
|
|
@ -105,5 +107,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Focusing on visible sticky input box should not scroll the page.</title>
|
||||
<title>Focusing on visible sticky input box should scroll to unshifted sticky position.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that focusing on visible sticky
|
||||
positioned input box should not scroll the page." />
|
||||
|
|
@ -25,6 +25,6 @@ test(() => {
|
|||
var input = document.getElementById('input');
|
||||
window.scrollTo(0, 100);
|
||||
input.focus();
|
||||
assert_equals(window.scrollY, 100);
|
||||
}, 'Focusing on visible sticky input box should not scroll the page.');
|
||||
assert_equals(window.scrollY, 0);
|
||||
}, 'Focusing on visible sticky input box should reset the scroll to unshifted sticky position.');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green and three yellow rectangles below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
|
|
@ -70,5 +72,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three yellow rectangles above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -77,6 +77,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green and three yellow rectangles below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="outerIndicator" style="top: 150px;">X</div>
|
||||
|
|
@ -115,5 +117,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green and three yellow rectangles above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green rectangles below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
|
|
@ -62,5 +64,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green rectangles below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
|
|
@ -129,5 +131,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green rectangles above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Nested position:sticky table elements should render correctly</title>
|
||||
<link rel="match" href="position-sticky-nested-table-ref.html" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that nested position:sticky table elements render correctly" />
|
||||
|
||||
<script src="../resources/ref-rectangle.js"></script>
|
||||
|
||||
<style>
|
||||
.group {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.contents {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.prepadding {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
td, th {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
th {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background-color: red;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
document.getElementById('scroller1').scrollTop = 50;
|
||||
document.getElementById('scroller2').scrollTop = 125;
|
||||
document.getElementById('scroller3').scrollTop = 250;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green rectangles below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr>
|
||||
<th class="sticky"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller2" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 150px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr>
|
||||
<th class="sticky"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller3" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 250px;"></div>
|
||||
<div class="prepadding"></div>
|
||||
<table>
|
||||
<thead class="sticky">
|
||||
<tr>
|
||||
<th class="sticky"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
<tr><td></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,14 +2,14 @@
|
|||
<title>Sticky positioning can cause overflow but must be accessible.</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that a sticky positioned element
|
||||
can cause overflow but must still be accessible through scrolling" />
|
||||
does not extend overflow" />
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
overflow: scroll;
|
||||
overflow-y: scroll;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
|
@ -30,31 +30,15 @@ can cause overflow but must still be accessible through scrolling" />
|
|||
<div class="sticky box"></div>
|
||||
</div>
|
||||
|
||||
<div id="scroller2" class="container">
|
||||
<div class="sticky box"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
var scroller = document.getElementById('scroller1');
|
||||
var sticky = scroller.querySelector('.sticky');
|
||||
|
||||
var stickyOffset = sticky.offsetTop -
|
||||
scroller.scrollTop - scroller.offsetTop;
|
||||
assert_equals(stickyOffset, 200);
|
||||
assert_equals(scroller.scrollHeight, 250);
|
||||
}, 'sticky position offset should be able to cause overflow');
|
||||
|
||||
test(() => {
|
||||
var scroller = document.getElementById('scroller2');
|
||||
var sticky = scroller.querySelector('.sticky');
|
||||
|
||||
scroller.scrollTop = 150;
|
||||
var stickyOffset = sticky.offsetTop -
|
||||
scroller.scrollTop - scroller.offsetTop;
|
||||
assert_equals(stickyOffset, 50);
|
||||
// Scroll height should be unaffected.
|
||||
assert_equals(scroller.scrollHeight, 250);
|
||||
assert_equals(scroller.scrollHeight, 100);
|
||||
}, 'sticky position offset should be contained by scrolling box');
|
||||
|
||||
}, 'sticky position offset in overflow should be accessible');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@ should be allowed." />
|
|||
<body></body>
|
||||
|
||||
<script>
|
||||
// Sticky is valid for all elements except table-column-group and table-column.
|
||||
const VALID_STICKY_DISPLAY_TYPES = [
|
||||
const displayTypes = [
|
||||
'block',
|
||||
'inline',
|
||||
'run-in',
|
||||
|
|
@ -30,6 +29,10 @@ const VALID_STICKY_DISPLAY_TYPES = [
|
|||
'table-row',
|
||||
'table-cell',
|
||||
'table-caption',
|
||||
// Sticky does not apply to table-column or table-column-group, but the
|
||||
// computed value should still be sticky.
|
||||
'table-column',
|
||||
'table-column-group',
|
||||
'ruby-base',
|
||||
'ruby-text',
|
||||
'ruby-base-container',
|
||||
|
|
@ -38,13 +41,8 @@ const VALID_STICKY_DISPLAY_TYPES = [
|
|||
'none',
|
||||
];
|
||||
|
||||
const INVALID_STICKY_DISPLAY_TYPES = [
|
||||
'table-column-group',
|
||||
'table-column',
|
||||
];
|
||||
|
||||
test(() => {
|
||||
for (displayValue of VALID_STICKY_DISPLAY_TYPES) {
|
||||
for (displayValue of displayTypes) {
|
||||
let div = document.createElement('div');
|
||||
let style = `position: sticky; display: ${displayValue};`;
|
||||
div.setAttribute('style', style);
|
||||
|
|
@ -57,17 +55,5 @@ test(() => {
|
|||
}
|
||||
document.body.removeChild(div);
|
||||
}
|
||||
|
||||
for (displayValue of INVALID_STICKY_DISPLAY_TYPES) {
|
||||
let div = document.createElement('div');
|
||||
let style = `position: sticky; display: ${displayValue};`;
|
||||
div.setAttribute('style', style);
|
||||
document.body.appendChild(div);
|
||||
|
||||
assert_not_equals(getComputedStyle(div).position, 'sticky',
|
||||
`Expected sticky to be invalid for display: ${displayValue}`);
|
||||
document.body.removeChild(div);
|
||||
}
|
||||
}, 'The value of sticky for the position property should be parsed correctly');
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see four green squares below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
|
|
@ -100,5 +102,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see four green squares above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -108,6 +108,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see four green squares below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator box" style="top: 175px;"></div>
|
||||
|
|
@ -155,5 +157,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see four green squares above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>position:sticky should operate correctly</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="author" href="mailto:masonf@chromium.org">
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>position:sticky should operate correctly</title>
|
||||
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
|
||||
<link rel="author" href="mailto:masonf@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
||||
<meta name="assert" content="This test checks that the combination of position:sticky, overflow clip, and out-of-flow descendants are properly displayed when scrolled" />
|
||||
<link rel="match" href="position-sticky-scroll-with-clip-and-abspos-ref.html">
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="indicator box"></div>
|
||||
<div>You should see a single green box below. No red or blue should be visible.</div>
|
||||
|
||||
<div>You should see a single green box above. No red or blue should be visible.</div>
|
||||
<div class="indicator box"></div>
|
||||
|
|
|
|||
|
|
@ -35,11 +35,12 @@ window.addEventListener('load', function() {
|
|||
createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>You should see a single green box below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="indicator box"></div>
|
||||
<div class="sticky box">
|
||||
<!-- Because sticky forms a stacking context, this child remains on bottom
|
||||
even though it has a higher z-index than the indicator box. -->
|
||||
<div class="child box"></div>
|
||||
</div>
|
||||
|
||||
<div>You should see a single green box above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="prepadding"></div>
|
||||
|
|
@ -45,4 +47,3 @@ window.addEventListener('load', function() {
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
|
||||
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="contents">
|
||||
<div class="indicator" style="top: 155px;"></div>
|
||||
|
|
@ -72,4 +74,3 @@ window.addEventListener('load', function() {
|
|||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div>There should be a green square at the top of the scroll view and no red or blue visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -120,5 +122,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -123,5 +125,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 100px;"></div>
|
||||
|
|
@ -114,5 +116,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 150px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="left: 150px;"></div>
|
||||
|
|
@ -114,5 +116,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -123,5 +125,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -120,5 +122,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<!-- .sticky element pushed as far up as possible to table edge -->
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
|
|
@ -117,5 +119,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
<div class="indicator" style="top: 100px;"></div>
|
||||
|
|
@ -58,5 +60,3 @@ window.addEventListener('load', function() {
|
|||
<div class="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -67,6 +67,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see three green boxes below. No red or blue should be visible.</div>
|
||||
|
||||
<!-- .sticky element not yet stuck -->
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller">
|
||||
|
|
@ -117,5 +119,3 @@ window.addEventListener('load', function() {
|
|||
<div class="postpadding"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see three green boxes above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see two green blocks below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller" style="writing-mode: vertical-lr;">
|
||||
<div class="contents">
|
||||
|
|
@ -54,5 +56,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see two green blocks above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ window.addEventListener('load', function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>You should see two green blocks below. No red or blue should be visible.</div>
|
||||
|
||||
<div class="group">
|
||||
<div id="scroller1" class="scroller" style="writing-mode: vertical-lr;">
|
||||
<div class="indicator" style="left: 40px; top: 100px;">XXX</div>
|
||||
|
|
@ -69,5 +71,3 @@ window.addEventListener('load', function() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>You should see two green blocks above. No red or blue should be visible.</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<title>Sticky positioned element should reset the scroll position to unshifted position</title>
|
||||
<link rel="author" title="Seokho Song" href="mailto:0xdevssh@gmail.com">
|
||||
<link rel="help" href="https://crbug.com/664246">
|
||||
<link rel="help" href="https://crbug.com/1178622">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
|
||||
<div id="scrollEl" style="height:100px; overflow-y: auto; scroll-padding:20px 20px 20px 20px;">
|
||||
<input id="stickyEl" type="text" style="position:sticky;top:0" />
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
<div>7</div>
|
||||
<div>8</div>
|
||||
<div>9</div>
|
||||
<div>10</div>
|
||||
<div>11</div>
|
||||
<div>12</div>
|
||||
<div>13</div>
|
||||
<div>14</div>
|
||||
<div>15</div>
|
||||
<div>16</div>
|
||||
<div>17</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
async_test(t => {
|
||||
var scrollEl = document.getElementById("scrollEl");
|
||||
var stickyEl = document.getElementById("stickyEl");
|
||||
stickyEl.focus()
|
||||
scrollEl.scrollTo(0, scrollEl.scrollHeight);
|
||||
scrollEl.addEventListener('input', ()=> {
|
||||
requestAnimationFrame(t.step_func(()=>{
|
||||
assert_equals(scrollEl.scrollTop, 0,
|
||||
"should reset the scroll to unshifted sticky position");
|
||||
t.done()
|
||||
}))
|
||||
})
|
||||
test_driver.send_keys(stickyEl, "A")
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue