third_party/WebKit/LayoutTests/intersection-observer/multiple-thresholds.html - Issue 1449623002: IntersectionObserver: second cut.

Side by Side Diff: third_party/WebKit/LayoutTests/intersection-observer/multiple-thresholds.html

Issue 1449623002: IntersectionObserver: second cut. (Closed) Base URL: https://chromium.googlesource.com/chromium/src@master

Patch Set: Fix rootMargin parsing Created 5 years 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/intersection-observer/iframe-root-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/multiple-thresholds-expected.txt » ('j') | third_party/WebKit/Source/core/dom/Document.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <div style="width:100%;height:700px;"></div>

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

	4 <div style="width:100%; height:700px;"></div>

	5

	6 <script src="../resources/js-test.js"></script>

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

	8 <script>

	9 description("Intersection observer test with multiple thresholds.");

	10 var target = document.getElementById("target");

	11 var entries = [];

	12

	13 observer_callback = function(changes) {

	14 for (var i in changes)

	15 entries.push(changes[i]);

	16 };

	17 var observer = new IntersectionObserver(observer_callback, {

	18 threshold: [0, 0.25, 0.5, 0.75]

	19 });

	20 observer.observe(target);

	21

	22 // TODO: It shouldn't be necessary to RAF after the call to observer()

	23 // and before changing the scroll position, but it is.

	24

	25 var expected0 = [];

	26 function step0() {

	27 setTimeout(function() {

	28 checkResults(expected0, "entries");

	29 document.scrollingElement.scrollTop = 120;

	30 requestAnimationFrame(step1);

	31 });

	32 }

	33

	34 var expected1 = [

	35 {

	36 'boundingClientRect': [ 8, 108, 588, 688 ],

	37 'intersectionRect': [ 8, 108, 588, 600 ],

	38 'rootBounds' : [ 0, 785, 0, 600 ],

	39 'target': target

	40 },

	41 ];

	42 function step1() {

	43 setTimeout(function() {

	44 checkResults(expected1, "entries");

	45 document.scrollingElement.scrollTop = 160;

	46 requestAnimationFrame(step2);

	47 });

	48 }

	49

	50 var expected2 = expected1.concat([

	51 {

	52 'boundingClientRect': [ 8, 108, 548, 648 ],

	53 'intersectionRect': [ 8, 108, 548, 600 ],

	54 'rootBounds' : [ 0, 785, 0, 600 ],

	55 'target': target

	56 }

	57 ]);

	58 function step2() {

	59 setTimeout(function() {

	60 checkResults(expected2, "entries", 1);

	61 document.scrollingElement.scrollTop = 200;

	62 requestAnimationFrame(step3);

	63 });

	64 }

	65

	66 var expected3 = expected2.concat([

	67 {

	68 'boundingClientRect': [ 8, 108, 508, 608 ],

	69 'intersectionRect': [ 8, 108, 508, 600 ],

	70 'rootBounds' : [ 0, 785, 0, 600 ],

	71 'target': target

	72 }

	73 ]);

	74 function step3() {

	75 setTimeout(function() {

	76 checkResults(expected3, "entries", 2);

	77 document.scrollingElement.scrollTop = 240;

	78 requestAnimationFrame(step4);

	79 });

	80 }

	81

	82 var expected4 = expected3;

	83 function step4() {

	84 setTimeout(function() {

	85 checkResults(expected4, "entries", 3);

	86 document.scrollingElement.scrollTop = 740;

	87 requestAnimationFrame(step5);

	88 });

	89 }

	90

	91 var expected5 = expected4.concat([

	92 {

	93 'boundingClientRect': [ 8, 108, -32, 68 ],

	94 'intersectionRect': [ 8, 108, 0, 68 ],

	95 'rootBounds' : [ 0, 785, 0, 600 ],

	96 'target': target

	97 }

	98 ]);

	99 function step5() {

	100 setTimeout(function() {

	101 checkResults(expected5, "entries", 3);

	102 document.scrollingElement.scrollTop = 760;

	103 requestAnimationFrame(step6);

	104 });

	105 }

	106

	107 var expected6 = expected5.concat([

	108 {

	109 'boundingClientRect': [ 8, 108, -52, 48 ],

	110 'intersectionRect': [ 8, 108, 0, 48 ],

	111 'rootBounds' : [ 0, 785, 0, 600 ],

	112 'target': target

	113 }

	114 ]);

	115 function step6() {

	116 setTimeout(function() {

	117 checkResults(expected6, "entries", 4);

	118 document.scrollingElement.scrollTop = 800;

	119 requestAnimationFrame(step7);

	120 });

	121 }

	122

	123 var expected7 = expected6.concat([

	124 {

	125 'boundingClientRect': [ 8, 108, -92, 8 ],

	126 'intersectionRect': [ 8, 108, 0, 8 ],

	127 'rootBounds' : [ 0, 785, 0, 600 ],

	128 'target': target

	129 }

	130 ]);

	131 function step7() {

	132 setTimeout(function() {

	133 checkResults(expected7, "entries", 5);

	134 document.scrollingElement.scrollTop = 820;

	135 requestAnimationFrame(step8);

	136 });

	137 }

	138

	139 var expected8 = expected7.concat([

	140 {

	141 'boundingClientRect': [ 8, 108, -112, -12 ],

	142 'intersectionRect': [ 0, 0, 0, 0 ],

	143 'rootBounds' : [ 0, 785, 0, 600 ],

	144 'target': target

	145 }

	146 ]);

	147 function step8() {

	148 setTimeout(function() {

	149 checkResults(expected8, "entries", 6);

	150 finishTest();

	151 document.scrollingElement.scrollTop = 0;

	152 });

	153 }

	154 requestAnimationFrame(step0);

	155 </script>

OLD	NEW