Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 03:15:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out 2 changesets (bug 1278136) for failures in no-stacking-context-opacity-removing-animation-in-delay.html

Browse Source 
Backed out changeset 62cf4a7d6007 (bug 1278136)
Backed out changeset 5f2db29e67ca (bug 1278136)

MozReview-Commit-ID: K9WcZFjL2XB
This commit is contained in:
Phil Ringnalda 2016-10-11 20:40:36 -07:00
parent 1d3ceeff04
commit 6182caa3b9
32 changed files with 39 additions and 729 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dom/animation/EffectCompositor.cpp
View File

@ -148,7 +148,7 @@ FindAnimationsForCompositor(const nsIFrame* aFrame,
return false;
}
if (!effect->HasEffectiveAnimationOfProperty(aProperty)) {
if (!effect->HasAnimationOfProperty(aProperty)) {
continue;
}

24
dom/animation/KeyframeEffectReadOnly.cpp
View File

@ -192,8 +192,7 @@ KeyframeEffectReadOnly::SetKeyframes(nsTArray<Keyframe>&& aKeyframes,
}
const AnimationProperty*
KeyframeEffectReadOnly::GetEffectiveAnimationOfProperty(
nsCSSPropertyID aProperty) const
KeyframeEffectReadOnly::GetAnimationOfProperty(nsCSSPropertyID aProperty) const
{
if (!IsInEffect()) {
return nullptr;
@ -220,17 +219,6 @@ KeyframeEffectReadOnly::GetEffectiveAnimationOfProperty(
return nullptr;
}
bool
KeyframeEffectReadOnly::HasAnimationOfProperty(nsCSSPropertyID aProperty) const
{
for (const AnimationProperty& property : mProperties) {
if (property.mProperty == aProperty) {
return true;
}
}
return false;
}
#ifdef DEBUG
bool
SpecifiedKeyframeArraysAreEqual(const nsTArray<Keyframe>& aA,
@ -938,12 +926,10 @@ KeyframeEffectReadOnly::CanThrottle() const
// already running on compositor.
for (const LayerAnimationInfo::Record& record :
LayerAnimationInfo::sRecords) {
// Skip properties that are overridden by !important rules.
// (GetEffectiveAnimationOfProperty, as called by
// HasEffectiveAnimationOfProperty, only returns a property which is
// neither overridden by !important rules nor overridden by other
// animation.)
if (!HasEffectiveAnimationOfProperty(record.mProperty)) {
// Skip properties that are overridden in the cascade.
// (GetAnimationOfProperty, as called by HasAnimationOfProperty,
// only returns an animation if it currently wins in the cascade.)
if (!HasAnimationOfProperty(record.mProperty)) {
continue;
}

21
dom/animation/KeyframeEffectReadOnly.h
View File

@ -235,25 +235,12 @@ public:
ErrorResult& aRv);
void SetKeyframes(nsTArray<Keyframe>&& aKeyframes,
nsStyleContext* aStyleContext);
// Returns true if the effect includes |aProperty| regardless of whether the
// property is overridden by !important rule.
bool HasAnimationOfProperty(nsCSSPropertyID aProperty) const;
// GetEffectiveAnimationOfProperty returns AnimationProperty corresponding
// to a given CSS property if the effect includes the property and the
// property is not overridden by !important rules.
// Also EffectiveAnimationOfProperty returns true under the same condition.
//
// NOTE: We don't currently check for !important rules for properties that
// can't run on the compositor.
bool HasEffectiveAnimationOfProperty(nsCSSPropertyID aProperty) const
const AnimationProperty*
GetAnimationOfProperty(nsCSSPropertyID aProperty) const;
bool HasAnimationOfProperty(nsCSSPropertyID aProperty) const
{
return GetEffectiveAnimationOfProperty(aProperty) != nullptr;
return GetAnimationOfProperty(aProperty) != nullptr;
}
const AnimationProperty* GetEffectiveAnimationOfProperty(
nsCSSPropertyID aProperty) const;
const InfallibleTArray<AnimationProperty>& Properties() const
{
return mProperties;

3
layout/base/RestyleManager.cpp
View File

@ -1569,7 +1569,8 @@ ElementRestyler::AddLayerChangesForAnimation()
// setKeyframes or changing target element from other target which prevents
// running on the compositor, etc.
if (!layer &&
nsLayoutUtils::HasEffectiveAnimation(mFrame, layerInfo.mProperty)) {
nsLayoutUtils::HasRelevantAnimationOfProperty(mFrame,
layerInfo.mProperty)) {
hint |= layerInfo.mChangeHint;
}
}

8
layout/base/nsDisplayList.cpp
View File

@ -487,21 +487,21 @@ AddAnimationsForProperty(nsIFrame* aFrame, nsCSSPropertyID aProperty,
MOZ_ASSERT(keyframeEffect,
"A playing animation should have a keyframe effect");
const AnimationProperty* property =
keyframeEffect->GetEffectiveAnimationOfProperty(aProperty);
keyframeEffect->GetAnimationOfProperty(aProperty);
if (!property) {
continue;
}
// Note that if the property is overridden by !important rules,
// GetEffectiveAnimationOfProperty returns null instead.
// GetAnimationOfProperty returns null instead.
// This is what we want, since if we have animations overridden by
// !important rules, we don't want to send them to the compositor.
MOZ_ASSERT(anim->CascadeLevel() !=
EffectCompositor::CascadeLevel::Animations ||
!effects->PropertiesWithImportantRules()
.HasProperty(aProperty),
"GetEffectiveAnimationOfProperty already tested the property "
"is not overridden by !important rules");
"GetAnimationOfProperty already tested the property is not "
"overridden by !important rules");
// Don't add animations that are pending if their timeline does not
// track wallclock time. This is because any pending animations on layers

19
layout/base/nsLayoutUtils.cpp
View File

@ -483,7 +483,7 @@ nsLayoutUtils::HasActiveAnimationOfProperty(const nsIFrame* aFrame,
[&aProperty](KeyframeEffectReadOnly& aEffect)
{
return aEffect.IsCurrent() && aEffect.IsInEffect() &&
aEffect.HasEffectiveAnimationOfProperty(aProperty);
aEffect.HasAnimationOfProperty(aProperty);
}
);
}
@ -502,8 +502,8 @@ nsLayoutUtils::HasCurrentTransitions(const nsIFrame* aFrame)
}
bool
nsLayoutUtils::HasAnimationOfProperty(const nsIFrame* aFrame,
nsCSSPropertyID aProperty)
nsLayoutUtils::HasRelevantAnimationOfProperty(const nsIFrame* aFrame,
nsCSSPropertyID aProperty)
{
return HasMatchingAnimations(aFrame,
[&aProperty](KeyframeEffectReadOnly& aEffect)
@ -514,19 +514,6 @@ nsLayoutUtils::HasAnimationOfProperty(const nsIFrame* aFrame,
);
}
bool
nsLayoutUtils::HasEffectiveAnimation(const nsIFrame* aFrame,
nsCSSPropertyID aProperty)
{
return HasMatchingAnimations(aFrame,
[&aProperty](KeyframeEffectReadOnly& aEffect)
{
return (aEffect.IsInEffect() || aEffect.IsCurrent()) &&
aEffect.HasEffectiveAnimationOfProperty(aProperty);
}
);
}
static float
GetSuitableScale(float aMaxScale, float aMinScale,
nscoord aVisibleDimension, nscoord aDisplayDimension)

16
layout/base/nsLayoutUtils.h
View File

@ -2244,18 +2244,12 @@ public:
static bool HasCurrentTransitions(const nsIFrame* aFrame);
/**
* Returns true if |aFrame| has an animation of |aProperty| regardless of
* whether the property is overridden by !important rule.
* Returns true if the frame has current or in-effect (i.e. in before phase,
* running or filling) animations or transitions for the
* property.
*/
static bool HasAnimationOfProperty(const nsIFrame* aFrame,
nsCSSPropertyID aProperty);
/**
* Returns true if |aFrame| has an animation of |aProperty| which is
* not overridden by !important rules.
*/
static bool HasEffectiveAnimation(const nsIFrame* aFrame,
nsCSSPropertyID aProperty);
static bool HasRelevantAnimationOfProperty(const nsIFrame* aFrame,
nsCSSPropertyID aProperty);
/**
* Checks if off-main-thread animations are enabled.

13
layout/generic/nsFrame.cpp
View File

@ -554,7 +554,8 @@ nsFrame::Init(nsIContent* aContent,
}
const nsStyleDisplay *disp = StyleDisplay();
if (disp->HasTransform(this) ||
nsLayoutUtils::HasAnimationOfProperty(this, eCSSProperty_transform)) {
nsLayoutUtils::HasRelevantAnimationOfProperty(this,
eCSSProperty_transform)) {
// The frame gets reconstructed if we toggle the -moz-transform
// property, so we can set this bit here and then ignore it.
mState |= NS_FRAME_MAY_BE_TRANSFORMED;
@ -1139,8 +1140,8 @@ nsIFrame::IsTransformed() const
(StyleDisplay()->HasTransform(this) ||
IsSVGTransformed() ||
(mContent &&
nsLayoutUtils::HasAnimationOfProperty(this,
eCSSProperty_transform) &&
nsLayoutUtils::HasRelevantAnimationOfProperty(
this, eCSSProperty_transform) &&
IsFrameOfType(eSupportsCSSTransforms) &&
mContent->GetPrimaryFrame() == this)));
}
@ -1152,7 +1153,8 @@ nsIFrame::HasOpacityInternal(float aThreshold) const
return StyleEffects()->mOpacity < aThreshold ||
(StyleDisplay()->mWillChangeBitField & NS_STYLE_WILL_CHANGE_OPACITY) ||
(mContent &&
nsLayoutUtils::HasAnimationOfProperty(this, eCSSProperty_opacity) &&
nsLayoutUtils::HasRelevantAnimationOfProperty(
this, eCSSProperty_opacity) &&
mContent->GetPrimaryFrame() == this);
}
@ -2113,7 +2115,8 @@ nsIFrame::BuildDisplayListForStackingContext(nsDisplayListBuilder* aBuilder,
bool opacityItemForEventsAndPluginsOnly = false;
if (effects->mOpacity == 0.0 && aBuilder->IsForPainting() &&
!(disp->mWillChangeBitField & NS_STYLE_WILL_CHANGE_OPACITY) &&
!nsLayoutUtils::HasAnimationOfProperty(this, eCSSProperty_opacity)) {
!nsLayoutUtils::HasActiveAnimationOfProperty(this,
eCSSProperty_opacity)) {
if (needEventRegions ||
aBuilder->WillComputePluginGeometry()) {
opacityItemForEventsAndPluginsOnly = true;

2
layout/reftests/bugs/reftest.list
View File

@ -809,7 +809,7 @@ fuzzy-if(skiaContent,1,500) == 393760-2.xml 393760-2-ref.xml
== 394534-1.html 394534-1-ref.html
== 394676-1.xhtml 394676-1-ref.xhtml
== 395107-1.html 395107-1-ref.html
fuzzy-if(Android,4,2) == 395107-2.html 395107-2-ref.html
== 395107-2.html 395107-2-ref.html
fuzzy-if(skiaContent,1,118) == 395107-3.html 395107-3-ref.html
== 395107-4.html 395107-4-ref.html
== 395107-5.html 395107-5-ref.html

41
layout/reftests/css-animations/no-stacking-context-opacity-removing-animation-in-delay.html
View File

@ -1,41 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Removing CSS animation in delay phase destroys a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Opacity0 {
from, to { opacity: 0 }
}
#test {
width: 100px; height: 100px;
background: blue;
opacity: 1 ! important;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
target.style.animation = "Opacity0 100s 100s";
requestAnimationFrame(() => {
// Here we have CSS animation on 100% opacity style element, so
// there should be a stacking context.
target.style.animation = "";
requestAnimationFrame(() => {
// Now we have only 100% opacity style, so we should not create any
// stacking context.
document.documentElement.classList.remove("reftest-wait");
});
});
});
</script>

42
layout/reftests/css-animations/no-stacking-context-transform-removing-animation-in-delay.html
View File

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Removing CSS animation in delay phase destroys stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes TransformNone {
from, to { transform: none }
}
#test {
width: 100px; height: 100px;
background: blue;
transform: none ! important;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
target.style.animation = "TransformNone 100s 100s";
requestAnimationFrame(() => {
// Here we have CSS animation on transform:none style element, so
// there should be a stacking context.
target.style.animation = "";
requestAnimationFrame(() => {
// Now we have only transform:none style, so we should not create any
// stacking context.
document.documentElement.classList.remove("reftest-wait");
});
});
});
</script>

18
layout/reftests/css-animations/reftest.list
View File

@ -12,16 +12,8 @@ fails != print-no-animations.html print-no-animations-notref.html # reftest harn
test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-opacity-1-animation.html stacking-context-animation-ref.html
# We need to run transform:none test case when OMTA is disabled to check that the animation creates a stacking context even if the animation is not running on the compositor
test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-context-transform-none-animation.html stacking-context-animation-ref.html
== no-stacking-context-opacity-removing-animation-in-delay.html no-stacking-context-animation-ref.html
== no-stacking-context-transform-removing-animation-in-delay.html no-stacking-context-animation-ref.html
== stacking-context-lose-opacity-1.html stacking-context-animation-ref.html
== stacking-context-lose-transform-none.html stacking-context-animation-ref.html
== stacking-context-opacity-win-in-delay.html stacking-context-animation-ref.html
== stacking-context-opacity-win-in-delay-on-main-thread.html stacking-context-animation-ref.html
== stacking-context-opacity-wins-over-transition.html stacking-context-animation-ref.html
== stacking-context-transform-win-in-delay.html stacking-context-animation-ref.html
== stacking-context-transform-win-in-delay-on-main-thread.html stacking-context-animation-ref.html
== stacking-context-transform-wins-over-transition.html stacking-context-animation-ref.html
== stacking-context-lose-opacity-1.html no-stacking-context-animation-ref.html
== stacking-context-lose-transform-none.html no-stacking-context-animation-ref.html
== stacking-context-opacity-1-animation.html stacking-context-animation-ref.html
== stacking-context-opacity-1-with-fill-backwards.html stacking-context-animation-ref.html
== stacking-context-opacity-1-with-fill-forwards.html stacking-context-animation-ref.html
@ -33,10 +25,8 @@ test-pref(layers.offmainthreadcomposition.async-animations,false) == stacking-co
== stacking-context-transform-none-animation-with-preserve-3d.html stacking-context-animation-ref.html
== stacking-context-transform-none-with-fill-backwards.html stacking-context-animation-ref.html
== stacking-context-transform-none-with-fill-forwards.html stacking-context-animation-ref.html
== stacking-context-opacity-1-in-delay.html stacking-context-animation-ref.html
== stacking-context-opacity-removing-important-in-delay.html stacking-context-animation-ref.html
== stacking-context-transform-none-in-delay.html stacking-context-animation-ref.html
== stacking-context-transform-removing-important-in-delay.html stacking-context-animation-ref.html
fails == stacking-context-opacity-1-in-delay.html stacking-context-animation-ref.html # bug 1278136 and bug 1279403
fails == stacking-context-transform-none-in-delay.html stacking-context-animation-ref.html # bug 1278136 and bug 1279403
== background-position-in-delay.html background-position-ref.html
== background-position-after-finish.html background-position-ref.html
fails == background-position-running.html background-position-ref.html # This test fails the reftest-opaque-layer check since animating background-position currently creates an active layer, and reftest-opaque-layer only handles items assigned to PaintedLayers.

3
layout/reftests/css-animations/stacking-context-lose-opacity-1.html
View File

@ -1,7 +1,6 @@
<!DOCTYPE html>
<title>
Opacity animation creates a stacking context even if the opacity property
is overridden by an !important rule
Opacity animation losing in cascade doesn't create stacking context
</title>
<style>
span {

3
layout/reftests/css-animations/stacking-context-lose-transform-none.html
View File

@ -1,7 +1,6 @@
<!DOCTYPE html>
<title>
Transform animation creates a stacking context even if the transform property
is overridden by an !important rule
Transform animation losing in cascade doesn't create stacking context
</title>
<style>
span {

43
layout/reftests/css-animations/stacking-context-opacity-removing-important-in-delay.html
View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Removing !important rule during delay phase of animation creates
a stack context for correct style
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Opacity0 {
from, to { opacity: 0 }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: Opacity0 100s 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
target.style.setProperty("opacity", "0.1", "important");
requestAnimationFrame(() => {
// Now the target opacity style should be 0.1 because of !important rule.
// Apply 100% opacity without important directive.
target.style.setProperty("opacity", "1", "");
requestAnimationFrame(() => {
// The CSS animation is no longer overridden but it's still in delay
// phase, so we should create a stacking context for 100% opacity style.
document.documentElement.classList.remove("reftest-wait");
});
});
});
</script>

31
layout/reftests/css-animations/stacking-context-opacity-win-in-delay-on-main-thread.html
View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<title>
Opacity animation winning over another opacity animation in delay phase
on the main-thread creates a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Opacity1 {
from, to { opacity: 1; }
}
@keyframes Opacity0 {
from, to { opacity: 0; }
}
// For preventing running on the compositor.
@keyframes Width {
from, to { width: 100px; }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: Opacity0 100s 100s, Opacity1 100s, Width 100s;
}
</style>
<span></span>
<div id="test"></div>

27
layout/reftests/css-animations/stacking-context-opacity-win-in-delay.html
View File

@ -1,27 +0,0 @@
<!DOCTYPE html>
<title>
Opacity animation winning over another opacity animation in delay phase
creates a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Opacity1 {
from, to { opacity: 1; }
}
@keyframes Opacity0 {
from, to { opacity: 0; }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: Opacity0 100s 100s, Opacity1 100s;
}
</style>
<span></span>
<div id="test"></div>

40
layout/reftests/css-animations/stacking-context-opacity-wins-over-transition.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Opacity animation winning over opacity transition creates a stacking context
for correct style.
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Opacity1 {
from, to { opacity: 1; }
}
#test {
width: 100px; height: 100px;
background: blue;
opacity: 1;
transition: opacity 100s steps(1, start);
animation: Opacity1 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
getComputedStyle(target).opacity;
// CSS animation wins over transitions, so transition won't be visible during
// the CSS animation.
target.style.opacity = 0;
requestAnimationFrame(() => {
document.documentElement.classList.remove("reftest-wait");
});
});
</script>

44
layout/reftests/css-animations/stacking-context-transform-removing-important-in-delay.html
View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Removing !important rule during delay phase of animation creates
a stack context for correct style
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Transform100px {
from, to { transform: translate(100px) }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: Transform100px 100s 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
target.style.setProperty("transform", "translateX(200px)", "important");
requestAnimationFrame(() => {
// Now the target transform style should be translateX(200px) because of
// !important rule.
// Apply transform:none without important directive.
target.style.setProperty("transform", "none", "");
requestAnimationFrame(() => {
// The CSS animation is no longer overridden but it's still in delay
// phase, so we should create a stacking context for transform:none style.
document.documentElement.classList.remove("reftest-wait");
});
});
});
</script>

31
layout/reftests/css-animations/stacking-context-transform-win-in-delay-on-main-thread.html
View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<title>
Transform animation winning over another transform animation in delay phase
on the main-thread creates a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes TransformNone {
from, to { transform: none; }
}
@keyframes Transform100px {
from, to { transform: translateX(100px); }
}
// For preventing running on the compositor.
@keyframes Width {
from, to { width: 100px; }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: Transform100px 100s 100s, TransformNone 100s, Width 100s;
}
</style>
<span></span>
<div id="test"></div>

27
layout/reftests/css-animations/stacking-context-transform-win-in-delay.html
View File

@ -1,27 +0,0 @@
<!DOCTYPE html>
<title>
Transform animation winning over another transform animation in delay phase
creates a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes TransformNone {
from, to { transform: none; }
}
@keyframes Transform100px {
from, to { transform: translateX(100px); }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: Transform100px 100s 100s, TransformNone 100s;
}
</style>
<span></span>
<div id="test"></div>

40
layout/reftests/css-animations/stacking-context-transform-wins-over-transition.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Transform animation winning over transition creates a stacking context
for correct style
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes TransformNone {
from, to { transform: none; }
}
#test {
width: 100px; height: 100px;
background: blue;
transform: translateX(200px);
transition: transform 100s steps(1, start);
animation: TransformNone 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
getComputedStyle(target).transform;
// CSS animation wins over transition, so transition won't be visible during
// the CSS animation.
target.style.transform = "translateX(100px)";
requestAnimationFrame(() => {
document.documentElement.classList.remove("reftest-wait");
});
});
</script>

20
layout/reftests/css-transitions/no-stacking-context-transition-ref.html
View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<title>
Reference of testcases which don't create a stacking context for bug 1278136
</title>
<style>
span {
height: 100px;
width: 100px;
background: green;
position: fixed;
top: 50px;
}
#test {
height: 100px;
width: 100px;
background: blue;
}
</style>
<span></span>
<div id="test"></div>

4
layout/reftests/css-transitions/reftest.list
View File

@ -2,7 +2,3 @@
== transitions-inline-already-wrapped-2.html transitions-inline-ref.html
== transitions-inline-rewrap-1.html transitions-inline-ref.html
== transitions-inline-rewrap-2.html transitions-inline-ref.html
== stacking-context-opacity-lose-to-animation.html stacking-context-transition-ref.html
== stacking-context-transform-lose-to-animation.html stacking-context-transition-ref.html
== stacking-context-opacity-wins-over-important-style.html stacking-context-transition-ref.html
== stacking-context-transform-wins-over-important-style.html stacking-context-transition-ref.html

45
layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Opacity transition and animation overridden by !important rule creates a
stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Opacity0 {
from, to { opacity: 0; }
}
#test {
width: 100px; height: 100px;
background: blue;
opacity: 0 ! important;
transition: opacity 100s steps(1, start);
animation: Opacity0 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
getComputedStyle(target).opacity;
// Change the opacity style to 100%.
target.style.setProperty("opacity", "1", "important");
// Important style is changed but there is a CSS animation,
// so transition won't be visible and the CSS animation is overridden by
// the !important rule. As a result opacity style here should be 100%
// specified by the important rule, but we should create a stacking
// context for it because there are animations.
requestAnimationFrame(() => {
document.documentElement.classList.remove("reftest-wait");
});
});
</script>

35
layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Opacity transition winning over !important rule creates a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
#test {
width: 100px; height: 100px;
background: blue;
transition: opacity 100s steps(1, start);
opacity: 0 ! important;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
getComputedStyle(target).opacity;
target.style.setProperty("opacity", "1", "important");
getComputedStyle(target).opacity;
requestAnimationFrame(() => {
document.documentElement.classList.remove("reftest-wait");
});
});
</script>

45
layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Transform transition and animation overridden by !important rule create
a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Transform100px {
from, to { transform: translateX(100px); }
}
#test {
width: 100px; height: 100px;
background: blue;
transform: translateX(200px) ! important;
transition: transform 100s steps(1, start);
animation: Transform100px 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
getComputedStyle(target).transform;
// Change the transform style to 'none'.
target.style.setProperty("transform", "none", "important");
// Important style is changed but there is a CSS animation,
// so transition won't be visible and the CSS animation is overridden by
// the !important rule. As a result transform style here should be 'none'
// specified by the important rule, but we should create a stacking
// context for it because there are animations.
requestAnimationFrame(() => {
document.documentElement.classList.remove("reftest-wait");
});
});
</script>

35
layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html
View File

@ -1,35 +0,0 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>
Transform transition winning over !important rule creates a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
#test {
width: 100px; height: 100px;
background: blue;
transition: transform 100s steps(1, start);
transform: translateX(200px) ! important;
}
</style>
<span></span>
<div id="test"></div>
<script>
window.addEventListener("load", () => {
var target = document.getElementById("test");
getComputedStyle(target).transform;
target.style.setProperty("transform", "none", "important");
getComputedStyle(target).transform;
requestAnimationFrame(() => {
document.documentElement.classList.remove("reftest-wait");
});
});
</script>

19
layout/reftests/css-transitions/stacking-context-transition-ref.html
View File

@ -1,19 +0,0 @@
<!DOCTYPE html>
<title>Reference of testcases for bug 1273042</title>
<style>
span {
height: 100px;
width: 100px;
background: green;
position: fixed;
top: 50px;
z-index: -1;
}
#test {
height: 100px;
width: 100px;
background: blue;
}
</style>
<span></span>
<div id="test"></div>

2
layout/reftests/web-animations/reftest.list
View File

@ -5,12 +5,10 @@ test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-no
test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-keyframe.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-target.html stacking-context-animation-changing-target-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-changing-effect.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-opacity-losing-css-animation-in-delay.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-keyframe.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-target.html stacking-context-animation-changing-target-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-effect.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-changing-display-property.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == stacking-context-transform-losing-css-animation-in-delay.html stacking-context-animation-ref.html
test-pref(dom.animations-api.core.enabled,true) == style-updates-on-iteration-composition-changed-from-accumulate-to-replace.html style-updates-for-iteration-composite-ref.html
test-pref(dom.animations-api.core.enabled,true) == style-updates-on-iteration-composition-changed-from-replace-to-accumulate.html style-updates-for-iteration-composite-ref.html
test-pref(dom.animations-api.core.enabled,true) == style-updates-on-current-iteration-changed.html style-updates-for-iteration-composite-ref.html

32
layout/reftests/web-animations/stacking-context-opacity-losing-css-animation-in-delay.html
View File

@ -1,32 +0,0 @@
<!DOCTYPE html>
<title>
CSS opacity animation winning over web animation in delay phase creates
a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes Opacity1 {
from, to { opacity: 1; }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: Opacity1 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
document.getElementById("test")
.animate({ opacity: [0.1, 0.1] }, { duration: 100000, delay: 100000 });
requestAnimationFrame(function() {
document.documentElement.classList.remove("reftest-wait");
});
</script>

33
layout/reftests/web-animations/stacking-context-transform-losing-css-animation-in-delay.html
View File

@ -1,33 +0,0 @@
<!DOCTYPE html>
<title>
CSS transform animation winning over web animation in delay phase creates
a stacking context
</title>
<style>
span {
height: 100px;
width: 100px;
position: fixed;
background: green;
top: 50px;
}
@keyframes TransformNone {
from, to { transform: none; }
}
#test {
width: 100px; height: 100px;
background: blue;
animation: TransformNone 100s;
}
</style>
<span></span>
<div id="test"></div>
<script>
document.getElementById("test")
.animate({ transform: ['translateX(100px)', 'translate(100px)'] },
{ duration: 100000, delay: 100000 });
requestAnimationFrame(function() {
document.documentElement.classList.remove("reftest-wait");
});
</script>