visual-viewport.https.html (3136B)
1 <!DOCTYPE html> 2 <title>Test visualViewport inside a fenced frame.</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="/resources/testdriver.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/common/utils.js"></script> 9 <script src="/common/dispatcher/dispatcher.js"></script> 10 <script src="resources/utils.js"></script> 11 12 <body> 13 <script> 14 function pinch_zoom_in() { 15 return new test_driver.Actions() 16 .setContext(window) 17 .addPointer("finger1", "touch") 18 .addPointer("finger2", "touch") 19 .pointerMove(400, 250, {origin: "viewport", sourceName: "finger1"}) 20 .pointerMove(400, 350, {origin: "viewport", sourceName: "finger2"}) 21 .pointerDown({sourceName: "finger1"}) 22 .pointerDown({sourceName: "finger2"}) 23 .pointerMove(400, 200, {origin: "viewport", sourceName: "finger1"}) 24 .pointerMove(400, 400, {origin: "viewport", sourceName: "finger2"}) 25 .pointerUp({sourceName: "finger1"}) 26 .pointerUp({sourceName: "finger2"}) 27 .send(); 28 } 29 30 promise_test(async () => { 31 // Create a fenced frame, and use the same target name inside of it. 32 const frame = attachFencedFrameContext({html: ` 33 <!DOCTYPE html> 34 <style> 35 body { 36 /* Make fenced frame scrollable */ 37 width: 200vw; 38 height: 200vh; 39 } 40 41 ::-webkit-scrollbar { 42 display: none; 43 } 44 </style>`}); 45 46 const is_mac = navigator.platform.indexOf('Mac') == 0; 47 48 // Mac doesn't support pinch zooming via test driver so just avoid trying. 49 if (!is_mac) { 50 await pinch_zoom_in(); 51 52 // Run the test zoomed in to ensure the fenced frame doesn't incorrectly 53 // bring values in from its embedder. 54 assert_greater_than(window.visualViewport.scale, 1, 55 '[PRECONDITION] outer window pinch-zoomed in'); 56 } 57 58 await frame.execute(async (width, height) => { 59 window.scrollTo(30, 40); 60 assert_equals(window.scrollX, 30, '[PRECONDITION] document scrolled x'); 61 assert_equals(window.scrollY, 40, '[PRECONDITION] document scrolled y'); 62 63 assert_equals(window.visualViewport.width, width, 64 'visualViewport.width matches fencedframe width'); 65 assert_equals(window.visualViewport.height, height, 66 'visualViewport.height matches fencedframe height'); 67 assert_equals(window.visualViewport.scale, 1, 68 'visualViewport.scale is 1'); 69 assert_equals(window.visualViewport.offsetLeft, 0, 70 'visualViewport.offsetLeft is 0'); 71 assert_equals(window.visualViewport.offsetTop, 0, 72 'visualViewport.offsetTop is 0'); 73 assert_equals(window.visualViewport.pageLeft, window.scrollX, 74 'visualViewport.pageLeft reflects only window scroll offset'); 75 assert_equals(window.visualViewport.pageTop, window.scrollY, 76 'visualViewport.pageTop reflects only window scroll offset'); 77 }, [frame.clientWidth, frame.clientHeight]); 78 79 }, 'visualViewport values inside fenced frame'); 80 81 </script> 82 </body>