LayoutTests/intersection-observer/root-margin-with-zoom.html - WebKit - Git at Google

 <!DOCTYPE html>
 <link rel="help" href="https://www.w3.org/TR/intersection-observer/#intersection-observer-interface">
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 <style>
 #target {
     position: absolute;
     height: 40px;
     width: 100px;
     top: -40px;
     background-color: green;
 }
 </style>


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

 <script>
     // The target is positioned 40 px above the viewport so should fully intersect
     // when the viewport is expanded by a root margin of 40 px, no matter what
     // page zoom factor is used, since page zoom should equally affect both the
     // positioning of the target and the size of the root margin.
     window.internals.setPageZoomFactor(2);
     async_test((t) =>  {
         let options = {
             rootMargin: '40px 0px 0px 0px',
             threshold: [1]
         }
         let observer = new IntersectionObserver(t.step_func_done((entries) => {
             assert_true(entries[0].isIntersecting, "isIntersecting");
         }), options);
         observer.observe(document.getElementById("target"));
     }, "IntersectionObserver's root margin accounts for zooming");
 </script>
	<!DOCTYPE html>
	<link rel="help" href="https://www.w3.org/TR/intersection-observer/#intersection-observer-interface">
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>
	<style>
	#target {
	position: absolute;
	height: 40px;
	width: 100px;
	top: -40px;
	background-color: green;
	}
	</style>


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

	<script>
	// The target is positioned 40 px above the viewport so should fully intersect
	// when the viewport is expanded by a root margin of 40 px, no matter what
	// page zoom factor is used, since page zoom should equally affect both the
	// positioning of the target and the size of the root margin.
	window.internals.setPageZoomFactor(2);
	async_test((t) => {
	let options = {
	rootMargin: '40px 0px 0px 0px',
	threshold: [1]
	}
	let observer = new IntersectionObserver(t.step_func_done((entries) => {
	assert_true(entries[0].isIntersecting, "isIntersecting");
	}), options);
	observer.observe(document.getElementById("target"));
	}, "IntersectionObserver's root margin accounts for zooming");
	</script>