mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision d3cf77a7b8c20c678b725238eaa8a72eca3787ae
This commit is contained in:
WPT Sync Bot
parent
880f3b8b7a
commit
efca990ffe
541 changed files with 8000 additions and 2276 deletions
|
|
@ -33,7 +33,7 @@ assert_not_inherited('scroll-padding-right', 'auto', '10px');
|
|||
assert_not_inherited('scroll-padding-top', 'auto', '10px');
|
||||
assert_not_inherited('scroll-snap-align', 'none', 'start end');
|
||||
assert_not_inherited('scroll-snap-stop', 'normal', 'always');
|
||||
assert_not_inherited('scroll-snap-type', 'none', 'inline proximity');
|
||||
assert_not_inherited('scroll-snap-type', 'none', 'inline');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ test_valid_value("scroll-snap-type", "inline");
|
|||
test_valid_value("scroll-snap-type", "both");
|
||||
|
||||
test_valid_value("scroll-snap-type", "y mandatory");
|
||||
test_valid_value("scroll-snap-type", "inline proximity");
|
||||
test_valid_value("scroll-snap-type", "inline proximity", "inline"); // The shortest serialization is preferable
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
#target {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div style="width: 2000px; height: 2000px;"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
scroller.style.scrollPadding = "100px";
|
||||
|
||||
target.style.scrollSnapAlign = "start";
|
||||
target.style.left = "300px";
|
||||
target.style.top = "300px";
|
||||
|
||||
scroller.scrollTo(0, 0);
|
||||
// `target position (300px, 300px)` - `padding (100px, 100px)`.
|
||||
assert_equals(scroller.scrollLeft, 200);
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
|
||||
target.style.scrollSnapAlign = "end";
|
||||
|
||||
// `target position (300px, 300px)` + `target size (300px, 300px) +
|
||||
// `padding (100px, 100px) - `scroller size (500px, 500px)`.
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 200);
|
||||
assert_equals(scroller.scrollTop, 200);
|
||||
}, "Snaps to the positions adjusted by scroll-padding");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type"/>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#principal-flow"/>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
html {
|
||||
height: 3000px;
|
||||
scroll-snap-type: inline mandatory;
|
||||
}
|
||||
#target {
|
||||
position: absolute;
|
||||
background-color: blue;
|
||||
top: 1000px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
const documentHeight = document.documentElement.clientHeight;
|
||||
test(() => {
|
||||
target.style.scrollSnapAlign = "end start";
|
||||
|
||||
window.scrollTo(0, 1000);
|
||||
|
||||
// `target y (1000px)` + `target height (100px)` - document height.
|
||||
assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
|
||||
|
||||
target.style.scrollSnapAlign = "";
|
||||
window.scrollTo(0, 0);
|
||||
}, "The scroll-snap-type on the root element is applied");
|
||||
|
||||
test(() => {
|
||||
document.body.style.writingMode = "vertical-rl";
|
||||
target.style.scrollSnapAlign = "start end";
|
||||
|
||||
window.scrollTo(0, 1000);
|
||||
// `target y (1000px)` + `target height (100px)` - document height.
|
||||
assert_equals(document.scrollingElement.scrollTop, 1100 - documentHeight);
|
||||
}, "The writing-mode on the body is used");
|
||||
</script>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
html {
|
||||
margin: 0px;
|
||||
overflow: scroll;
|
||||
scroll-snap-type: both mandatory;
|
||||
|
|
@ -23,8 +23,8 @@ div {
|
|||
.space {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 2100px;
|
||||
height: 2100px;
|
||||
width: 4000px;
|
||||
height: 4000px;
|
||||
}
|
||||
.target {
|
||||
width: 600px;
|
||||
|
|
@ -151,9 +151,9 @@ var viewport = document.scrollingElement;
|
|||
window.scrollTo(0, 0);
|
||||
assert_equals(window.scrollX, 0);
|
||||
assert_equals(window.scrollY, 0);
|
||||
window.scrollTo(input);
|
||||
window.scrollBy(input);
|
||||
assert_equals(window.scrollX, expectedX);
|
||||
assert_equals(window.scrollY, expectedY);
|
||||
}, `scrollBy(${format_dict(input)}) on window lands on (${expectedX}, ${expectedY})`);
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#scroller {
|
||||
overflow: hidden; /* TODO: Use scrollbar-width: none */
|
||||
scroll-snap-type: x mandatory;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
.space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
#target {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
left: 50px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div class="space"></div>
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
target.style.scrollSnapAlign = "start";
|
||||
target.style.transform = "translateX(300px)";
|
||||
scroller.scrollTo(10, 0);
|
||||
assert_equals(scroller.scrollLeft, 350 /* left + translateX(300px) */);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, "Snaps to the transformed snap start position");
|
||||
|
||||
test(() => {
|
||||
target.style.scrollSnapAlign = "end";
|
||||
target.style.transform = "translateX(300px)";
|
||||
scroller.scrollTo(10, 0);
|
||||
assert_equals(scroller.scrollLeft,
|
||||
50 /* left + width + translateX(300px) - scroller.width */);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, "Snaps to the transformed snap end position");
|
||||
|
||||
test(() => {
|
||||
target.style.scrollSnapAlign = "start";
|
||||
target.style.transform = "translateX(-100px)";
|
||||
scroller.scrollTo(10, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, "Snaps to visible top left position of the transformed box");
|
||||
|
||||
</script>
|
||||
|
|
@ -40,12 +40,20 @@ div {
|
|||
top: 800px;
|
||||
}
|
||||
|
||||
#right-bottom {
|
||||
left: 1800px;
|
||||
top: 1800px;
|
||||
scroll-margin-top: 1000px;
|
||||
scroll-margin-left: 1000px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="scroller">
|
||||
<div id="space"></div>
|
||||
<div id="left-top" class="snap"></div>
|
||||
<div id="right-top" class="snap"></div>
|
||||
<div id="left-bottom" class="snap"></div>
|
||||
<div id="right-bottom" class="snap"></div>
|
||||
</div>
|
||||
<script>
|
||||
var scroller = document.getElementById("scroller");
|
||||
|
|
@ -66,4 +74,13 @@ test(() => {
|
|||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 800);
|
||||
}, 'Only snap to visible area on Y axis, even when the non-visible ones are closer');
|
||||
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
scroller.scrollTo(300, 300);
|
||||
assert_equals(scroller.scrollLeft, 800);
|
||||
assert_equals(scroller.scrollTop, 800);
|
||||
}, 'snap to snap area inflated by scroll-margin, even when the non-visible ones are closer');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#unreachable" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
}
|
||||
#scroller {
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
overflow: hidden;
|
||||
scroll-snap-type: both mandatory;
|
||||
}
|
||||
#unreachable {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
#reachable {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 400px;
|
||||
left: 400px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div style="width: 2000px; height: 2000px;"></div>
|
||||
<div id="unreachable"></div>
|
||||
<div id="reachable"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
// Firstly move to the reachable snap position.
|
||||
scroller.scrollTo(400, 400);
|
||||
assert_equals(scroller.scrollLeft, 400);
|
||||
assert_equals(scroller.scrollTop, 400);
|
||||
|
||||
// Then move to a position between the unreachable snap position and the
|
||||
// reachable position but closer to the unreachable one.
|
||||
scroller.scrollTo(100, 100);
|
||||
assert_equals(scroller.scrollLeft, 0);
|
||||
assert_equals(scroller.scrollTop, 0);
|
||||
}, "Snaps to the positions defined by the element as much as possible");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue