66 lines
1.6 KiB
HTML
66 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="rtl">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="./resources/intersection-observer-test-utils.js"></script>
|
|
|
|
<style>
|
|
pre, #log {
|
|
position: absolute;
|
|
top: 120px;
|
|
left: 0;
|
|
}
|
|
#root {
|
|
width: 350px;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
display: flex;
|
|
flex-direction: row;
|
|
overflow-x: auto;
|
|
}
|
|
#target-start, #target-end {
|
|
width: 100px;
|
|
height: 100px;
|
|
flex-shrink: 0;
|
|
background-color: green;
|
|
text-align: center;
|
|
}
|
|
#target-end {
|
|
margin-inline-start: 500px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<div id="root">
|
|
<div id="target-start">start</div>
|
|
<div id="target-end">end</div>
|
|
</div>
|
|
|
|
<script>
|
|
runTestCycle(function() {
|
|
let io = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add("intersecting");
|
|
} else {
|
|
entry.target.classList.remove("intersecting");
|
|
}
|
|
});
|
|
}, { root: document.getElementById("root") });
|
|
document.querySelectorAll("#root > div").forEach(element => {
|
|
io.observe(element);
|
|
});
|
|
runTestCycle(step0, "First rAF");
|
|
}, "Explicit rtl root with overflow clipping");
|
|
|
|
function step0() {
|
|
assert_true(
|
|
document.getElementById("target-start").classList.contains("intersecting"),
|
|
"Target at scroll start is intersecting");
|
|
assert_false(
|
|
document.getElementById("target-end").classList.contains("intersecting"),
|
|
"Target at scroll end is not intersecting");
|
|
}
|
|
</script>
|