| <!DOCTYPE html> |
| <title>Test Intersection Observer in fenced frame</title> |
| <script src="/common/rendering-utils.js"></script> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/common/utils.js"></script> |
| <script src="resources/utils.js"></script> |
| <script src="/common/utils.js"></script> |
| <style> |
| fencedframe { |
| width: 100px; |
| height: 100px; |
| position: fixed; |
| top: 0px; |
| left: 0px; |
| border: unset; |
| } |
| </style> |
| |
| <body> |
| <script> |
| promise_test(async (t) => { |
| // first entry after observe. |
| const io_entry_on_registration = token(); |
| // entry after transform. |
| const io_entry_on_transform = token(); |
| // entry with clip. |
| const io_entry_on_clip = token(); |
| |
| const frame = attachFencedFrame(generateURL( |
| "resources/frame-with-intersection-observer.html", |
| [io_entry_on_registration, io_entry_on_transform, io_entry_on_clip])); |
| |
| let result = await nextValueFromServer(io_entry_on_registration); |
| assert_equals(result, "0,0,100,100,true", |
| "Subscribing to IO dispatches a notification"); |
| |
| // Apply a transform to the fencedframe and ensure it gets applied to the |
| // intersectionRect. |
| frame.style.transform = 'translate(-10px, -20px)'; |
| result = await nextValueFromServer(io_entry_on_transform); |
| assert_equals(result, "10,20,90,80,true", |
| "Transform applies to intersection rect"); |
| |
| // Now add a clip to the fencedframe which should clip the intersectionRect. |
| frame.style.clipPath = 'inset(10px)'; |
| result = await nextValueFromServer(io_entry_on_clip); |
| assert_equals(result, "10,20,80,70,false", "Clip applies to intersection rect"); |
| }, 'Intersection Observer Test'); |
| |
| </script> |
| </body> |
| </html> |