mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +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
|
|
@ -0,0 +1,55 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>scroll-snap-type on non-scrollers traps snap positions</title>
|
||||
<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
.scroller {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
scroll-snap-type: block mandatory;
|
||||
}
|
||||
.item {
|
||||
background: gray;
|
||||
height: 100px;
|
||||
scroll-snap-type: block mandatory;
|
||||
}
|
||||
.item.snapped {
|
||||
background: green;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
.subitem {
|
||||
background: red;
|
||||
height: 100px;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<!--
|
||||
Boxes with a non-none value for scroll-snap-type
|
||||
will capture snap positions from their descendents,
|
||||
preventing them from affecting higher-up scrollers,
|
||||
even if they are not, themselves, scrollers.
|
||||
-->
|
||||
|
||||
<div class=scroller>
|
||||
<div class=item></div>
|
||||
<div class=item><div class=subitem></div></div>
|
||||
<div class="item snapped"></div>
|
||||
<div class=item></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
test(()=>{
|
||||
const el = document.querySelector('.scroller');
|
||||
assert_equals(el.scrollTop, 200);
|
||||
}, "The third item should be snapped to by default, not the second's child.");
|
||||
|
||||
</script>
|
||||
|
|
@ -74,12 +74,11 @@ var inner = document.getElementById("inner");
|
|||
var target = document.getElementById("target");
|
||||
|
||||
test(() => {
|
||||
assert_equals(window.scrollX, 0);
|
||||
assert_equals(window.scrollY, 0);
|
||||
assert_equals(outer.scrollLeft, 0);
|
||||
assert_equals(outer.scrollTop, 0);
|
||||
assert_equals(inner.scrollLeft, 0);
|
||||
assert_equals(inner.scrollTop, 0);
|
||||
// Initial layout triggers a scroll snap. Reset position before calling
|
||||
// scrollIntoView.
|
||||
window.scrollTo(0, 0);
|
||||
outer.scrollTo(0, 0);
|
||||
inner.scrollTo(0, 0);
|
||||
|
||||
target.scrollIntoView({inline: "start", block: "start"});
|
||||
// Although the scrollIntoView specified "start" as the alignment, the target
|
||||
|
|
|
|||
|
|
@ -24,16 +24,16 @@ div {
|
|||
}
|
||||
.target {
|
||||
scroll-snap-align: start;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
}
|
||||
.large-x {
|
||||
width: 3000px;
|
||||
height: 400px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.large-y {
|
||||
width: 400px;
|
||||
height: 2000px;
|
||||
background-color: green;
|
||||
background-color: yellow;
|
||||
}
|
||||
.small {
|
||||
height: 200px;
|
||||
|
|
@ -72,11 +72,25 @@ div {
|
|||
<div class="target large-x" style="top: 200px"></div>
|
||||
</div>
|
||||
|
||||
<div class="scroller-x" id="overlapping-overflow" style="scroll-snap-type: both mandatory">
|
||||
<div class="space"></div>
|
||||
<div style="left: 200px; top: 200px;">
|
||||
<div class="target small"></div>
|
||||
<div class="target small"></div>
|
||||
<div class="target small"></div>
|
||||
<div class="target large-y large-x"></div>
|
||||
<div class="target small"></div>
|
||||
<div class="target small"></div>
|
||||
<div class="target small"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var one_target_scroller = document.getElementById("one-target");
|
||||
var scroller_x = document.getElementById("x");
|
||||
var scroller_y = document.getElementById("y");
|
||||
var two_axes_scroller = document.getElementById("two-axes");
|
||||
var overlapping_scroller = document.getElementById("overlapping-overflow");
|
||||
|
||||
test(() => {
|
||||
one_target_scroller.scrollTo(10, 0);
|
||||
|
|
@ -165,4 +179,19 @@ test(() => {
|
|||
}, "Snap to current scroll position on x as the area is covering x axis." +
|
||||
"However, we snap to the specified snap position on y as the area is not " +
|
||||
"covering y axis.");
|
||||
|
||||
test(() => {
|
||||
overlapping_scroller.scrollTo(200, 800);
|
||||
assert_equals(overlapping_scroller.scrollLeft, 200);
|
||||
assert_equals(overlapping_scroller.scrollTop, 800);
|
||||
}, "snap to current scroll position on y as the area is covering y axis, " +
|
||||
"even though that area is not the only scroll area at the same position.");
|
||||
|
||||
test(() => {
|
||||
overlapping_scroller.scrollTo(800, 200);
|
||||
assert_equals(overlapping_scroller.scrollLeft, 800);
|
||||
assert_equals(overlapping_scroller.scrollTop, 200);
|
||||
}, "snap to current scroll position on x as the area is covering x axis, " +
|
||||
"even though that area is not the only scroll area at the same position.");
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708303">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
scrollbar-width: none;
|
||||
overflow: scroll;
|
||||
}
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
scroll-margin: 100px;
|
||||
margin-left: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div style="width: 450px; height: 450px;"></div>
|
||||
<div tabindex="0" id="target"></div>
|
||||
<div style="width: 2000px; height: 2000px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let scroller = document.getElementById("scroller");
|
||||
let target = document.getElementById("target");
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.focus();
|
||||
|
||||
assert_true(scroller.scrollTop > 0, "Visibility check should not account for margin");
|
||||
assert_true(scroller.scrollLeft > 0, "Visibility check should not account for margin");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708303">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
scroll-padding: 10px;
|
||||
scrollbar-width: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
scroll-margin: 10px;
|
||||
margin-left: 1000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div style="width: 2000px; height: 2000px;"></div>
|
||||
<div id="target"></div>
|
||||
<div style="width: 2000px; height: 2000px;"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let scroller = document.getElementById("scroller");
|
||||
let target = document.getElementById("target");
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView({ block: "start", inline: "start" });
|
||||
|
||||
assert_equals(scroller.scrollTop, 2000 - 20, "Top should account for margin + padding");
|
||||
assert_equals(scroller.scrollLeft, 1000 - 20, "Left should account for margin + padding");
|
||||
});
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView({ block: "end", inline: "end" });
|
||||
assert_equals(scroller.scrollTop, 2000 - 500 + 100 + 20, "Top should account for margin + padding");
|
||||
assert_equals(scroller.scrollLeft, 1000 - 500 + 100 + 20, "Left should account for margin + padding");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>scroll-padding is respected when typing into an out-of-view textfield</title>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1701928">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-padding">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
:root {
|
||||
scroll-padding-top: 100px;
|
||||
}
|
||||
</style>
|
||||
<div style="height: 300vh;"></div>
|
||||
<input type="text">
|
||||
<div style="height: 300vh;"></div>
|
||||
<script>
|
||||
function tick() {
|
||||
return new Promise(resolve => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(resolve));
|
||||
});
|
||||
}
|
||||
|
||||
promise_test(async function() {
|
||||
let input = document.querySelector("input");
|
||||
input.focus();
|
||||
await tick();
|
||||
// Scroll out of view.
|
||||
scrollTo(0, document.scrollingElement.scrollHeight);
|
||||
await tick();
|
||||
assert_not_equals(window.scrollY, 0);
|
||||
assert_true(input.getBoundingClientRect().bottom < 0, "Should be offscreen");
|
||||
// NOTE(emilio): Using test_driver.Actions() instead of test_driver.send_keys
|
||||
// because the later scrolls the target into view which would defeat the
|
||||
// point of the test...
|
||||
await new test_driver.Actions().keyDown('a').send();
|
||||
await tick();
|
||||
// We assert the bottom rather than the top because Gecko scrolls the
|
||||
// selection bounds into view, not the whole input.
|
||||
assert_true(input.getBoundingClientRect().bottom > 100, "Scroll-padding should be respected");
|
||||
}, "Test scrolling into view when typing");
|
||||
</script>
|
||||
|
|
@ -35,16 +35,16 @@
|
|||
.ltr { direction: ltr; }
|
||||
.rtl { direction: rtl; }
|
||||
|
||||
.TB.invert .target { top: auto; }
|
||||
.LR.invert .target { left: auto; }
|
||||
.RL.invert .target { right: auto; }
|
||||
.TB.large.invert .target { top: auto; }
|
||||
.LR.large.invert .target { left: auto; }
|
||||
.RL.large.invert .target { right: auto; }
|
||||
|
||||
.TB.ltr.invert .target { left: auto; }
|
||||
.TB.rtl.invert .target { right: auto; }
|
||||
.LR.ltr.invert .target { top: auto; }
|
||||
.LR.rtl.invert .target { bottom: auto; }
|
||||
.RL.ltr.invert .target { top: auto; }
|
||||
.RL.rtl.invert .target { bottom: auto; }
|
||||
.TB.ltr.large.invert .target { left: auto; }
|
||||
.TB.rtl.large.invert .target { right: auto; }
|
||||
.LR.ltr.large.invert .target { top: auto; }
|
||||
.LR.rtl.large.invert .target { bottom: auto; }
|
||||
.RL.ltr.large.invert .target { top: auto; }
|
||||
.RL.rtl.large.invert .target { bottom: auto; }
|
||||
|
||||
/* not absolutizing the border colors, so that the test passes even if css-logical is not supported; */
|
||||
.large.invert {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue