forked from mirrors/gecko-dev
f2287f3ca8
This commits integrates the new animation triggered restyle counter into the existing tests to ensure that the counter matches the expected marker count. Depends on D186714 Differential Revision: https://phabricator.services.mozilla.com/D186715
95 lines
3.4 KiB
JavaScript
95 lines
3.4 KiB
JavaScript
/* Any copyright is dedicated to the Public Domain.
|
|
* http://creativecommons.org/publicdomain/zero/1.0/ */
|
|
|
|
"use strict";
|
|
|
|
/* import-globals-from ../../../dom/animation/test/testcommon.js */
|
|
Services.scriptloader.loadSubScript(
|
|
"chrome://mochitests/content/tests/dom/animation/test/testcommon.js",
|
|
this
|
|
);
|
|
|
|
add_task(async () => {
|
|
await SpecialPowers.pushPrefEnv({
|
|
set: [
|
|
["layout.animation.prerender.partial", true],
|
|
["layout.animation.prerender.viewport-ratio-limit", 1.125],
|
|
],
|
|
});
|
|
|
|
let navBar = document.getElementById("nav-bar");
|
|
|
|
const anchor = document.createXULElement("toolbarbutton");
|
|
anchor.classList.add("toolbarbutton-1", "chromeclass-toolbar-additional");
|
|
navBar.appendChild(anchor);
|
|
|
|
// Prepare a popup panel.
|
|
const panel = document.createXULElement("panel");
|
|
panel.setAttribute("noautohide", true);
|
|
navBar.appendChild(panel);
|
|
|
|
// Add a overflow:scroll container to avoid expanding the popup window size.
|
|
const container = document.createElement("div");
|
|
container.style = "width: 100px; height: 100px; overflow: scroll;";
|
|
|
|
// Looks like in popup window wider elements in the overflow:scroll container
|
|
// are still affecting the viewport size of the popup content, for example,
|
|
// if we specify "witdh: 800px" here, this element is not going to be partial-
|
|
// prerendered, it will be fully prerendered, so we use vertically overflowed
|
|
// element here.
|
|
const target = document.createElement("div");
|
|
target.style = "width: 100px; height: 800px;";
|
|
|
|
container.appendChild(target);
|
|
panel.appendChild(container);
|
|
|
|
registerCleanupFunction(() => {
|
|
panel.remove();
|
|
anchor.remove();
|
|
});
|
|
|
|
panel.openPopup(anchor);
|
|
|
|
// Start a transform transition with a 1s delay step-start function so that
|
|
// we can ensure that
|
|
// 1) when the target element is initially composited on the compositor the
|
|
// transition hasn't yet started, thus no jank happens
|
|
// 2) when the transition starts on the compositor thread, it causes a jank
|
|
// so that it will report back to the main-thread
|
|
target.style.transition = "transform 100s step-start 1s";
|
|
getComputedStyle(target);
|
|
const startTransition = new Promise(resolve => {
|
|
target.addEventListener("transitionstart", resolve);
|
|
});
|
|
target.style.transform = "translateY(-130px)";
|
|
const transition = target.getAnimations()[0];
|
|
|
|
// Wait for the transition start.
|
|
await startTransition;
|
|
|
|
// Make sure it's running on the compositor.
|
|
Assert.ok(
|
|
transition.isRunningOnCompositor,
|
|
"The transition should be running on the compositor thread"
|
|
);
|
|
|
|
// Collect restyling markers in 5 frames.
|
|
const [markers, counter] = await observeStylingInTargetWindow(
|
|
panel.ownerGlobal,
|
|
5
|
|
);
|
|
|
|
Assert.equal(markers.length, counter);
|
|
|
|
// On non WebRender we observe two restyling markers because we get the second
|
|
// jank report from the compositor thread before a new pre-rendered result,
|
|
// which was triggered by the first jank report, reached to the compositor
|
|
// thread. So we allow one or two makers here.
|
|
// NOTE: Since we wrap the target element in overflow:scroll container, we
|
|
// might see an additional restyling marker triggered by
|
|
// KeyframeEffect::OverflowRegionRefreshInterval (200ms) on very slow
|
|
// platforms (e.g. TSAN builds), if it happens we should allow the additional
|
|
// restyling here.
|
|
Assert.greaterOrEqual(markers.length, 1);
|
|
Assert.lessOrEqual(markers.length, 2);
|
|
});
|