Jo Steven Novaryo
7c47bd4850
Automatic update from web-platform-tests Add WPTs Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- Use image for ref test instead of text Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- Fix comment and use timeout for WPTs Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- Apply suggestion Signed-off-by: Jo Steven Novaryo <steven.novaryo@gmail.com> -- wpt-commits: e13c4bcaf2d1d732a533d4165f1a844ea5873641, 751cba5343822affeb318b594ce93baede9530bb, 47f21bb422a9e150aaec1140e4a036820dde9054, 614b1e6467e91b12395cc9659ccebe66a6fa8ec7 wpt-pr: 58543
60 lines
2.2 KiB
HTML
60 lines
2.2 KiB
HTML
<!doctype html>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<title>Scrolls of `::before` and `::after` pseudo element should persist after a reflow.</title>
|
|
<link rel="help" href="https://github.com/servo/servo/pull/42005">
|
|
<link rel="author" title="Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
|
<link rel="match" href="reference/before-after-pseudo-element-scrolling-ref.html">
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<script src="/resources/testdriver-actions.js"></script>
|
|
<script src="/dom/events/scrolling/scroll_support.js"></script>
|
|
<style>
|
|
#target::before, #target::after {
|
|
display: block;
|
|
content: url("/images/red.png") url("/images/green.png");
|
|
height: 50px;
|
|
width: 100px;
|
|
overflow: scroll;
|
|
scrollbar-width: none;
|
|
background: url("/images/green.png");
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="dummy">dummy</div>
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
<div id="target">
|
|
</div>
|
|
|
|
<script>
|
|
window.onload = async () => {
|
|
await waitForCompositorCommit();
|
|
let rect = target.getBoundingClientRect();
|
|
let middle_point = (rect.top + rect.bottom) / 2;
|
|
|
|
// Scrolls the `::before` pseudo element and wait for the event.
|
|
let promise_scroll_before = waitForScrollEndOrTimeout(target, MAX_FRAME);
|
|
new test_driver
|
|
.Actions()
|
|
.scroll(rect.left + 10, Math.round(middle_point - rect.height / 4), 0, 1000)
|
|
.send();
|
|
await promise_scroll_before;
|
|
|
|
// Scrolls the `::after` pseudo element and wait for the event.
|
|
let promise_scroll_after = waitForScrollEndOrTimeout(target, MAX_FRAME);
|
|
new test_driver
|
|
.Actions()
|
|
.scroll(rect.left + 10, Math.round(middle_point + rect.height / 4), 0, 1000)
|
|
.send();
|
|
await promise_scroll_after;
|
|
|
|
// This should force a relayout.
|
|
dummy.style.display = "none";
|
|
await waitForNextFrame();
|
|
document.documentElement.classList.remove("reftest-wait");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|