third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor.html - Issue 2845613002: Fix the bug that sticky element may not be correctly invalidated due to non-promotion

Side by Side Diff

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

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor.html

Issue 2845613002: Fix the bug that sticky element may not be correctly invalidated due to non-promotion (Closed)

Patch Set: Logic update && add layout test Created 3 years, 8 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:

View unified diff | Download patch

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor-expected.html » ('j') | third_party/WebKit/LayoutTests/compositing/overflow/non-composited-sticky-element-in-main-thread-scrolled-composited-ancestor-expected.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <style>

	3 .scroller {

	4 overflow: scroll;

	5 width: 200px;

	6 height: 600px;

	7 }

	8

	9 .composited {

	10 will-change: transform;

	11 }

	12

	13 .box {

	14 background: rgba(255, 0, 0, 0.5);
	flackr 2017/04/27 14:22:56 nit: Use a greenish color - i.e. rgba(0, 255, 0, 0 nit: Use a greenish color - i.e. rgba(0, 255, 0, 0.9); yigu 2017/04/27 15:20:10 Done. Show quoted text On 2017/04/27 14:22:56, flackr wrote: > nit: Use a greenish color - i.e. rgba(0, 255, 0, 0.9); Done.
	15 position: sticky;

	16 width: 100%;

	17 height: 50px;

	18 top: 0px;

	19 }

	20

	21 .container {

	22 width: 100%;

	23 height: 1000px;

	24 background: green;
	flackr 2017/04/27 14:22:56 nit: Let's just make this gray or something simila nit: Let's just make this gray or something similar. yigu 2017/04/27 15:20:10 Done. Show quoted text On 2017/04/27 14:22:56, flackr wrote: > nit: Let's just make this gray or something similar. Done.
	25 }

	26 </style>

	27

	28 <div id="scroller" class="scroller">

	29 <div class="composited container">

	30 <div class="box"></div>
	flackr 2017/04/27 14:22:56 While not necessary, the nice way to represent thi While not necessary, the nice way to represent this would be an outline or box showing where we expect the sticky box to be (e.g. <div class="indicator"></div> .indicator { position: absolute; top: ##px; height: 50px; background: red; /* covered up by .box when working / } yigu* 2017/04/27 15:20:10 Done. Show quoted text On 2017/04/27 14:22:56, flackr wrote: > While not necessary, the nice way to represent this would be an outline or box > showing where we expect the sticky box to be (e.g. <div class="indicator"></div> > .indicator { > position: absolute; > top: ##px; > height: 50px; > background: red; /* covered up by .box when working */ > } Done.
	31 </div>

	32 </div>

	33

	34 <script>

	35 if (window.testRunner)

	36 testRunner.waitUntilDone()

	37

	38 function doTest() {

	39 let scroller = document.getElementById('scroller');

	40 window.requestAnimationFrame(function() {

	41 scroller.scrollTop = 200;

	42 if (window.testRunner)

	43 testRunner.notifyDone();

	44 });

	45 }

	46

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

	48 window.requestAnimationFrame(function() {

	49 window.requestAnimationFrame(doTest);

	50 })

	51 });

	52 </script>

	53

OLD	NEW