334747c45b
Automatic update from web-platform-tests [IntersectionObserver] Fix for rtl clipped explicit root IntersectionGeometry::ClipToRoot uses MapToVisualRectInAncestorSpace to map the intersection rect up to the coordinate system of the root element's overflow rect. It then explicitly translates the intersection rect to the root element's coordinate space and applies the root element's clip (if any). This patch fixes the coordinate space mapping for the case of a root element with overflow clip and a non-zero scroll origin (e.g., direction:rtl or flex-direction:row-reverse). BUG=939614 R=chrishtr@chromium.org Change-Id: I15dce9456e9791510bb331bf0cfbabd4cb04f9c0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1717688 Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: Stefan Zager <szager@chromium.org> Cr-Commit-Position: refs/heads/master@{#680761} -- wpt-commits: 8aa5717cff0397f356dd494a4257fd94e60035b3 wpt-pr: 18065
67 lines
1.6 KiB
HTML
67 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>
|