mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision d7afcb8708eac08a614d161d5622a48172daf7e3
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
6f8bb4dd40
commit
edff458e23
791 changed files with 17647 additions and 10322 deletions
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Snap: getComputedValue().scrollMarginBlock</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-block">
|
||||
<meta name="assert" content="scroll-margin-block computed value is absolute length.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
test_computed_value("scroll-margin-block-start", "10px");
|
||||
test_computed_value("scroll-margin-block-start", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin-block-end", "10px");
|
||||
test_computed_value("scroll-margin-block-end", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin-block", "10px");
|
||||
test_computed_value("scroll-margin-block", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
test_computed_value("scroll-margin-block", "1px 2px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Snap: getComputedValue().scrollMargin</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin">
|
||||
<meta name="assert" content="scroll-margin computed value is absolute length.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
test_computed_value("scroll-margin-top", "10px");
|
||||
test_computed_value("scroll-margin-top", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin-right", "10px");
|
||||
test_computed_value("scroll-margin-right", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin-bottom", "10px");
|
||||
test_computed_value("scroll-margin-bottom", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin-left", "10px");
|
||||
test_computed_value("scroll-margin-left", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin", "10px");
|
||||
test_computed_value("scroll-margin", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
test_computed_value("scroll-margin", "1px 2px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Snap: getComputedValue().scrollMarginInline</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-margin-inline">
|
||||
<meta name="assert" content="scroll-margin-inline computed value is absolute length.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
test_computed_value("scroll-margin-inline-start", "10px");
|
||||
test_computed_value("scroll-margin-inline-start", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin-inline-end", "10px");
|
||||
test_computed_value("scroll-margin-inline-end", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
|
||||
test_computed_value("scroll-margin-inline", "10px");
|
||||
test_computed_value("scroll-margin-inline", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
test_computed_value("scroll-margin-inline", "1px 2px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Snap: getComputedValue().scrollSnapAlign</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-align">
|
||||
<meta name="assert" content="scroll-snap-align computed value is as specified.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("scroll-snap-align", "none");
|
||||
test_computed_value("scroll-snap-align", "start");
|
||||
test_computed_value("scroll-snap-align", "end");
|
||||
test_computed_value("scroll-snap-align", "center");
|
||||
|
||||
test_computed_value("scroll-snap-align", "start none");
|
||||
test_computed_value("scroll-snap-align", "center end");
|
||||
test_computed_value("scroll-snap-align", "start start", "start");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Snap: getComputedValue().scrollSnapStop</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-stop">
|
||||
<meta name="assert" content="scroll-snap-stop computed value is as specified.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("scroll-snap-stop", "normal");
|
||||
test_computed_value("scroll-snap-stop", "always");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Scroll Snap: getComputedValue().scrollSnapType</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#propdef-scroll-snap-type">
|
||||
<meta name="assert" content="scroll-snap-type computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("scroll-snap-type", "none");
|
||||
|
||||
test_computed_value("scroll-snap-type", "x");
|
||||
test_computed_value("scroll-snap-type", "y");
|
||||
test_computed_value("scroll-snap-type", "block");
|
||||
test_computed_value("scroll-snap-type", "inline");
|
||||
test_computed_value("scroll-snap-type", "both");
|
||||
|
||||
test_computed_value("scroll-snap-type", "y mandatory");
|
||||
test_computed_value("scroll-snap-type", "inline proximity", "inline");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -16,6 +16,7 @@ test_invalid_value("scroll-snap-type", "auto");
|
|||
test_invalid_value("scroll-snap-type", "x y");
|
||||
test_invalid_value("scroll-snap-type", "block mandatory inline");
|
||||
|
||||
test_invalid_value("scroll-snap-type", "both none");
|
||||
test_invalid_value("scroll-snap-type", "mandatory");
|
||||
test_invalid_value("scroll-snap-type", "proximity");
|
||||
test_invalid_value("scroll-snap-type", "mandatory inline");
|
||||
|
|
|
|||
|
|
@ -20,7 +20,10 @@ 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", "block mandatory");
|
||||
test_valid_value("scroll-snap-type", "both mandatory");
|
||||
test_valid_value("scroll-snap-type", "inline proximity", "inline"); // The shortest serialization is preferable
|
||||
test_valid_value("scroll-snap-type", "x proximity", "x");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-stop" />
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div, html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow: scroll;
|
||||
}
|
||||
#scroller {
|
||||
scroll-snap-type: x mandatory;
|
||||
overflow: scroll;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
.large_space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
.snap_area {
|
||||
scroll-snap-align: none start;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
background-color: blue;
|
||||
}
|
||||
.snap_area:nth-child(1) {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.snap_area:nth-child(2) {
|
||||
margin-left: 300px;
|
||||
}
|
||||
.snap_area:nth-child(3) {
|
||||
margin-left: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Add snap area to the root scroller -->
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="snap_area"></div>
|
||||
<div class="large_space"></div>
|
||||
</div>
|
||||
|
||||
<div class="large_space"></div>
|
||||
|
||||
<script>
|
||||
const scrollers = [document.scrollingElement, document.getElementById("scroller")];
|
||||
for (const scroller of scrollers) {
|
||||
test(_ => {
|
||||
assert_equals(scroller.scrollLeft, 0); // sanity check
|
||||
|
||||
scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always');
|
||||
scroller.scrollBy(500, 0);
|
||||
assert_equals(scroller.scrollLeft, 100, "scrollBy should not skip area with stop always");
|
||||
|
||||
scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'normal');
|
||||
scroller.scrollBy(500, 0);
|
||||
assert_equals(scroller.scrollLeft, 500, "scrollBy should skip secon area with stop normal");
|
||||
|
||||
// When snap type is changed back to mandatory, scrolling should snap.
|
||||
scroller.querySelectorAll('.snap_area').forEach(area => area.style.scrollSnapStop = 'always');
|
||||
scroller.scrollBy(-500, 0);
|
||||
assert_equals(scroller.scrollLeft, 300, "scrollBy should not skip area with stop always");
|
||||
}, `scroll-snap-stop for areas on ${scroller.nodeName} should control snapping behavior and changing it takes effect`);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-type" />
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div, html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
margin: 0px;
|
||||
overflow: scroll;
|
||||
}
|
||||
#scroller {
|
||||
margin-left: 200px;
|
||||
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.space {
|
||||
width: 2000px;
|
||||
height: 2000px;
|
||||
}
|
||||
.snap_area {
|
||||
margin-left: 200px;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
scroll-snap-align: none start;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Add snap area to the root scroller -->
|
||||
<div class="snap_area" id="viewport"></div>
|
||||
|
||||
<div id="scroller">
|
||||
<div class="snap_area" id="inner"></div>
|
||||
<div class="space"></div>
|
||||
</div>
|
||||
|
||||
<div class="space"></div>
|
||||
|
||||
<script>
|
||||
|
||||
const scrollers = [document.scrollingElement, document.getElementById("scroller")];
|
||||
for (const scroller of scrollers) {
|
||||
test(_ => {
|
||||
scroller.style.scrollSnapType = 'x mandatory';
|
||||
scroller.scrollTo(100, 0);
|
||||
assert_equals(scroller.scrollLeft, 200, "scrolling should snap");
|
||||
|
||||
// When snap type is 'none' the scroller, scrolling should not snap.
|
||||
scroller.style.scrollSnapType = 'none';
|
||||
scroller.scrollTo(100, 0);
|
||||
assert_equals(scroller.scrollLeft, 100, "scrolling should not snap");
|
||||
|
||||
// When snap type is changed back to mandatory, scrolling should snap.
|
||||
scroller.style.scrollSnapType = 'x mandatory';
|
||||
scroller.scrollTo(110, 0);
|
||||
assert_equals(scroller.scrollLeft, 200, "scrolling should snap after change");
|
||||
}, `scroll-snap-type on ${scroller.nodeName} should control snapping behavior and changing it takes effect`);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#scroll-snap-type" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
|
|
@ -77,4 +77,11 @@ test(() => {
|
|||
assert_equals(scroller.scrollLeft, 1000);
|
||||
assert_equals(scroller.scrollTop, 1000);
|
||||
}, "proximity scroll-snap-type should snap if the snap position is close.");
|
||||
|
||||
test(_ => {
|
||||
scroller.style.scrollSnapType = "none";
|
||||
scroller.scrollTo(100, 100);
|
||||
assert_equals(scroller.scrollLeft, 100, "scrolling should not snap");
|
||||
assert_equals(scroller.scrollTop, 100, "scrolling should not snap");
|
||||
}, "none scroll-snap-type shouldn't snap.");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue