third_party/WebKit/LayoutTests/intersection-observer/edge.html - Issue 1826323002: IntersectionObserver: use edge-inclusive geometry for intersections.

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

Issue 1826323002: IntersectionObserver: use edge-inclusive geometry for intersections. (Closed) Base URL: https://chromium.googlesource.com/chromium/src@intersection-observer-inclusive-geometry

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 | « no previous file | third_party/WebKit/LayoutTests/intersection-observer/edge-expected.txt » ('j') | third_party/WebKit/LayoutTests/intersection-observer/same-document-zero-size-target.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>
	chrishtr 2016/03/24 21:49:12 edge.html is not such a great name. edge-inclusive edge.html is not such a great name. edge-inclusive-intersection.html ? szager1 2016/03/24 23:14:08 Done. Show quoted text On 2016/03/24 21:49:12, chrishtr wrote: > edge.html is not such a great name. edge-inclusive-intersection.html ? Done.
	2 <script src="../resources/js-test.js"></script>

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

	4 <style>

	5 #root {

	6 width: 200px;

	7 height: 200px;

	8 overflow: visible;

	9 }

	10 #target {

	11 background-color: green;

	12 }

	13 </style>

	14 <div id="root">

	15 <div id="target" style="width: 100px; height: 100px; transform: translateY(250 px)"></div>

	16 </div>

	17

	18 <script>

	19 description("Verifies that IntersectionObserver detects edge-inclusive intersect ions.");

	20 var root = document.getElementById('root');

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

	22 var entries = [];

	23 var observer = new IntersectionObserver(

	24 changes => { entries.push(...changes) },

	25 { root: root }

	26 );

	27

	28 onload = function() {

	29 observer.observe(target);

	30 entries.push(...observer.takeRecords());

	31 shouldBeEqualToNumber("entries.length", 0);

	32 requestAnimationFrame(() => { requestAnimationFrame(step0) });

	33 };

	34

	35 function step0() {

	36 entries.push(...observer.takeRecords());

	37 shouldBeEqualToNumber("entries.length", 0);

	38 target.style.transform = "translateY(200px)";

	39 requestAnimationFrame(step1);

	40 }

	41

	42 function step1() {

	43 entries.push(...observer.takeRecords());

	44 shouldBeEqualToNumber("entries.length", 1);

	45 if (entries.length > 0) {

	46 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8);

	47 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108);

	48 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 208);

	49 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 308);

	50 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8);

	51 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108);

	52 shouldBeEqualToNumber("entries[0].intersectionRect.top", 208);

	53 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 208);

	54 shouldBeEqualToNumber("entries[0].rootBounds.left", 8);

	55 shouldBeEqualToNumber("entries[0].rootBounds.right", 208);

	56 shouldBeEqualToNumber("entries[0].rootBounds.top", 8);

	57 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 208);

	58 shouldEvaluateToSameObject("entries[0].target", target);

	59 }

	60 target.style.transform = "translateY(201px)";

	61 requestAnimationFrame(step2);

	62 }

	63

	64 function step2() {

	65 entries.push(...observer.takeRecords());

	66 shouldBeEqualToNumber("entries.length", 2);

	67 target.style.height = "0px";

	68 target.style.width = "300px";

	69 target.style.transform = "translateY(185px)";

	70 requestAnimationFrame(step3);

	71 }

	72

	73 function step3() {

	74 entries.push(...observer.takeRecords());

	75 shouldBeEqualToNumber("entries.length", 3);

	76 if (entries.length > 2) {

	77 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8);

	78 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 308);

	79 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 193);

	80 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 193);

	81 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8);

	82 shouldBeEqualToNumber("entries[2].intersectionRect.right", 208);

	83 shouldBeEqualToNumber("entries[2].intersectionRect.top", 193);

	84 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 193);

	85 shouldBeEqualToNumber("entries[2].rootBounds.left", 8);

	86 shouldBeEqualToNumber("entries[2].rootBounds.right", 208);

	87 shouldBeEqualToNumber("entries[2].rootBounds.top", 8);

	88 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 208);

	89 shouldEvaluateToSameObject("entries[2].target", target);

	90 }

	91 finishJSTest();

	92 }

	93 </script>

OLD	NEW