Bug 1682197 - Scale the offset to remote iframe in nsDisplayRemote::BuildLayer. r=mattwoodrow

When the iframe is inside a scaled container, the offset to the reference frame
needs to be scaled.

This change fixes both a rendering issue (bug 1682197) and a hit-testing issue
(bug 1682200) altogether for non WebRender.

Differential Revision: https://phabricator.services.mozilla.com/D100218
This commit is contained in:
Hiroyuki Ikezoe 2021-01-11 23:52:09 +00:00
Родитель f6d19cf7e6
Коммит 58f190d6a4
9 изменённых файлов: 206 добавлений и 1 удалений

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

@ -63,6 +63,11 @@ add_task(async function test_main() {
{
file: "helper_fission_animation_styling_in_transformed_oopif.html",
},
// Bug 1682200: This test fails on WebRender.
{
file: "helper_fission_tap_on_zoomed.html",
prefs: [["apz.max_tap_time", 10000]],
},
]);
}

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

@ -0,0 +1,93 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test to ensure events get delivered properly for an OOP iframe</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<script src="helper_fission_utils.js"></script>
<script src="apz_test_utils.js"></script>
<script src="apz_test_native_event_utils.js"></script>
<script>
// Copied from helper_fission_touch.html, differences are 1) the iframe is not
// transformed instead it's offseted by margin values, 2) the top level document
// is zoomed by 2.0, 3) using documentElement instead of body to query
// getBoundingClientRect() because margin collapsing happens between the body
// and the offseted div (i.e. getBoundingClientRect() for body returns 100px top
// value).
fission_subtest_init();
SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(2.0);
FissionTestHelper.startTestPromise
.then(waitUntilApzStable)
.then(loadOOPIFrame("testframe", "helper_fission_empty.html"))
.then(waitUntilApzStable)
.then(test)
.then(FissionTestHelper.subtestDone, FissionTestHelper.subtestFailed);
let code_for_oopif_to_run = function() {
document.addEventListener("click", function(e) {
dump(`OOPIF got click at ${e.clientX},${e.clientY}\n`);
let result = { x: e.clientX, y: e.clientY };
FissionTestHelper.fireEventInEmbedder("OOPIF:ClickData", result);
}, {once: true});
dump("OOPIF registered click listener\n");
return true;
};
function failsafe() {
// Catch and fail faster on the case where the click ends up not going to
// the iframe like it should. Otherwise the test hangs until timeout which
// is more painful.
document.addEventListener("click", function(e) {
dump(`${location.href} got click at ${e.clientX},${e.clientY}\n`);
ok(false, "The OOPIF hosting page should not have gotten the click");
setTimeout(FissionTestHelper.subtestDone, 0);
}, {once: true});
}
async function test() {
let iframeElement = document.getElementById("testframe");
let iframeResponse = await FissionTestHelper.sendToOopif(iframeElement, `(${code_for_oopif_to_run})()`)
dump("OOPIF response: " + JSON.stringify(iframeResponse) + "\n");
ok(iframeResponse, "code_for_oopif_to_run successfully installed");
iframePromise = promiseOneEvent(window, "OOPIF:ClickData", null);
synthesizeNativeTap(document.documentElement, 200, 200, function() {
dump("Finished synthesizing click, waiting for OOPIF message...\n");
});
iframeResponse = await iframePromise;
dump("OOPIF response: " + JSON.stringify(iframeResponse.data) + "\n");
let expected_coord = 100; // because the iframe is offseted by (100, 100).
ok(Math.abs(iframeResponse.data.x - expected_coord) < 3,
`x-coord ${iframeResponse.data.x} landed near expected value ${expected_coord}`);
ok(Math.abs(iframeResponse.data.y - expected_coord) < 3,
`y-coord ${iframeResponse.data.y} landed near expected value ${expected_coord}`);
}
</script>
<style>
body, html {
margin: 0;
}
div {
margin-left: 100px;
margin-top: 100px;
width: 500px;
}
iframe {
width: 400px;
height: 300px;
border: solid 1px black;
}
</style>
</head>
<body onload="failsafe()">
<div><iframe id="testframe"></iframe></div>
</body>
</html>

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

