gecko-dev/layout/reftests/web-animations/stacking-context-animation-...

<!DOCTYPE html>
<title>Reference of testcases for bug 1279403</title>
<style>
span {
  height: 100px;
  width: 100px;
  background: green;
  position: fixed;
  top: 50px;
}
div {
  height: 100px;
  width: 100px;
  background: blue;
}
#first {
}
#second {
  position: fixed;
}
</style>
<span></span>
<div id="first"></div>
<div id="second"></div>
Bug 1279403 - Part 1: Force to apply corresponding change hint if there is no corresponding layer to generate display item even if animation's segment is transform:none or 100% opacity. r=birtles To create a stacking context for animations on transform:none segment, we need to set NS_FRAME_MAY_BE_TRANSFORMED. The fix is comming in part 2. Note that in case of animations which has properties preventing running on the compositor, e.g., width or height, corresponding layer is not created at all, but even in such cases, we normally set valid change hint for such animations in each tick, i.e. restyles in each tick. For example: div.animate([{ opacity: 1, width: '100px' }, { opacity: 0, width: '200px' }], 1000); This animation causes restyles in every ticks without this patch, this patch does not affect such animations at all. The only animations which will be affected by this patch are animations which has opacity/transform but did not have those properies. e.g, setting transform by setKeyframes or changing target element from other target which prevents running on the compositor, etc. MozReview-Commit-ID: 78fYqyX8uDX --HG-- extra : rebase_source : c4a6ef244f26f3d808fd2c6a5f80c1a15478ae31 2016-07-11 02:27:02 +03:00			`<!DOCTYPE html>`
			`<title>Reference of testcases for bug 1279403</title>`
			`<style>`
			`span {`
			`height: 100px;`
			`width: 100px;`
			`background: green;`
			`position: fixed;`
			`top: 50px;`
			`}`
			`div {`
			`height: 100px;`
			`width: 100px;`
			`background: blue;`
			`}`
			`#first {`
			`}`
			`#second {`
			`position: fixed;`
			`}`
			`</style>`
			`<span></span>`
			`<div id="first"></div>`
			`<div id="second"></div>`