LayoutTests/intersection-observer/intersection-clipped-to-target.html - WebKit - Git at Google

 <!DOCTYPE html>
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 <style>
 #container {
     width: 100%;
     transform: translateZ(0);
     overflow: hidden;
 }

 #target {
     margin-top: 0.66px;
     height: 40px;
     background-color: green;
 }
 </style>

 <div id="container">
     <div id="target"></div>
 </div>

 <script>
     async_test((t) =>  {
         let observer = new IntersectionObserver(t.step_func_done((entries) => {
             assert_true(entries[0].isIntersecting, "isIntersecting");
             assert_equals(entries[0].intersectionRatio, 1, "intersectionRatio");
             assert_equals(entries[0].intersectionRect.height, entries[0].boundingClientRect.height, "intersectionRect.height");
         }));
         observer.observe(document.getElementById("target"));
     }, "IntersectionObserverEntry's intersection rect is not larger than the target rect");
 </script>
	<!DOCTYPE html>
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>
	<style>
	#container {
	width: 100%;
	transform: translateZ(0);
	overflow: hidden;
	}

	#target {
	margin-top: 0.66px;
	height: 40px;
	background-color: green;
	}
	</style>

	<div id="container">
	<div id="target"></div>
	</div>

	<script>
	async_test((t) => {
	let observer = new IntersectionObserver(t.step_func_done((entries) => {
	assert_true(entries[0].isIntersecting, "isIntersecting");
	assert_equals(entries[0].intersectionRatio, 1, "intersectionRatio");
	assert_equals(entries[0].intersectionRect.height, entries[0].boundingClientRect.height, "intersectionRect.height");
	}));
	observer.observe(document.getElementById("target"));
	}, "IntersectionObserverEntry's intersection rect is not larger than the target rect");
	</script>