Bug 1430884 - A reftest that transform animation makes the element as a containing block for fixed-pos descendants even if the element is visibility:hidden and if the animating value is 'transform:none'. r?birtles draft
authorHiroyuki Ikezoe <hikezoe@mozilla.com>
Fri, 22 Jun 2018 13:27:20 +0900
changeset 809449 907b0c2eea90d45454412c51ff13c33620ffe5db
parent 809448 de2debd37de01bf29005642823b807e63b773afe
child 809450 50a971162051a703f3f9ae12ed93041364c07aa7
push id113680
push userhikezoe@mozilla.com
push dateFri, 22 Jun 2018 04:33:20 +0000
reviewersbirtles
bugs1430884
milestone62.0a1
Bug 1430884 - A reftest that transform animation makes the element as a containing block for fixed-pos descendants even if the element is visibility:hidden and if the animating value is 'transform:none'. r?birtles As per the CSS Animations spec [1], animations must behave as if 'will-change' is specified, and as per the Will Change spec [2] the element having 'will-change' property other than 'auto' behaves as a containing block for fixed-pos descendants. This reftest tests the behavior. The reason we also specified visibility:hidden there is that we are going to optimize transform animations on/inside visibility:hidden element, so this reftest also tests it. In this reftest, if the containing block is correctly generated, the fixed-pos element is rendered inside the parent element, thus the scrollable element overflows, then the vertial scroll bar appears. [1] https://drafts.csswg.org/css-animations-1/#animations > While an animation is applied but has not finished, or has finished but has > an animation-fill-mode of forwards or both, the user agent must act as if > the will-change property ([css-will-change-1]) on the element additionally > includes all the properties animated by the animation. [2] https://drafts.csswg.org/css-will-change/#will-change > If any non-initial value of a property would cause the element to generate > a containing block for fixed positioned elements, specifying that property > in will-change must cause the element to generate a containing block for > fixed positioned elements. MozReview-Commit-ID: Kx5Fdx8FJUG
layout/reftests/css-animations/containing-block-on-visibility-hidden-ref.html
layout/reftests/css-animations/containing-block-on-visibility-hidden.html
layout/reftests/css-animations/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/containing-block-on-visibility-hidden-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+#parent {
+  visibility: hidden;
+  transform: translateX(0px);
+}
+
+#fixed {
+  position: fixed;
+  background-color: green;
+  height: 100px;
+  width: 100px;
+}
+
+#scroll {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 80px;
+  width: 100px;
+}
+</style>
+<div id="scroll">
+  <div id="parent">
+    <div id="fixed"></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-animations/containing-block-on-visibility-hidden.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>
+Transform animation generates a containing block for fixed-pos descendants
+even if the animation value is 'transform:none'
+</title>
+<style>
+#parent {
+  visibility: hidden;
+  animation: anim 100s;
+}
+
+#fixed {
+  position: fixed;
+  background-color: green;
+  height: 100px;
+  width: 100px;
+}
+
+#scroll {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 80px;
+  width: 100px;
+}
+@keyframes anim {
+  0% { transform: none; }  /* To avoid some optimizations that skip restyling */
+  99% { transform: none; } /* we specify 99% value instead of using step-end  */
+  100% { transform: translateX(0px); }
+}
+</style>
+<div id="scroll">
+  <div id="parent">
+    <div id="fixed"></div>
+  </div>
+</div>
--- a/layout/reftests/css-animations/reftest.list
+++ b/layout/reftests/css-animations/reftest.list
@@ -65,8 +65,9 @@ fails-if(layerChecksEnabled) == backgrou
 == no-style-sharing-with-animations.html no-style-sharing-with-animations-ref.html
 
 == continuation-opacity.html continuation-opacity-ref.html
 == ib-split-sibling-opacity.html about:blank
 
 == opacity-animation-in-fixed-opacity-parent.html opacity-animation-in-fixed-opacity-parent-ref.html
 == opacity-animation-in-delay.html about:blank
 == transform-animation-in-delay.html transform-animation-in-delay-ref.html
+== containing-block-on-visibility-hidden.html containing-block-on-visibility-hidden-ref.html