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()) {
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

View File

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

View File

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