mirror of
https://github.com/servo/servo.git
synced 2025-08-18 03:45:33 +01:00
Update web-platform-tests to revision 10168e9a5d44efbc6e7d416d1d454eb9c9f1396c
This commit is contained in:
Josh Matthews
parent
c88dc51d03
commit
0e1caebaf4
791 changed files with 23381 additions and 5501 deletions
|
|
@ -0,0 +1,44 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Hit testing on element previously hidden by an anonymous scroll box</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1433591">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/*
|
||||
Create a hidden scrollbox that occupies the whole viewport, then give it
|
||||
visibility: hidden dynamically. The link previously under the scrollbox
|
||||
should be clickable.
|
||||
*/
|
||||
.scrollable {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.scrollable .inner {
|
||||
display: table-cell;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<div class="scrollable">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<a href="#">Should be clickable</a>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(document.elementFromPoint(10, 10).tagName, "DIV",
|
||||
"Should hit the scrollbox contents");
|
||||
document.querySelector('div').style.visibility = "hidden";
|
||||
assert_equals(document.elementFromPoint(10, 10), document.querySelector('a'));
|
||||
}, "Link should be clickable after hiding a scrollbox with an anonymous table inside");
|
||||
</script>
|
||||
|
|
@ -79,6 +79,7 @@ function set_boundary_prevents_y() {
|
|||
container.style.overscrollBehaviorY = 'none';
|
||||
setUpForRoot(100);
|
||||
setUpForContainer(0);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function verify_y_prevented_and_set_boundary_prevents_x() {
|
||||
|
|
@ -87,12 +88,14 @@ function verify_y_prevented_and_set_boundary_prevents_x() {
|
|||
test.step(function() {
|
||||
assert_equals(root.scrollTop, 100);
|
||||
assert_equals(root.scrollLeft, 0);
|
||||
window.scrollTo(0, 0);
|
||||
}, "overscroll-behavior-y: none should only prevent scroll propagation on y axis.");
|
||||
|
||||
container.style.overscrollBehaviorX = 'none';
|
||||
container.style.overscrollBehaviorY = 'auto';
|
||||
setUpForRoot(100);
|
||||
setUpForContainer(0);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function verify_x_prevented_and_set_boundary_allows_inner() {
|
||||
|
|
@ -107,6 +110,7 @@ function verify_x_prevented_and_set_boundary_allows_inner() {
|
|||
container.style.overscrollBehaviorY = 'none';
|
||||
setUpForRoot(100);
|
||||
setUpForContainer(100);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function verify_inner_allowed_and_set_nonscrollable_allows_propagation() {
|
||||
|
|
@ -124,6 +128,7 @@ function verify_inner_allowed_and_set_nonscrollable_allows_propagation() {
|
|||
non_scrollable.style.overscrollBehaviorX = 'none';
|
||||
non_scrollable.style.overscrollBehaviorY = 'none';
|
||||
setUpForRoot(100);
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
function verify_non_scrollable_allows_propagation() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers scroll-margin</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Sandra Sun" href="mailto:sunyunjia@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-margin">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<style>
|
||||
#scroller {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: scroll;
|
||||
}
|
||||
#content {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 200px;
|
||||
top: 200px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
scroll-margin-top: 4px;
|
||||
scroll-margin-right: 8px;
|
||||
scroll-margin-bottom: 12px;
|
||||
scroll-margin-left: 16px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="content">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
|
||||
var expectedXLeft = 200 - 16;
|
||||
var expectedXRight = 200 - scroller.clientWidth + target.clientWidth + 8;
|
||||
var expectedXCenter = 200 - (scroller.clientWidth / 2) +
|
||||
(target.clientWidth + 8 - 16) / 2;
|
||||
|
||||
var expectedYTop = 200 - 4;
|
||||
var expectedYBottom = 200 - scroller.clientHeight + target.clientHeight + 12;
|
||||
var expectedYCenter = 200 - (scroller.clientHeight / 2) +
|
||||
(target.clientHeight + 12 - 4) / 2;
|
||||
|
||||
// This formats dict as a string suitable as test name.
|
||||
// format_value() is provided by testharness.js,
|
||||
// which also preserves sign for -0.
|
||||
function format_dict(dict) {
|
||||
const props = [];
|
||||
for (let prop in dict) {
|
||||
props.push(`${prop}: ${format_value(dict[prop])}`);
|
||||
}
|
||||
return `{${props.join(", ")}}`;
|
||||
}
|
||||
|
||||
[
|
||||
[{block: "center", inline: "center"}, expectedXCenter, expectedYCenter],
|
||||
[{block: "start", inline: "start"}, expectedXLeft, expectedYTop],
|
||||
[{block: "end", inline: "end"}, expectedXRight, expectedYBottom],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${format_dict(input)})`);
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSSOM View - scrollIntoView considers scroll-padding</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Sandra Sun" href="mailto:sunyunjia@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<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>
|
||||
#scroller {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: scroll;
|
||||
scroll-padding-top: 4px;
|
||||
scroll-padding-right: 8px;
|
||||
scroll-padding-bottom: 12px;
|
||||
scroll-padding-left: 16px;
|
||||
}
|
||||
#content {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
#target {
|
||||
position: relative;
|
||||
left: 200px;
|
||||
top: 200px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="scroller">
|
||||
<div id="content">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
var target = document.getElementById("target");
|
||||
var scroller = document.getElementById("scroller");
|
||||
var expectedXLeft = 200 - 16;
|
||||
var expectedXRight = 200 - scroller.clientWidth + 8 + target.clientWidth;
|
||||
var expectedXCenter = 200 - (16 + scroller.clientWidth - 8) / 2 +
|
||||
target.clientWidth / 2;
|
||||
|
||||
var expectedYTop = 200 - 4;
|
||||
var expectedYBottom = 200 - scroller.clientHeight + 12 + target.clientHeight;
|
||||
var expectedYCenter = 200 - (4 + scroller.clientHeight - 12) / 2 +
|
||||
target.clientHeight / 2;
|
||||
|
||||
// This formats dict as a string suitable as test name.
|
||||
// format_value() is provided by testharness.js,
|
||||
// which also preserves sign for -0.
|
||||
function format_dict(dict) {
|
||||
const props = [];
|
||||
for (let prop in dict) {
|
||||
props.push(`${prop}: ${format_value(dict[prop])}`);
|
||||
}
|
||||
return `{${props.join(", ")}}`;
|
||||
}
|
||||
|
||||
[
|
||||
[{block: "center", inline: "center"}, expectedXCenter, expectedYCenter],
|
||||
[{block: "start", inline: "start"}, expectedXLeft, expectedYTop],
|
||||
[{block: "end", inline: "end"}, expectedXRight, expectedYBottom],
|
||||
].forEach(([input, expectedX, expectedY]) => {
|
||||
test(() => {
|
||||
scroller.scrollTo(0, 0);
|
||||
target.scrollIntoView(input);
|
||||
assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
|
||||
assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
|
||||
}, `scrollIntoView(${format_dict(input)})`);
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue