Bug 1318697 - Part 1: Don't request restyle for animations level if there is no animations' level effect. r?birtles draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Tue, 29 Nov 2016 10:17:48 +0900
changeset 444899 5fbf9a6e2c72ab27d069dbbe9dc7fa947b7ec6c7
parent 444725 8387a4ada9a5c4cab059d8fafe0f8c933e83c149
child 444900 25bc413f6a0c758ade8eef8c7378bc7fcb3227bc
push id37398
push userhiikezoe@mozilla-japan.org
push dateTue, 29 Nov 2016 01:37:50 +0000
reviewersbirtles
bugs1318697
milestone53.0a1
Bug 1318697 - Part 1: Don't request restyle for animations level if there is no animations' level effect. r?birtles MozReview-Commit-ID: H7Onymm50Fk
dom/animation/EffectCompositor.cpp
layout/reftests/css-transitions/reftest.list
layout/reftests/css-transitions/transitions-by-important-rule-change-ref.html
layout/reftests/css-transitions/transitions-by-important-rule-change.html
--- a/dom/animation/EffectCompositor.cpp
+++ b/dom/animation/EffectCompositor.cpp
@@ -765,17 +765,18 @@ EffectCompositor::UpdateCascadeResults(E
     return;
   }
 
   // If properties for compositor are newly overridden by !important rules, or
   // released from being overridden by !important rules, we need to update
   // layers for animations level because it's a trigger to send animations to
   // the compositor or pull animations back from the compositor.
   if (prevCompositorPropertiesWithImportantRules !=
-        compositorPropertiesInSet(propertiesWithImportantRules)) {
+        compositorPropertiesInSet(propertiesWithImportantRules) &&
+      !compositorPropertiesInSet(propertiesForAnimationsLevel).none()) {
     presContext->EffectCompositor()->
       RequestRestyle(aElement, aPseudoType,
                      EffectCompositor::RestyleType::Layer,
                      EffectCompositor::CascadeLevel::Animations);
   }
   // If we have transition properties for compositor and if the same propery
   // for animations level is newly added or removed, we need to update layers
   // for transitions level because composite order has been changed now.
--- a/layout/reftests/css-transitions/reftest.list
+++ b/layout/reftests/css-transitions/reftest.list
@@ -1,8 +1,9 @@
 == 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
 == 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
+== transitions-by-important-rule-change.html transitions-by-important-rule-change-ref.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-by-important-rule-change-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>A reference of 100x100 blue box</title>
+<style>
+div {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<div></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-by-important-rule-change.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Opacity transition and transform transition by changing transform style with
+!important rule
+</title>
+<style>
+div {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<div id="target"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("target");
+  target.style = "opacity: 0.5; transform: translateY(300px);";
+
+  getComputedStyle(target).transform;
+
+  target.style = "transition: opacity 1s -0.9s steps(1, end), " +
+                 "transform 1s -0.9s steps(1, end); " +
+                 "transform: translateY(0px) !important; " +
+                 "opacity: 1;"
+
+  target.addEventListener("transitionend", () => {
+    document.documentElement.classList.remove("reftest-wait");
+  }, false);
+});
+</script>