-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
827 additions
and
12 deletions.
There are no files selected for viewing
101 changes: 101 additions & 0 deletions
101
tests/web-platform/css/cssom-view/scrollIntoView-smooth.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
<!DOCTYPE HTML> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<title>Check End Position of smooth scrollIntoView</title> | ||
<div id="container" style="height: 2500px; width: 2500px;"> | ||
<div id="content" style="height: 500px; width: 500px;margin-left: 1000px; margin-right: 1000px; margin-top: 1000px;margin-bottom: 1000px;background-color: red"> | ||
</div> | ||
<div id="shadow"></div> | ||
</div> | ||
<script> | ||
var content_height = 500; | ||
var content_width = 500; | ||
var window_height = document.documentElement.clientHeight; | ||
var window_width = document.documentElement.clientWidth; | ||
var content = document.getElementById("content"); | ||
add_completion_callback(() => document.getElementById("container").remove()); | ||
|
||
function waitForScrollEnd() { | ||
var last_changed_frame = 0; | ||
var last_x = window.scrollX; | ||
var last_y = window.scrollY; | ||
return new Promise((resolve, reject) => { | ||
function tick(frames) { | ||
// We requestAnimationFrame either for 500 frames or until 20 frames with | ||
// no change have been observed. | ||
if (frames >= 500 || frames - last_changed_frame > 20) { | ||
resolve(); | ||
} else { | ||
if (window.scrollX != last_x || window.scrollY != last_y) { | ||
last_changed_frame = frames; | ||
last_x = window.scrollX; | ||
last_y = window.scrollY; | ||
} | ||
requestAnimationFrame(tick.bind(null, frames + 1)); | ||
} | ||
} | ||
tick(0); | ||
}); | ||
} | ||
|
||
// When testing manually, we need an additional frame at beginning | ||
// to trigger the effect. | ||
requestAnimationFrame(() => { | ||
promise_test(t => { | ||
window.scrollTo(0, 0); | ||
var expected_x = content.offsetLeft + content_width - window_width; | ||
var expected_y = content.offsetTop + content_height - window_height; | ||
assert_not_equals(window.scrollX, expected_x); | ||
assert_not_equals(window.scrollY, expected_y); | ||
content.scrollIntoView({behavior: "smooth", block: "nearest", inline: | ||
"nearest"}); | ||
return waitForScrollEnd().then(() => { | ||
assert_approx_equals(window.scrollX, expected_x, 1); | ||
assert_approx_equals(window.scrollY, expected_y, 1); | ||
}); | ||
}, "Smooth scrollIntoView should scroll the element to the 'nearest' position"); | ||
|
||
promise_test(t => { | ||
window.scrollTo(0, 0); | ||
var expected_x = content.offsetLeft; | ||
var expected_y = content.offsetTop; | ||
assert_not_equals(window.scrollX, expected_x); | ||
assert_not_equals(window.scrollY, expected_y); | ||
content.scrollIntoView({behavior: "smooth", block: "start", inline: | ||
"start"}); | ||
return waitForScrollEnd().then(() => { | ||
assert_approx_equals(window.scrollX, expected_x, 1); | ||
assert_approx_equals(window.scrollY, expected_y, 1); | ||
}); | ||
}, "Smooth scrollIntoView should scroll the element to the 'start' position"); | ||
|
||
promise_test(t => { | ||
window.scrollTo(0, 0); | ||
var expected_x = content.offsetLeft + (content_width - window_width) / 2; | ||
var expected_y = content.offsetTop + (content_height - window_height) / 2; | ||
assert_not_equals(window.scrollX, expected_x); | ||
assert_not_equals(window.scrollY, expected_y); | ||
content.scrollIntoView({behavior: "smooth", block: "center", inline: | ||
"center"}); | ||
return waitForScrollEnd().then(() => { | ||
assert_approx_equals(window.scrollX, expected_x, 1); | ||
assert_approx_equals(window.scrollY, expected_y, 1); | ||
}); | ||
}, "Smooth scrollIntoView should scroll the element to the 'center' position"); | ||
|
||
promise_test(t => { | ||
window.scrollTo(0, 0); | ||
var expected_x = content.offsetLeft + content_width - window_width; | ||
var expected_y = content.offsetTop + content_height - window_height; | ||
assert_not_equals(window.scrollX, expected_x); | ||
assert_not_equals(window.scrollY, expected_y); | ||
content.scrollIntoView({behavior: "smooth", block: "end", inline: | ||
"end"}); | ||
return waitForScrollEnd().then(() => { | ||
assert_approx_equals(window.scrollX, expected_x, 1); | ||
assert_approx_equals(window.scrollY, expected_y, 1); | ||
}); | ||
}, "Smooth scrollIntoView should scroll the element to the 'end' position"); | ||
|
||
}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
<!DOCTYPE html> | ||
<title>CSSOM View - scrollIntoView</title> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Chris Wu" href="mailto:pwx.frontend@gmail.com"> | ||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> | ||
<link rel="help" href="https://heycam.github.io/webidl/#es-operations"> | ||
<link rel="help" href="https://heycam.github.io/webidl/#es-overloads"> | ||
<meta name="flags" content="dom"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<style> | ||
body.running { margin: 0; padding: 4000px; overflow: hidden } | ||
body.running #testDiv { | ||
width: 200px; | ||
height: 200px; | ||
background-color: lightgreen; | ||
} | ||
</style> | ||
<body class=running> | ||
<div id=testDiv></div> | ||
<div id="log"></div> | ||
<script> | ||
var testDiv = document.getElementById('testDiv'); | ||
|
||
var expectedXLeft = 4000; | ||
var expectedXRight = 4000 - window.innerWidth + testDiv.clientWidth; | ||
var expectedXCenter = 4000 - (window.innerWidth / 2) + (testDiv.clientWidth / 2); | ||
|
||
var expectedYTop = 4000; | ||
var expectedYBottom = 4000 - window.innerHeight + testDiv.clientHeight; | ||
var expectedYCenter = 4000 - (window.innerHeight / 2) + (testDiv.clientHeight / 2); | ||
|
||
[ | ||
["omitted argument", "nearest", expectedYTop], | ||
[true, "nearest", expectedYTop], | ||
[false, "nearest", expectedYBottom], | ||
[undefined, "nearest", expectedYTop], | ||
[null, "nearest", expectedYTop], | ||
[{}, "nearest", expectedYTop], | ||
[{block: "center", inline: "center"}, expectedXCenter, expectedYCenter], | ||
[{block: "start", inline: "start"}, expectedXLeft, expectedYTop], | ||
[{block: "end", inline: "end"}, expectedXRight, expectedYBottom], | ||
[{block: "nearest", inline: "nearest"}, "nearest", "nearest"], | ||
].forEach(([input, expectedX, expectedY]) => { | ||
test(() => { | ||
window.scrollTo(0, 0); | ||
testScrollIntoView(input); | ||
var x = (expectedX === "nearest") ? expectedXRight : expectedX; | ||
var y = (expectedY === "nearest") ? expectedYBottom : expectedY; | ||
assert_approx_equals(window.scrollX, x, 0.5, 'scrollX'); | ||
assert_approx_equals(window.scrollY, y, 0.5, 'scrollY'); | ||
}, `scrollIntoView(${format_input(input)}) starting at left,top`); | ||
|
||
test(() => { | ||
window.scrollTo(0, 12000); | ||
testScrollIntoView(input); | ||
var x = (expectedX === "nearest") ? expectedXRight : expectedX; | ||
var y = (expectedY === "nearest") ? expectedYTop : expectedY; | ||
assert_approx_equals(window.scrollX, x, 0.5, 'scrollX'); | ||
assert_approx_equals(window.scrollY, y, 0.5, 'scrollY'); | ||
}, `scrollIntoView(${format_input(input)}) starting at left,bottom`); | ||
|
||
test(() => { | ||
window.scrollTo(12000, 0); | ||
testScrollIntoView(input); | ||
var x = (expectedX === "nearest") ? expectedXLeft : expectedX; | ||
var y = (expectedY === "nearest") ? expectedYBottom : expectedY; | ||
assert_approx_equals(window.scrollX, x, 0.5, 'scrollX'); | ||
assert_approx_equals(window.scrollY, y, 0.5, 'scrollY'); | ||
}, `scrollIntoView(${format_input(input)}) starting at right,top`); | ||
|
||
test(() => { | ||
window.scrollTo(12000, 12000); | ||
testScrollIntoView(input); | ||
var x = (expectedX === "nearest") ? expectedXLeft : expectedX; | ||
var y = (expectedY === "nearest") ? expectedYTop : expectedY; | ||
assert_approx_equals(window.scrollX, x, 0.5, 'scrollX'); | ||
assert_approx_equals(window.scrollY, y, 0.5, 'scrollY'); | ||
}, `scrollIntoView(${format_input(input)}) starting at right,bottom`); | ||
}); | ||
|
||
function testScrollIntoView(input) { | ||
if (input === "omitted argument") { | ||
testDiv.scrollIntoView(); | ||
} else { | ||
testDiv.scrollIntoView(input); | ||
} | ||
} | ||
|
||
// 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(', ')}}`; | ||
} | ||
|
||
function format_input(input) { | ||
if (input === "omitted argument") { | ||
return ""; | ||
} else if (input === null || typeof input !== "object") { | ||
return format_value(input); | ||
} | ||
return format_dict(input); | ||
} | ||
|
||
document.body.classList.remove('running'); | ||
window.scrollTo(0, 0); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.