mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-12-01 08:42:13 +00:00
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:
parent
1f0f5d6c7d
commit
28121ce9e6
@ -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
|
||||||
|
@ -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');
|
||||||
|
|
||||||
|
@ -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 */
|
||||||
|
@ -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
|
||||||
|
@ -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() {
|
||||||
|
Loading…
Reference in New Issue
Block a user