зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
3e2e6757bd
Коммит
9fc2c2ce39
|
@ -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
|
||||
|
|
Загрузка…
Ссылка в новой задаче