Skip to content

GitLab

T
tangled
Commit cc60eca8 authored by Robert Flack's avatar Robert Flack Committed by Commit Bot
Browse files
Options

Add wpt test for sticky position causing overflow 

By spec (https://www.w3.org/TR/css-position-3/#sticky-pos) a sticky position
offset can cause overflow but must be capable of being scrolled to. Despite
not working in Chrome yet this adds web platform tests for this.

BUG=752022

Change-Id: I3bc8b384e4459cd4d1498f64c376e764fba71091
Reviewed-on: https://chromium-review.googlesource.com/825165Reviewed-by: default avatarStephen McGruer <smcgruer@chromium.org>
Commit-Queue: Robert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#524052}
parent 9966b73a
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 0 deletions
third_party/WebKit/LayoutTests/TestExpectations
View file @ cc60eca8
...@@ -334,6 +334,9 @@ crbug.com/711807 external/wpt/css/CSS2/normal-flow/replaced-intrinsic-001.xht [ ...@@ -334,6 +334,9 @@ crbug.com/711807 external/wpt/css/CSS2/normal-flow/replaced-intrinsic-001.xht [
crbug.com/711807 external/wpt/css/CSS2/normal-flow/replaced-intrinsic-002.xht [ Skip ] crbug.com/711807 external/wpt/css/CSS2/normal-flow/replaced-intrinsic-002.xht [ Skip ]
crbug.com/711807 external/wpt/css/CSS2/normal-flow/width-inherit-001.xht [ Skip ] crbug.com/711807 external/wpt/css/CSS2/normal-flow/width-inherit-001.xht [ Skip ]
#### external/wpt/css/css-position
crbug.com/752022 external/wpt/css/css-position/position-sticky-offset-overflow.html [ Failure ]
#### crbug.com/783229 overflow #### crbug.com/783229 overflow
crbug.com/724697 overflow/overflow-basic-002.html [ Failure ] crbug.com/724697 overflow/overflow-basic-002.html [ Failure ]
crbug.com/724701 overflow/overflow-basic-004.html [ Failure ] crbug.com/724701 overflow/overflow-basic-004.html [ Failure ]
......
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-offset-overflow.html 0 → 100644
View file @ cc60eca8
<!DOCTYPE html>
<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" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.container {
overflow: scroll;
width: 100px;
height: 100px;
}
.box {
background-color: green;
height: 50px;
width: 50px;
}
.sticky {
position: sticky;
top: 200px; /* Forces the sticky position element below the overflow. */
}
</style>
<div id="scroller1" class="container">
<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);
}, 'sticky position offset in overflow should be accessible');
</script>
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