mirror of
https://github.com/servo/servo.git
synced 2025-08-08 23:15:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,8 @@
|
|||
## Scroll Anchoring Web Platform Tests
|
||||
|
||||
Scroll anchoring adjusts the scroll position to prevent visible jumps (or
|
||||
"reflows") when content changes above the viewport.
|
||||
|
||||
* [explainer](https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md)
|
||||
* [spec](https://drafts.csswg.org/css-scroll-anchoring/)
|
||||
* [file bug / view open issues](https://github.com/w3c/csswg-drafts/issues)
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { margin: 0; }
|
||||
#scroller { overflow: scroll; width: 500px; height: 400px; }
|
||||
#space { height: 1000px; }
|
||||
#abs {
|
||||
position: absolute; background-color: red;
|
||||
width: 100px; height: 100px;
|
||||
left: 25px; top: 25px;
|
||||
}
|
||||
#rel {
|
||||
position: relative; background-color: green;
|
||||
left: 50px; top: 100px; width: 100px; height: 75px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space">
|
||||
<div id="abs"></div>
|
||||
<div id="before"></div>
|
||||
<div id="rel"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that anchor node selection skips an absolute-positioned descendant of
|
||||
// the scroller if and only if its containing block is outside the scroller.
|
||||
|
||||
test(() => {
|
||||
var scroller = document.querySelector("#scroller");
|
||||
var abs = document.querySelector("#abs");
|
||||
var before = document.querySelector("#before");
|
||||
var rel = document.querySelector("#rel");
|
||||
|
||||
// We should not anchor to #abs, because it does not move with the scroller.
|
||||
scroller.scrollTop = 25;
|
||||
before.style.height = "25px";
|
||||
assert_equals(scroller.scrollTop, 50);
|
||||
|
||||
// Reset, make #scroller a containing block.
|
||||
before.style.height = "0";
|
||||
scroller.scrollTop = 0;
|
||||
scroller.style.position = "relative";
|
||||
|
||||
// This time we should anchor to #abs.
|
||||
scroller.scrollTop = 25;
|
||||
before.style.height = "25px";
|
||||
assert_equals(scroller.scrollTop, 25);
|
||||
|
||||
}, "Abs-pos descendant with containing block outside the scroller.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body, html, #static { height: 0; }
|
||||
#abs {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
height: 1200px;
|
||||
padding: 50px;
|
||||
border: 5px solid gray;
|
||||
}
|
||||
#anchor {
|
||||
background-color: #afa;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="static">
|
||||
<div id="abs">
|
||||
<div id="changer"></div>
|
||||
<div id="anchor"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that the "bounds" of an element, for the purpose of visibility in the
|
||||
// anchor node selection algorithm, include any space occupied by the element's
|
||||
// positioned descendants.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 120;
|
||||
document.querySelector("#changer").style.height = "100px";
|
||||
assert_equals(document.scrollingElement.scrollTop, 220);
|
||||
}, "Abs-pos with zero-height static parent.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#space { height: 1000px; }
|
||||
#ancestor { position: relative; }
|
||||
#before, #anchor { height: 100px; }
|
||||
#anchor { background-color: green; }
|
||||
|
||||
.layout1 { padding-top: 20px; }
|
||||
.layout2 { margin-right: 20px; }
|
||||
.layout3 { max-width: 100px; }
|
||||
.layout4 { min-height: 400px; }
|
||||
.layout5 { position: static !important; }
|
||||
.layout6 { left: 20px; }
|
||||
.layout7 { transform: matrix(1, 0, 0, 1, 50, 50); }
|
||||
.nonLayout1 { color: red; }
|
||||
.nonLayout2 { font-size: 200%; }
|
||||
.nonLayout3 { box-shadow: 10px 10px 10px gray; }
|
||||
.nonLayout4 { opacity: 0.5; }
|
||||
.nonLayout5 { z-index: -1; }
|
||||
|
||||
.scroller {
|
||||
overflow: scroll;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="maybeScroller">
|
||||
<div id="space">
|
||||
<div id="ancestor">
|
||||
<div id="before"></div>
|
||||
<div id="anchor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that scroll anchoring is suppressed when one of the "layout-affecting"
|
||||
// properties is modified on an ancestor of the anchor node.
|
||||
|
||||
var scroller;
|
||||
var ancestor = document.querySelector("#ancestor");
|
||||
var before = document.querySelector("#before");
|
||||
|
||||
function runCase(classToApply, expectSuppression) {
|
||||
// Reset.
|
||||
scroller.scrollTop = 0;
|
||||
ancestor.className = "";
|
||||
before.style.height = "";
|
||||
scroller.scrollTop = 150;
|
||||
|
||||
ancestor.className = classToApply;
|
||||
before.style.height = "150px";
|
||||
|
||||
var expectedTop = expectSuppression ? 150 : 200;
|
||||
assert_equals(scroller.scrollTop, expectedTop);
|
||||
}
|
||||
|
||||
function runAll() {
|
||||
for (var i = 1; i <= 7; i++)
|
||||
runCase("layout" + i, true);
|
||||
for (var i = 1; i <= 5; i++)
|
||||
runCase("nonLayout" + i, false);
|
||||
}
|
||||
|
||||
test(() => {
|
||||
document.querySelector("#maybeScroller").className = "";
|
||||
scroller = document.scrollingElement;
|
||||
runAll();
|
||||
}, "Ancestor changes in document scroller.");
|
||||
|
||||
test(() => {
|
||||
scroller = document.querySelector("#maybeScroller");
|
||||
scroller.className = "scroller";
|
||||
runAll();
|
||||
}, "Ancestor changes in scrollable <div>.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#scroller {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
#a1, #space1, #a2, #space2 {
|
||||
height: 200px;
|
||||
}
|
||||
#a1, #a2 {
|
||||
background-color: #8f8;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space0"></div>
|
||||
<div id="a1"></div>
|
||||
<div id="space1"></div>
|
||||
<div id="a2"></div>
|
||||
<div id="space2"></div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that the anchor node is recomputed after an explicit change to the
|
||||
// scroll position.
|
||||
|
||||
test(() => {
|
||||
var scroller = document.querySelector("#scroller");
|
||||
scroller.scrollTop = 500;
|
||||
|
||||
// We should now be anchored to #a2.
|
||||
document.querySelector("#space1").style.height = "300px";
|
||||
assert_equals(scroller.scrollTop, 600);
|
||||
|
||||
scroller.scrollTop = 100;
|
||||
|
||||
// We should now be anchored to #a1. Make sure there is no adjustment from
|
||||
// moving #a2.
|
||||
document.querySelector("#space1").style.height = "400px";
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
|
||||
// Moving #a1 should produce an adjustment.
|
||||
document.querySelector("#space0").style.height = "100px";
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
}, "Anchor node recomputed after an explicit scroll occurs.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
#changer { height: 1500px; }
|
||||
#anchor {
|
||||
width: 150px;
|
||||
height: 1000px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="changer"></div>
|
||||
<div id="anchor"></div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Test that scroll anchoring interacts correctly with scroll bounds clamping
|
||||
// inside a scrollable <div> element.
|
||||
//
|
||||
// There should be no visible jump even if the content shrinks such that the
|
||||
// new max scroll position is less than the previous scroll position.
|
||||
|
||||
test(() => {
|
||||
var scroller = document.querySelector("#scroller");
|
||||
scroller.scrollTop = 1600;
|
||||
document.querySelector("#changer").style.height = "0";
|
||||
assert_equals(scroller.scrollTop, 100);
|
||||
}, "Anchoring combined with scroll bounds clamping in a <div>.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#changer { height: 1500px; }
|
||||
#anchor {
|
||||
width: 150px;
|
||||
height: 1000px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="changer"></div>
|
||||
<div id="anchor"></div>
|
||||
<script>
|
||||
|
||||
// Test that scroll anchoring interacts correctly with scroll bounds clamping:
|
||||
// There should be no visible jump even if the content shrinks such that the
|
||||
// new max scroll position is less than the previous scroll position.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 1600;
|
||||
document.querySelector("#changer").style.height = "0";
|
||||
assert_equals(document.scrollingElement.scrollTop, 100);
|
||||
}, "Anchoring combined with scroll bounds clamping in the document.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 2000px; margin: 0 10px; }
|
||||
#before, #after { height: 100px; }
|
||||
#before { margin-bottom: 100px; }
|
||||
#container { line-height: 100px; vertical-align: top; }
|
||||
|
||||
</style>
|
||||
<div id="container">
|
||||
<div id="before">before</div>
|
||||
<span id="inline">inline</span>
|
||||
<div id="after">after</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests anchoring inside an anonymous block box. The anchor selection algorithm
|
||||
// should descend into the children of the anonymous box even though it is fully
|
||||
// contained in the viewport.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 150;
|
||||
|
||||
var span = document.querySelector("#inline");
|
||||
var newSpan = document.createElement("span");
|
||||
newSpan.innerHTML = "inserted<br>";
|
||||
span.parentNode.insertBefore(newSpan, span);
|
||||
|
||||
assert_equals(document.scrollingElement.scrollTop, 250);
|
||||
}, "Anchor selection descent into anonymous block boxes.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 1000px; }
|
||||
div { height: 100px; }
|
||||
|
||||
</style>
|
||||
<div id="block1">abc</div>
|
||||
<div id="block2">def</div>
|
||||
<script>
|
||||
|
||||
// Tests that growing an element above the viewport produces a scroll
|
||||
// anchoring adjustment equal to the amount by which it grew.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 150;
|
||||
document.querySelector("#block1").style.height = "200px";
|
||||
assert_equals(document.scrollingElement.scrollTop, 250);
|
||||
}, "Minimal scroll anchoring example.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 2000px; }
|
||||
#scroller { overflow: scroll; width: 500px; height: 300px; }
|
||||
.anchor {
|
||||
position: relative; height: 100px; width: 150px;
|
||||
background-color: #afa; border: 1px solid gray;
|
||||
}
|
||||
#forceScrolling { height: 500px; background-color: #fcc; }
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="innerChanger"></div>
|
||||
<div id="innerAnchor" class="anchor"></div>
|
||||
<div id="forceScrolling"></div>
|
||||
</div>
|
||||
<div id="outerChanger"></div>
|
||||
<div id="outerAnchor" class="anchor"></div>
|
||||
<script>
|
||||
|
||||
// Test that we ignore the clipped content when computing visibility otherwise
|
||||
// we may end up with an anchor that we think is in the viewport but is not.
|
||||
|
||||
test(() => {
|
||||
document.querySelector("#scroller").scrollTop = 100;
|
||||
document.scrollingElement.scrollTop = 350;
|
||||
|
||||
document.querySelector("#innerChanger").style.height = "200px";
|
||||
document.querySelector("#outerChanger").style.height = "150px";
|
||||
|
||||
assert_equals(document.querySelector("#scroller").scrollTop, 300);
|
||||
assert_equals(document.scrollingElement.scrollTop, 500);
|
||||
}, "Anchor selection with nested scrollers.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 1000px; }
|
||||
#outer { width: 300px; }
|
||||
#outer:after { content: " "; clear:both; display: table; }
|
||||
#float {
|
||||
float: left; background-color: #ccc;
|
||||
height: 500px; width: 100%;
|
||||
}
|
||||
#inner { height: 100px; background-color: green; }
|
||||
|
||||
</style>
|
||||
<div id="outer">
|
||||
<div id="zeroheight">
|
||||
<div id="float">
|
||||
<div id="changer"></div>
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>after</div>
|
||||
<script>
|
||||
|
||||
// Tests that we descend into zero-height containers that have floating content.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 50;
|
||||
assert_equals(document.querySelector("#zeroheight").offsetHeight, 0);
|
||||
document.querySelector("#changer").style.height = "50px";
|
||||
assert_equals(document.scrollingElement.scrollTop, 100);
|
||||
}, "Zero-height container with float.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 1000px; }
|
||||
#outer { width: 300px; }
|
||||
#zeroheight { height: 0px; }
|
||||
#changer { height: 100px; background-color: red; }
|
||||
#bottom { margin-top: 600px; }
|
||||
|
||||
</style>
|
||||
<div id="outer">
|
||||
<div id="zeroheight">
|
||||
<div id="changer"></div>
|
||||
<div id="bottom">bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that the anchor selection algorithm descends into zero-height
|
||||
// containers that have overflowing content.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 200;
|
||||
document.querySelector("#changer").style.height = "200px";
|
||||
assert_equals(document.scrollingElement.scrollTop, 300);
|
||||
}, "Zero-height container with visible overflow.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 1000px; margin: 0; }
|
||||
#fixed, #content { width: 200px; height: 100px; }
|
||||
#fixed { position: fixed; left: 100px; top: 50px; }
|
||||
#before { height: 50px; }
|
||||
#content { margin-top: 100px; }
|
||||
|
||||
</style>
|
||||
<div id="fixed">fixed</div>
|
||||
<div id="before"></div>
|
||||
<div id="content">content</div>
|
||||
<script>
|
||||
|
||||
// Tests that the anchor selection algorithm skips fixed-positioned elements.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 100;
|
||||
document.querySelector("#before").style.height = "100px";
|
||||
assert_equals(document.scrollingElement.scrollTop, 150);
|
||||
}, "Fixed-position header.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 1000px }
|
||||
#outer { line-height: 100px }
|
||||
#ib1, #ib2 { display: inline-block }
|
||||
|
||||
</style>
|
||||
<span id=outer>
|
||||
<span id=ib1>abc</span>
|
||||
<br><br>
|
||||
<span id=ib2>def</span>
|
||||
</span>
|
||||
<script>
|
||||
|
||||
// Tests anchoring to an inline block inside a <span>.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 150;
|
||||
document.querySelector("#ib1").style.lineHeight = "150px";
|
||||
assert_equals(document.scrollingElement.scrollTop, 200);
|
||||
}, "Anchor selection descent into inline blocks.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
height: 1200px;
|
||||
}
|
||||
#header {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
}
|
||||
#evil {
|
||||
position: relative;
|
||||
top: -900px;
|
||||
height: 1000px;
|
||||
width: 100px;
|
||||
}
|
||||
#changer {
|
||||
height: 100px;
|
||||
}
|
||||
#anchor {
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="header">
|
||||
<div id="evil"></div>
|
||||
</div>
|
||||
<div id="changer"></div>
|
||||
<div id="anchor"></div>
|
||||
<script>
|
||||
|
||||
// Tests that the anchor selection algorithm correctly accounts for negative
|
||||
// positioning when computing bounds for visibility.
|
||||
|
||||
test(() => {
|
||||
document.scrollingElement.scrollTop = 250;
|
||||
document.querySelector("#changer").style.height = "200px";
|
||||
assert_equals(document.scrollingElement.scrollTop, 350);
|
||||
}, "Anchor selection accounts for negative positioning.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 2000px; overflow-anchor: none; }
|
||||
#scroller { overflow: scroll; width: 500px; height: 300px; }
|
||||
.anchor {
|
||||
position:relative; height: 100px; width: 150px;
|
||||
background-color: #afa; border: 1px solid gray;
|
||||
}
|
||||
#forceScrolling { height: 500px; background-color: #fcc; }
|
||||
|
||||
</style>
|
||||
<div id="outerChanger"></div>
|
||||
<div id="outerAnchor" class="anchor"></div>
|
||||
<div id="scroller">
|
||||
<div id="innerChanger"></div>
|
||||
<div id="innerAnchor" class="anchor"></div>
|
||||
<div id="forceScrolling"></div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that scroll anchoring can be disabled per-scroller with the
|
||||
// overflow-anchor property.
|
||||
|
||||
var divScroller = document.querySelector("#scroller");
|
||||
var docScroller = document.scrollingElement;
|
||||
var innerChanger = document.querySelector("#innerChanger");
|
||||
var outerChanger = document.querySelector("#outerChanger");
|
||||
|
||||
function setup() {
|
||||
divScroller.scrollTop = 100;
|
||||
docScroller.scrollTop = 100;
|
||||
innerChanger.style.height = "200px";
|
||||
outerChanger.style.height = "150px";
|
||||
}
|
||||
|
||||
function reset() {
|
||||
document.body.style.overflowAnchor = "";
|
||||
divScroller.style.overflowAnchor = "";
|
||||
divScroller.scrollTop = 0;
|
||||
docScroller.scrollTop = 0;
|
||||
innerChanger.style.height = "";
|
||||
outerChanger.style.height = "";
|
||||
}
|
||||
|
||||
test(() => {
|
||||
setup();
|
||||
|
||||
assert_equals(divScroller.scrollTop, 300,
|
||||
"Scroll anchoring should apply to #scroller.");
|
||||
|
||||
assert_equals(docScroller.scrollTop, 100,
|
||||
"Scroll anchoring should not apply to the document scroller.");
|
||||
|
||||
reset();
|
||||
}, "Disabled on document, enabled on div.");
|
||||
|
||||
test(() => {
|
||||
document.body.style.overflowAnchor = "auto";
|
||||
divScroller.style.overflowAnchor = "none";
|
||||
setup();
|
||||
|
||||
assert_equals(divScroller.scrollTop, 100,
|
||||
"Scroll anchoring should not apply to #scroller.");
|
||||
|
||||
assert_equals(docScroller.scrollTop, 250,
|
||||
"Scroll anchoring should apply to the document scroller.");
|
||||
|
||||
reset();
|
||||
}, "Enabled on document, disabled on div.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
#space {
|
||||
height: 1000px;
|
||||
}
|
||||
#header {
|
||||
background-color: #F5B335;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
#content {
|
||||
background-color: #D3D3D3;
|
||||
height: 400px;
|
||||
}
|
||||
.scroller {
|
||||
overflow: scroll;
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="maybeScroller">
|
||||
<div id="space">
|
||||
<div id="header"></div>
|
||||
<div id="before"></div>
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that scroll anchoring is suppressed when an element in the scroller
|
||||
// changes its in-flow state.
|
||||
|
||||
var scroller;
|
||||
|
||||
function runCase(oldPos, newPos, expectSuppression, skipInverse) {
|
||||
var header = document.querySelector("#header");
|
||||
var before = document.querySelector("#before");
|
||||
|
||||
header.style.position = oldPos;
|
||||
before.style.height = "0";
|
||||
scroller.scrollTop = 200;
|
||||
|
||||
header.style.position = newPos;
|
||||
before.style.height = "25px";
|
||||
|
||||
var expectedTop = expectSuppression ? 200 : 225;
|
||||
assert_equals(scroller.scrollTop, expectedTop);
|
||||
|
||||
if (!skipInverse)
|
||||
runCase(newPos, oldPos, expectSuppression, true);
|
||||
}
|
||||
|
||||
test(() => {
|
||||
scroller = document.scrollingElement;
|
||||
document.querySelector("#maybeScroller").className = "";
|
||||
|
||||
runCase("static", "fixed", true);
|
||||
runCase("static", "absolute", true);
|
||||
runCase("static", "relative", false);
|
||||
runCase("fixed", "absolute", false);
|
||||
runCase("fixed", "relative", true);
|
||||
runCase("absolute", "relative", true);
|
||||
}, "Position changes in document scroller.");
|
||||
|
||||
test(() => {
|
||||
scroller = document.querySelector("#maybeScroller");
|
||||
scroller.className = "scroller";
|
||||
|
||||
runCase("static", "fixed", true);
|
||||
runCase("static", "absolute", true);
|
||||
runCase("static", "relative", false);
|
||||
runCase("fixed", "absolute", false);
|
||||
runCase("fixed", "relative", true);
|
||||
runCase("absolute", "relative", true);
|
||||
}, "Position changes in scrollable <div>.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { margin: 0; }
|
||||
html {
|
||||
line-height: 0;
|
||||
width: 200vw;
|
||||
height: 200vh;
|
||||
}
|
||||
|
||||
html.ltr { direction: ltr; }
|
||||
html.rtl { direction: rtl; }
|
||||
|
||||
html.horz { writing-mode: horizontal-tb; }
|
||||
html.vlr { writing-mode: vertical-lr; }
|
||||
html.vrl { writing-mode: vertical-rl; }
|
||||
|
||||
.horz.ltr .cx2, .vlr .cx2 { left: 100vw; }
|
||||
.horz.rtl .cx2, .vrl .cx2 { right: 100vw; }
|
||||
.horz .cy2, .ltr .cy2 { top: 100vh; }
|
||||
.vlr.rtl .cy2, .vrl.rtl .cy2 { bottom: 100vh; }
|
||||
|
||||
#block_pusher, #inline_pusher {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#block_pusher { background-color: #e88; }
|
||||
#inline_pusher { background-color: #88e; }
|
||||
.vpush { height: 80px !important; }
|
||||
.hpush { width: 70px !important; }
|
||||
|
||||
#anchor {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: #8e8;
|
||||
min-width: 100px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
#grower { width: 0; height: 0; }
|
||||
.grow {
|
||||
width: 180px !important;
|
||||
height: 160px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="container">
|
||||
<div id="block_pusher"></div><br>
|
||||
<div id="inline_pusher"></div><div id="anchor">
|
||||
<div id="grower"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Tests that anchoring adjustments are only on the block layout axis and that
|
||||
// their magnitude is based on the movement of the block start edge of the
|
||||
// anchor node, for all 6 combinations of text direction and writing mode,
|
||||
// regardless of which corner of the viewport the anchor node overlaps.
|
||||
|
||||
var CORNERS = ["cx1 cy1", "cx2 cy1", "cx1 cy2", "cx2 cy2"];
|
||||
var docEl = document.documentElement;
|
||||
var scroller = document.scrollingElement;
|
||||
var blockPusher = document.querySelector("#block_pusher");
|
||||
var inlinePusher = document.querySelector("#inline_pusher");
|
||||
var grower = document.querySelector("#grower");
|
||||
var anchor = document.querySelector("#anchor");
|
||||
|
||||
function reset() {
|
||||
scroller.scrollLeft = 0;
|
||||
scroller.scrollTop = 0;
|
||||
blockPusher.className = "";
|
||||
inlinePusher.className = "";
|
||||
grower.className = "";
|
||||
}
|
||||
|
||||
function runCase(docClass, xDir, yDir, vert, expectXAdj, expectYAdj, corner) {
|
||||
docEl.className = docClass;
|
||||
anchor.className = corner;
|
||||
|
||||
var initX = 150 * xDir;
|
||||
var initY = 150 * yDir;
|
||||
|
||||
scroller.scrollLeft = initX;
|
||||
scroller.scrollTop = initY;
|
||||
|
||||
// Each corner moves a different distance.
|
||||
block_pusher.className = vert ? "hpush" : "vpush";
|
||||
inline_pusher.className = vert ? "vpush" : "hpush";
|
||||
grower.className = "grow";
|
||||
|
||||
assert_equals(scroller.scrollLeft, initX + expectXAdj);
|
||||
assert_equals(scroller.scrollTop, initY + expectYAdj);
|
||||
|
||||
reset();
|
||||
}
|
||||
|
||||
test(() => {
|
||||
CORNERS.forEach((corner) => {
|
||||
runCase("horz ltr", 1, 1, false, 0, -20, corner);
|
||||
});
|
||||
}, "Horizontal LTR.");
|
||||
|
||||
test(() => {
|
||||
CORNERS.forEach((corner) => {
|
||||
runCase("horz rtl", -1, 1, false, 0, -20, corner);
|
||||
});
|
||||
}, "Horizontal RTL.");
|
||||
|
||||
test(() => {
|
||||
CORNERS.forEach((corner) => {
|
||||
runCase("vlr ltr", 1, 1, true, -30, 0, corner);
|
||||
});
|
||||
}, "Vertical-LR LTR.");
|
||||
|
||||
test(() => {
|
||||
CORNERS.forEach((corner) => {
|
||||
runCase("vlr rtl", 1, -1, true, -30, 0, corner);
|
||||
});
|
||||
}, "Vertical-LR RTL.");
|
||||
|
||||
test(() => {
|
||||
CORNERS.forEach((corner) => {
|
||||
runCase("vrl ltr", -1, 1, true, 30, 0, corner);
|
||||
});
|
||||
}, "Vertical-RL LTR.");
|
||||
|
||||
test(() => {
|
||||
CORNERS.forEach((corner) => {
|
||||
runCase("vrl rtl", -1, -1, true, 30, 0, corner);
|
||||
});
|
||||
}, "Vertical-RL RTL.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body { height: 1000px }
|
||||
#A, #B { width: 100px; background-color: #afa; }
|
||||
#B { height: 100px; }
|
||||
#inner { width: 100px; height: 100px; background-color: pink; }
|
||||
#A { overflow-anchor: none; }
|
||||
|
||||
</style>
|
||||
<div id="changer1"></div>
|
||||
<div id="A">
|
||||
<div id="inner"></div>
|
||||
<div id="changer2"></div>
|
||||
</div>
|
||||
<div id="B"></div>
|
||||
<script>
|
||||
|
||||
// Tests that an element with overflow-anchor: none is excluded, along with its
|
||||
// DOM descendants, from the anchor selection algorithm.
|
||||
|
||||
test(() => {
|
||||
var changer1 = document.querySelector("#changer1");
|
||||
var changer2 = document.querySelector("#changer2");
|
||||
|
||||
document.scrollingElement.scrollTop = 50;
|
||||
changer1.style.height = "100px";
|
||||
changer2.style.height = "50px";
|
||||
|
||||
// We should anchor to #B, not #A or #inner, despite them being visible.
|
||||
assert_equals(document.scrollingElement.scrollTop, 200);
|
||||
|
||||
document.querySelector("#A").style.overflowAnchor = "auto";
|
||||
document.scrollingElement.scrollTop = 150;
|
||||
|
||||
changer1.style.height = "200px";
|
||||
changer2.style.height = "100px";
|
||||
|
||||
// We should now anchor to #inner, which is moved only by #changer1.
|
||||
assert_equals(document.scrollingElement.scrollTop, 250);
|
||||
}, "Subtree exclusion with overflow-anchor.");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
font-size: 100px;
|
||||
width: 200px;
|
||||
height: 1000px;
|
||||
line-height: 100px;
|
||||
}
|
||||
|
||||
</style>
|
||||
abc <b id=b>def</b> ghi
|
||||
<script>
|
||||
|
||||
// Tests anchoring to a text node that is moved by preceding text.
|
||||
|
||||
test(() => {
|
||||
var b = document.querySelector("#b");
|
||||
var preText = b.previousSibling;
|
||||
document.scrollingElement.scrollTop = 150;
|
||||
preText.nodeValue = "abcd efg ";
|
||||
assert_equals(document.scrollingElement.scrollTop, 250);
|
||||
}, "Anchoring with text wrapping changes.");
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue