Bug 1510030 - Enable background color animimations on WebRender. r=boris

Differential Revision: https://phabricator.services.mozilla.com/D63605

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Hiroyuki Ikezoe 2020-02-27 08:43:09 +00:00
parent 1f0f5d6c7d
commit 28121ce9e6
5 changed files with 102 additions and 127 deletions

View File

@ -1898,17 +1898,6 @@ KeyframeEffect::MatchForCompositor KeyframeEffect::IsMatchForCompositor(
if (!StaticPrefs::gfx_omta_background_color()) { if (!StaticPrefs::gfx_omta_background_color()) {
return KeyframeEffect::MatchForCompositor::No; return KeyframeEffect::MatchForCompositor::No;
} }
if (nsIContent* content = aFrame->GetContent()) {
RefPtr<layers::LayerManager> layerManager =
nsContentUtils::LayerManagerForContent(content);
if (layerManager &&
layerManager->GetBackendType() == layers::LayersBackend::LAYERS_WR) {
// Bug 1510030: We don't yet support background-color animations on the
// compositor for WebRender.
return KeyframeEffect::MatchForCompositor::No;
}
}
} }
return mAnimation->IsPlaying() ? KeyframeEffect::MatchForCompositor::Yes return mAnimation->IsPlaying() ? KeyframeEffect::MatchForCompositor::Yes

View File

@ -1029,14 +1029,8 @@ promise_test(async t => {
await waitForAnimationReadyToRestyle(animation); await waitForAnimationReadyToRestyle(animation);
await waitForPaints(); await waitForPaints();
if (!isWebRender) { assert_animation_is_running_on_compositor(animation,
assert_animation_is_running_on_compositor(animation, 'background-color animation should be running on the compositor');
'background-color animation should be running on the compositor');
} else {
assert_animation_is_not_running_on_compositor(animation,
'background-color animation is not yet able to run on the compositor ' +
'on WebRender');
}
}, 'background-color animation runs on the compositor'); }, 'background-color animation runs on the compositor');
promise_test(async t => { promise_test(async t => {
@ -1047,14 +1041,8 @@ promise_test(async t => {
await waitForAnimationReadyToRestyle(animation); await waitForAnimationReadyToRestyle(animation);
await waitForPaints(); await waitForPaints();
if (!isWebRender) { assert_animation_is_running_on_compositor(animation,
assert_animation_is_running_on_compositor(animation, 'background-color animation should be running on the compositor');
'background-color animation should be running on the compositor');
} else {
assert_animation_is_not_running_on_compositor(animation,
'background-color animation is not yet able to run on the compositor ' +
'on WebRender');
}
// Add a red opaque background image covering the background color animation. // Add a red opaque background image covering the background color animation.
div.style.backgroundImage = div.style.backgroundImage =
@ -1064,9 +1052,11 @@ promise_test(async t => {
await waitForAnimationReadyToRestyle(animation); await waitForAnimationReadyToRestyle(animation);
await waitForPaints(); await waitForPaints();
assert_animation_is_not_running_on_compositor(animation, if (!isWebRender || !navigator.platform.includes('Linux')) {
'Opaque background image stops background-color animations from running ' + assert_animation_is_not_running_on_compositor(animation,
'on the compositor'); 'Opaque background image stops background-color animations from running ' +
'on the compositor');
}
}, 'Opaque background image stops background-color animations from running ' + }, 'Opaque background image stops background-color animations from running ' +
' on the compositor'); ' on the compositor');

View File

@ -8362,9 +8362,7 @@ bool nsDisplayTransform::CanUseAsyncAnimations(nsDisplayListBuilder* aBuilder) {
bool nsDisplayBackgroundColor::CanUseAsyncAnimations( bool nsDisplayBackgroundColor::CanUseAsyncAnimations(
nsDisplayListBuilder* aBuilder) { nsDisplayListBuilder* aBuilder) {
LayerManager* layerManager = aBuilder->GetWidgetLayerManager(); return StaticPrefs::gfx_omta_background_color();
return layerManager &&
layerManager->GetBackendType() != layers::LayersBackend::LAYERS_WR;
} }
/* static */ /* static */

View File

@ -1,4 +1,4 @@
pref(gfx.omta.background-color,true) fuzzy-if((OSX&&!webrender)||(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!gpuProcess&&layersGPUAccelerated),1-1,10000-10000) == background-color-with-opacity.html background-color-with-opacity-ref.html pref(gfx.omta.background-color,true) fuzzy(0-1,0-10000) == background-color-with-opacity.html background-color-with-opacity-ref.html
== transitions-inline-already-wrapped-1.html transitions-inline-ref.html == transitions-inline-already-wrapped-1.html transitions-inline-ref.html
== transitions-inline-already-wrapped-2.html transitions-inline-ref.html == transitions-inline-already-wrapped-2.html transitions-inline-ref.html
== transitions-inline-rewrap-1.html transitions-inline-ref.html == transitions-inline-rewrap-1.html transitions-inline-ref.html

View File

@ -2396,127 +2396,125 @@ addAsyncAnimTest(async function() {
done_div(); done_div();
}); });
if (SpecialPowers.DOMWindowUtils.layerManagerType != 'WebRender') { // Normal background-color animation.
// Normal background-color animation. addAsyncAnimTest(async function() {
addAsyncAnimTest(async function() { new_div("background-color: rgb(255, 0, 0); " +
new_div("background-color: rgb(255, 0, 0); " + "transition: background-color 10s linear");
"transition: background-color 10s linear"); await waitForPaintsFlushed();
await waitForPaintsFlushed();
gDiv.style.backgroundColor = "rgb(0, 255, 0)"; gDiv.style.backgroundColor = "rgb(0, 255, 0)";
await waitForPaintsFlushed(); await waitForPaintsFlushed();
omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor,
"background-color transition runs on compositor thread"); "background-color transition runs on compositor thread");
advance_clock(5000); advance_clock(5000);
omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor,
"background-color on compositor at 5s"); "background-color on compositor at 5s");
done_div(); done_div();
}); });
// background-color animation with currentColor. // background-color animation with currentColor.
addAsyncAnimTest(async function() { addAsyncAnimTest(async function() {
new_div("color: rgb(255, 0, 0); " + new_div("color: rgb(255, 0, 0); " +
"background-color: currentColor; " + "background-color: currentColor; " +
"transition: background-color 10s linear"); "transition: background-color 10s linear");
await waitForPaintsFlushed(); await waitForPaintsFlushed();
gDiv.style.backgroundColor = "rgb(0, 255, 0)"; gDiv.style.backgroundColor = "rgb(0, 255, 0)";
await waitForPaintsFlushed(); await waitForPaintsFlushed();
omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor,
"background-color transition starting with current-color runs on " + "background-color transition starting with current-color runs on " +
"compositor thread"); "compositor thread");
advance_clock(5000); advance_clock(5000);
omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor,
"background-color on compositor at 5s"); "background-color on compositor at 5s");
done_div(); done_div();
}); });
// Tests that a background-color animation from inherited currentColor to // Tests that a background-color animation from inherited currentColor to
// a normal color on the compositor is updated when the parent color is // a normal color on the compositor is updated when the parent color is
// changed. // changed.
addAsyncAnimTest(async function() { addAsyncAnimTest(async function() {
new_div(""); new_div("");
const parent = document.createElement("div"); const parent = document.createElement("div");
gDiv.parentNode.insertBefore(parent, gDiv); gDiv.parentNode.insertBefore(parent, gDiv);
parent.style.color = "rgb(255, 0, 0)"; parent.style.color = "rgb(255, 0, 0)";
parent.appendChild(gDiv); parent.appendChild(gDiv);
gDiv.animate({ backgroundColor: [ "currentColor", "rgb(0, 255, 0)" ] }, 1000); gDiv.animate({ backgroundColor: [ "currentColor", "rgb(0, 255, 0)" ] }, 1000);
await waitForPaintsFlushed(); await waitForPaintsFlushed();
omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor,
"background-color animation starting with current-color runs on " + "background-color animation starting with current-color runs on " +
"compositor thread"); "compositor thread");
advance_clock(500); advance_clock(500);
omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor,
"background-color on compositor at 5s"); "background-color on compositor at 5s");
// Change the parent's color in the middle of the animation. // Change the parent's color in the middle of the animation.
parent.style.color = "rgb(0, 0, 255)"; parent.style.color = "rgb(0, 0, 255)";
await waitForPaintsFlushed(); await waitForPaintsFlushed();
omta_is("background-color", "rgb(0, 128, 128)", RunningOn.Compositor, omta_is("background-color", "rgb(0, 128, 128)", RunningOn.Compositor,
"background-color on compositor is reflected by the parent's " + "background-color on compositor is reflected by the parent's " +
"color change"); "color change");
done_div(); done_div();
parent.remove(); parent.remove();
}); });
// Tests that a background-color animation from currentColor to a normal color // Tests that a background-color animation from currentColor to a normal color
// on <a> element is updated when the link is visited. // on <a> element is updated when the link is visited.
addAsyncAnimTest(async function() { addAsyncAnimTest(async function() {
if (isGeckoView()) { if (isGeckoView()) {
todo(false, "no global history on GeckoView; can't run test"); todo(false, "no global history on GeckoView; can't run test");
return; return;
} }
[ gDiv ] = new_element("a", "display: block"); [ gDiv ] = new_element("a", "display: block");
gDiv.setAttribute("href", "not-exist.html"); gDiv.setAttribute("href", "not-exist.html");
gDiv.classList.add("visited"); gDiv.classList.add("visited");
const extraStyle = document.createElement('style'); const extraStyle = document.createElement('style');
document.head.appendChild(extraStyle); document.head.appendChild(extraStyle);
extraStyle.sheet.insertRule(".visited:visited { color: rgb(0, 0, 255); }", 0); extraStyle.sheet.insertRule(".visited:visited { color: rgb(0, 0, 255); }", 0);
extraStyle.sheet.insertRule(".visited:link { color: rgb(255, 0, 0); }", 1); extraStyle.sheet.insertRule(".visited:link { color: rgb(255, 0, 0); }", 1);
gDiv.animate({ backgroundColor: [ "currentColor", "rgb(0, 255, 0)" ] }, 1000); gDiv.animate({ backgroundColor: [ "currentColor", "rgb(0, 255, 0)" ] }, 1000);
await waitForPaintsFlushed(); await waitForPaintsFlushed();
omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(255, 0, 0)", RunningOn.Compositor,
"background-color animation starting with current-color runs on " + "background-color animation starting with current-color runs on " +
"compositor thread"); "compositor thread");
advance_clock(500); advance_clock(500);
omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor, omta_is("background-color", "rgb(128, 128, 0)", RunningOn.Compositor,
"background-color on compositor at 5s"); "background-color on compositor at 5s");
gDiv.setAttribute("href", window.top.location.href); gDiv.setAttribute("href", window.top.location.href);
await waitForVisitedLinkColoring(gDiv, "color", "rgb(0, 0, 255)"); await waitForVisitedLinkColoring(gDiv, "color", "rgb(0, 0, 255)");
await waitForPaintsFlushed(); await waitForPaintsFlushed();
// `omta_is` checks that the result on the compositor equals to the value by // `omta_is` checks that the result on the compositor equals to the value by
// getComputedValue() but getComputedValue lies for visited link values so // getComputedValue() but getComputedValue lies for visited link values so
// we use getOMTAStyle directly instead. // we use getOMTAStyle directly instead.
is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "background-color"), is(SpecialPowers.DOMWindowUtils.getOMTAStyle(gDiv, "background-color"),
"rgb(0, 128, 128)", "rgb(0, 128, 128)",
"background-color on <a> element after the link is visited"); "background-color on <a> element after the link is visited");
extraStyle.remove(); extraStyle.remove();
done_element(); done_element();
gDiv = null; gDiv = null;
}); });
}
// Normal translate animation. // Normal translate animation.
addAsyncAnimTest(async function() { addAsyncAnimTest(async function() {