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 that 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

--HG--
extra : rebase_source : 926f10590e90a10876339ccbea331a981f9f4773
This commit is contained in:
Hiroyuki Ikezoe 2018-06-25 11:51:06 +09:00
Родитель 3e2e6757bd
Коммит 9fc2c2ce39
3 изменённых файлов: 61 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,26 @@
<!DOCTYPE html>
<style>
#parent {
visibility: hidden;
will-change: transform;
}
#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>

Просмотреть файл

@ -0,0 +1,34 @@
<!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 step-end;
}
#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; }
100% { transform: translateX(0px); }
}
</style>
<div id="scroll">
<div id="parent">
<div id="fixed"></div>
</div>
</div>

Просмотреть файл

@ -70,3 +70,4 @@ fails-if(layerChecksEnabled) == background-position-important.html background-po
== 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