Bug 1359317 - (intersection-observer) Use targetFrame->GetRectRelativeToSelf() as the initial intersection rect. r=mstange

This commit is contained in:
Tobias Schneider 2017-06-19 13:32:07 -07:00
Родитель aae99d6411
Коммит e5f0ccbf64
6 изменённых файлов: 74 добавлений и 3 удалений

Просмотреть файл

@ -352,7 +352,7 @@ DOMIntersectionObserver::Update(nsIDocument* aDocument, DOMHighResTimeStamp time
nsLayoutUtils::GetContainingBlockForClientRect(targetFrame),
nsLayoutUtils::RECTS_ACCOUNT_FOR_TRANSFORMS
);
intersectionRect = Some(targetFrame->GetVisualOverflowRect());
intersectionRect = Some(targetFrame->GetRectRelativeToSelf());
nsIFrame* containerFrame = nsLayoutUtils::GetCrossDocParentFrame(targetFrame);
while (containerFrame && containerFrame != rootFrame) {

Просмотреть файл

@ -104624,6 +104624,12 @@
{}
]
],
"intersection-observer/bounding-box.html": [
[
"/intersection-observer/bounding-box.html",
{}
]
],
"intersection-observer/client-rect.html": [
[
"/intersection-observer/client-rect.html",
@ -192591,6 +192597,10 @@
"4f94c4236168ed722f71d81bd957e0da72b29c71",
"support"
],
"intersection-observer/bounding-box.html": [
"0deef078368d11e2a55ef0988d50f548587a4c57",
"testharness"
],
"intersection-observer/client-rect.html": [
"acec9a4f59ebee1840950cf766a45676490eef84",
"testharness"

Просмотреть файл

@ -0,0 +1,2 @@
[bounding-box.html]
type: testharness

Просмотреть файл

@ -1,3 +1,2 @@
[edge-inclusive-intersection.html]
type: testharness
disabled: https://bugzilla.mozilla.org/show_bug.cgi?id=1359317

Просмотреть файл

@ -1,3 +1,2 @@
[unclipped-root.html]
type: testharness
disabled: https://bugzilla.mozilla.org/show_bug.cgi?id=1359317

Просмотреть файл

@ -0,0 +1,61 @@
<!DOCTYPE html>
<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: 0;
left: 200px;
}
#root {
overflow: visible;
height: 200px;
width: 160px;
border: 7px solid black;
}
#target {
margin: 10px;
width: 100px;
height: 100px;
padding: 10px;
background-color: green;
}
</style>
<div id="root">
<div id="target" style="transform: translateY(300px)"></div>
</div>
<script>
var entries = [];
var target;
runTestCycle(function() {
target = document.getElementById("target");
assert_true(!!target, "target exists");
var root = document.getElementById("root");
assert_true(!!root, "root exists");
var observer = new IntersectionObserver(function(changes) {
entries = entries.concat(changes)
}, {root: root});
observer.observe(target);
entries = entries.concat(observer.takeRecords());
assert_equals(entries.length, 0, "No initial notifications.");
runTestCycle(step0, "First rAF.");
}, "Test that the target's border bounding box is used to calculate intersection.");
function step0() {
var targetBounds = clientBounds(target);
target.style.transform = "translateY(195px)";
runTestCycle(step1, "target.style.transform = 'translateY(195px)'");
checkLastEntry(entries, 0, targetBounds.concat(0, 0, 0, 0, 8, 182, 8, 222, false));
}
function step1() {
var targetBounds = clientBounds(target);
target.style.transform = "";
checkLastEntry(entries, 1, targetBounds.concat(25, 145, 220, 222, 8, 182, 8, 222, true));
}
</script>