intersection-observer.https.html (1699B)
1 <!DOCTYPE html> 2 <title>Test Intersection Observer in fenced frame</title> 3 <script src="/common/rendering-utils.js"></script> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/common/utils.js"></script> 7 <script src="resources/utils.js"></script> 8 <script src="/common/utils.js"></script> 9 <style> 10 fencedframe { 11 width: 100px; 12 height: 100px; 13 position: fixed; 14 top: 0px; 15 left: 0px; 16 border: unset; 17 } 18 </style> 19 20 <body> 21 <script> 22 promise_test(async (t) => { 23 // first entry after observe. 24 const io_entry_on_registration = token(); 25 // entry after transform. 26 const io_entry_on_transform = token(); 27 // entry with clip. 28 const io_entry_on_clip = token(); 29 30 const frame = attachFencedFrame(generateURL( 31 "resources/frame-with-intersection-observer.html", 32 [io_entry_on_registration, io_entry_on_transform, io_entry_on_clip])); 33 34 let result = await nextValueFromServer(io_entry_on_registration); 35 assert_equals(result, "0,0,100,100,true", 36 "Subscribing to IO dispatches a notification"); 37 38 // Apply a transform to the fencedframe and ensure it gets applied to the 39 // intersectionRect. 40 frame.style.transform = 'translate(-10px, -20px)'; 41 result = await nextValueFromServer(io_entry_on_transform); 42 assert_equals(result, "10,20,90,80,true", 43 "Transform applies to intersection rect"); 44 45 // Now add a clip to the fencedframe which should clip the intersectionRect. 46 frame.style.clipPath = 'inset(10px)'; 47 result = await nextValueFromServer(io_entry_on_clip); 48 assert_equals(result, "10,20,80,70,false", "Clip applies to intersection rect"); 49 }, 'Intersection Observer Test'); 50 51 </script> 52 </body> 53 </html>