third_party/WebKit/LayoutTests/fast/css/sticky/sticky-style-change.html - Issue 2706673002: Mark elements as viewport constrained when they become sticky positioned

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-style-change.html

Issue 2706673002: Mark elements as viewport constrained when they become sticky positioned (Closed)

Patch Set: Add LayoutTest Created 3 years, 10 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-style-change-expected.html » ('j') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-style-change-expected.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <script>

	3 if (window.internals) {

	4 internals.settings.setCSSStickyPositionEnabled(true);

	5 }

	6 </script>

	7

	8 <html>

	9 <head>

	10 <style>

	11 body {

	12 margin: 0;

	13 overflow: hidden; /* hide scrollbars */

	14 }

	15

	16 .container {

	17 height: 2000px;

	18 }

	19

	20 .box {

	21 height: 50px;

	22 }

	23

	24 .sticky {

	25 position: sticky;

	26 top: 50px;

	27 background-color: green;

	28 }

	29 </style>

	30 <script>

	31 if (window.testRunner)

	32 testRunner.waitUntilDone()

	33

	34 function doTest()

	35 {

	36 const sticky = document.querySelector('.sticky');

	37 sticky.style.position = 'relative';

	38

	39 // Force layout.

	40 var x = sticky.offsetTop;
	flackr 2017/02/22 14:45:42 nit: just call stickyoffsetTop; nit: just call stickyoffsetTop; smcgruer 2017/02/22 15:26:31 Done. Show quoted text On 2017/02/22 14:45:42, flackr wrote: > nit: just call stickyoffsetTop; Done.
	41

	42 sticky.style.position = 'sticky';

	43

	44 // Yield to allow the sticky change to 'stick'.

	45 // TODO(smcgruer): If replaced with call to offsetTop, the sticky still

	46 // breaks but blink seems to scroll first and then draw the item so it

	47 // looks correct for the comparison. Expected?
	flackr 2017/02/22 14:45:42 I think what happens is the change to position sti I think what happens is the change to position sticky sets needs compositing inputs, and if you scroll without waiting a frame then updating the compositing inputs also updates the position of the sticky layer to be correct. Use requestAnimationFrame instead of setTimeout. smcgruer 2017/02/22 15:26:31 Done. Show quoted text On 2017/02/22 14:45:42, flackr wrote: > I think what happens is the change to position sticky sets needs compositing > inputs, and if you scroll without waiting a frame then updating the compositing > inputs also updates the position of the sticky layer to be correct. > > Use requestAnimationFrame instead of setTimeout. Done.
	48 setTimeout(function() {

	49 window.scrollTo(0, 100);

	50 if (window.testRunner)

	51 testRunner.notifyDone();

	52 }, 0);

	53 }

	54

	55 window.addEventListener('load', function() {

	56 // The timeout is required to force CompositingInputsUpdater to fire at least

	57 // once before we change the position.

	58 // TODO(smcgruer): For some reason, a rAF does not wait for this, but a 0 second timeout does.
	flackr 2017/02/22 14:45:42 This sounds likely to flake, I think setTimeout is This sounds likely to flake, I think setTimeout is working because of the minimum delay before running. A single rAF only waits for the start of a frame which also doesn't require clean compositing inputs but if you rAF twice then your function will be run at the start of the next frame after a frame has been produced. smcgruer 2017/02/22 15:26:31 Done. Show quoted text On 2017/02/22 14:45:42, flackr wrote: > This sounds likely to flake, I think setTimeout is working because of the > minimum delay before running. A single rAF only waits for the start of a frame > which also doesn't require clean compositing inputs but if you rAF twice then > your function will be run at the start of the next frame after a frame has been > produced. Done.
	59 setTimeout(doTest, 0);

	60 });

	61 </script>

	62 </head>

	63 <body>

	64 <div class="container">

	65 <div class="sticky box"></div>

	66 </div>

	67 </body>

	68 </html>

OLD	NEW