third_party/WebKit/LayoutTests/http/tests/intersection-observer/resources/cross-origin-subframe.html - Issue 1780163002: Revert of IntersectionObserver: use an idle callback to send notifications.

Side by Side Diff: third_party/WebKit/LayoutTests/http/tests/intersection-observer/resources/cross-origin-subframe.html

Issue 1780163002: Revert of IntersectionObserver: use an idle callback to send notifications. (Closed) Base URL: https://chromium.googlesource.com/chromium/src@master

Patch Set: Created 4 years, 9 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 | « third_party/WebKit/LayoutTests/http/tests/intersection-observer/iframe-cross-origin.html ('k') | third_party/WebKit/LayoutTests/intersection-observer/README » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <script src="helper-functions.js"></script>	2 <script src="helper-functions.js"></script>

3 <div style="height: 200px; width: 100px;"></div>	3 <div style="height: 200px; width: 100px;"></div>

4 <div id="target" style="background-color: green; width:100px; height:100px"></di v>	4 <div id="target" style="background-color: green; width:100px; height:100px"></di v>

5 <div style="height: 200px; width: 100px;"></div>	5 <div style="height: 200px; width: 100px;"></div>

6 <script>	6 <script>

7 var port;	7 var port;

8 var entries = [];	8 var entries = [];

9 var target = document.getElementById('target');	9 var target = document.getElementById('target');

10 var scroller = document.scrollingElement;	10 var scroller = document.scrollingElement;

11 var nextStep;	11 var nextStep;

12	12

13 // Note that we never use RAF in this code, because this frame might get render- throttled.	13 // Note that we never use RAF in this code, because this frame might get render- throttled.

14 // Instead of RAF-ing, we just post an empty message to the parent window, which will	14 // Instead of RAF-ing, we just post an empty message to the parent window, which will

15 // RAF when it is received, and then send us a message to cause the next step to run.	15 // RAF when it is received, and then send us a message to cause the next step to run.

16	16

	17 function observer_callback(changes) {

	18 for (var i in changes)

	19 entries.push(changes[i]);

	20 }

	21

17 // Use a rootMargin here, and verify it does NOT get applied for the cross-origi n case.	22 // Use a rootMargin here, and verify it does NOT get applied for the cross-origi n case.

18 var observer = new IntersectionObserver(	23 var observer = new IntersectionObserver(observer_callback, {rootMargin: "7px"});

19 changes => { entries = entries.concat(changes) },

20 { rootMargin: "7px" }

21 );

22 observer.observe(target);	24 observer.observe(target);

23	25

24 function step0() {	26 function step0() {

25 entries = entries.concat(observer.takeRecords());	27 setTimeout(function() {

26 nextStep = step1;	28 nextStep = step1;

27 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*");	29 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*");

28 entries = [];	30 entries = [];

29 port.postMessage({scrollTo: 200}, "*");	31 port.postMessage({scrollTo: 200}, "*");

	32 });

30 }	33 }

31	34

32 function step1() {	35 function step1() {

33 entries = entries.concat(observer.takeRecords());	36 setTimeout(function() {

34 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*");	37 port.postMessage({actual: entries.map(entryToJson), expected: []}, "*");

35 entries = [];	38 entries = [];

36 scroller.scrollTop = 250;	39 scroller.scrollTop = 250;

37 nextStep = step2;	40 nextStep = step2;

38 port.postMessage({}, "*");	41 port.postMessage({}, "*");

	42 });

39 }	43 }

40	44

41 function step2() {	45 function step2() {

42 entries = entries.concat(observer.takeRecords());	46 setTimeout(function() {

43 var expected = [{	47 var expected = [{

44 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),	48 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),

45 intersectionRect: coordinatesToClientRectJson(0, 108, 58, 8),	49 intersectionRect: coordinatesToClientRectJson(0, 108, 58, 8),

46 rootBounds: "null",	50 rootBounds: "null",

47 target: target.id	51 target: target.id

48 }];	52 }];

49 port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*");	53 port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*" );

50 entries = [];	54 entries = [];

51 nextStep = step3;	55 nextStep = step3;

52 port.postMessage({scrollTo: 100}, "*");	56 port.postMessage({scrollTo: 100}, "*");

	57 });

53 }	58 }

54	59

55 function step3() {	60 function step3() {

56 entries = entries.concat(observer.takeRecords());	61 setTimeout(function() {

57 var expected = [{	62 var expected = [{

58 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),	63 boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),

59 intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),	64 intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),

60 rootBounds: "null",	65 rootBounds: "null",

61 target: target.id	66 target: target.id

62 }];	67 }];

63 port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*");	68 port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*" );

64 port.postMessage({DONE: 1}, "*");	69 port.postMessage({DONE: 1}, "*");

	70 });

65 }	71 }

66	72

67 function handleMessage(event)	73 function handleMessage(event)

68 {	74 {

69 port = event.source;	75 port = event.source;

70 nextStep();	76 nextStep();

71 }	77 }

72	78

73 nextStep = step0;	79 nextStep = step0;

74 window.addEventListener("message", handleMessage);	80 window.addEventListener("message", handleMessage);

75 </script>	81 </script>

OLD	NEW