@ -0,0 +1,12 @@
<style>
div {
position: absolute;
background-color: green;
width: 10px;
height: 10px;
}
</style>
<div style="top: 0; left: 0;"></div>
<div style="top: 0; right: 0;"></div>
<div style="bottom: 0; right: 0;"></div>
<div style="bottom: 0; left: 0;"></div>

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

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html reftest-resolution="1.5">
<style>
div {
margin-left: 100px;
margin-top: 100px;
width: 400px;
height: 400px;
border: 2px blue solid;
}
iframe {
width: 350px;
height: 350px;
border: 2px black solid;
}
</style>
<div>
<iframe src="iframe-zoomed-child.html"></iframe>
</div>
</html>

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

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html reftest-resolution="1.5">
<style>
div {
margin-left: 100px;
margin-top: 100px;
width: 400px;
height: 400px;
border: 2px blue solid;
}
iframe {
width: 350px;
height: 350px;
border: 2px black solid;
}
</style>
<div>
<!--
this data:text/html is generated from single-lined version of
iframe-zoomed-child.html by encodeURIComponent().
-->
<iframe src="data:text/html,%3Cstyle%3Ediv%20%7Bposition%3A%20absolute%3Bbackground-color%3A%20green%3Bwidth%3A%2010px%3Bheight%3A%2010px%3B%7D%3C%2Fstyle%3E%3Cdiv%20style%3D%22top%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22top%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E">
</iframe>
</div>
</html>

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

@ -35,4 +35,7 @@ skip-if(!asyncPan) == frame-reconstruction-scroll-clamping.html frame-reconstruc
pref(apz.allow_zooming,true) == pinch-zoom-position-fixed.html pinch-zoom-position-fixed-ref.html
pref(apz.allow_zooming,true) == pinch-zoom-position-sticky.html pinch-zoom-position-sticky-ref.html
pref(apz.allow_zooming,true) == iframe-zoomed.html iframe-zoomed-ref.html
pref(apz.allow_zooming,true) == scaled-iframe-zoomed.html scaled-iframe-zoomed-ref.html
== root-scrollbars-1.html root-scrollbars-1-ref.html

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

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html reftest-resolution="1.5">
<style>
div {
margin-left: 100px;
margin-top: 100px;
width: 200px;
height: 200px;
border: 10px blue solid;
transform: scale(2);
}
iframe {
width: 150px;
height: 150px;
border: 10px black solid;
}
</style>
<div>
<iframe src="iframe-zoomed-child.html"></iframe>
</div>
</html>

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

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html reftest-resolution="1.5">
<style>
div {
margin-left: 100px;
margin-top: 100px;
width: 200px;
height: 200px;
border: 10px blue solid;
transform: scale(2);
}
iframe {
width: 150px;
height: 150px;
border: 10px black solid;
}
</style>
<div>
<!--
this data:text/html is generated from single-lined version of
iframe-zoomed-child.html by encodeURIComponent().
-->
<iframe src="data:text/html,%3Cstyle%3Ediv%20%7Bposition%3A%20absolute%3Bbackground-color%3A%20green%3Bwidth%3A%2010px%3Bheight%3A%2010px%3B%7D%3C%2Fstyle%3E%3Cdiv%20style%3D%22top%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22top%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20right%3A%200%3B%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22bottom%3A%200%3B%20left%3A%200%3B%22%3E%3C%2Fdiv%3E">
</iframe>
</div>
</html>

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

@ -1326,7 +1326,7 @@ already_AddRefed<mozilla::layers::Layer> nsDisplayRemote::BuildLayer(
Matrix4x4 m = Matrix4x4::Translation(offset.x, offset.y, 0.0);
// Remote content can't be repainted by us, so we multiply down
// the resolution that our container expects onto our container.
m.PreScale(aContainerParameters.mXScale, aContainerParameters.mYScale, 1.0);
m.PostScale(aContainerParameters.mXScale, aContainerParameters.mYScale, 1.0);
refLayer->SetBaseTransform(m);
refLayer->SetEventRegionsOverride(mEventRegionsOverride);
refLayer->SetReferentId(mLayersId);