gecko-dev/layout/reftests/css-animations/containing-block-on-visibil...

<!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>
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 2018-06-25 05:51:06 +03:00			`<!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>`