page-and-offset-in-iframe.html (3652B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: page and offset values in iframe</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="viewport_support.js"></script> 13 <style> 14 iframe { 15 width: 200px; 16 height: 300px; 17 border: 0; 18 } 19 </style> 20 </head> 21 <body> 22 <h1>Viewport: Page and offset values in iframe</h1> 23 <h4> 24 Test Description: This test checks for correct visualViewport values in 25 an iframe. 26 </h4> 27 <iframe></iframe> 28 </body> 29 <script> 30 var iframe = frames[0].window; 31 32 // Add overflow to the iframe so it can scroll. 33 iframe.document.body.style.width = "2000px"; 34 iframe.document.body.style.height = "2000px"; 35 iframe.scrollTo(1000, 1200); 36 37 promise_test(async t => { 38 assert_equals(visualViewport.scale, 1, 39 "[PRECONDITION] Start off unzoomed"); 40 assert_equals(visualViewport.offsetLeft, 0, 41 "[PRECONDITION] No offsetLeft to start"); 42 assert_equals(visualViewport.offsetTop, 0, 43 "[PRECONDITION] No offsetTop to start"); 44 45 // The iframe's visual viewport isn't yet offset 46 assert_equals(iframe.visualViewport.offsetLeft, 0, 47 "offsetLeft must be 0"); 48 assert_equals(iframe.visualViewport.offsetTop, 0, 49 "offsetTop must be 0"); 50 51 // However, page values should reflect layout viewport scrolling. 52 assert_equals(iframe.visualViewport.pageLeft, 1000, 53 "pageLeft must reflect location in document."); 54 assert_equals(iframe.visualViewport.pageTop, 1200, 55 "pageTop must reflect location in document."); 56 57 // Zoom in and pan the viewport to ensure the iframe is independent 58 // of the root frame. 59 await pinchZoomIn(); 60 61 // These values are arbitrary since the amount of pinch-zoom caused 62 // by pinchZoomIn will differ but we only care that the iframe's 63 // values aren't changed. 64 assert_greater_than(visualViewport.scale, 1.2, 65 "Pinch zoom must have increased scale"); 66 assert_greater_than(visualViewport.offsetLeft, 10, 67 "Pinch zoom must have offsetLeft visualViewport"); 68 assert_greater_than(visualViewport.offsetTop, 10, 69 "Pinch zoom must have offsetTop visualViewport"); 70 71 // The iframe's visualViewport is independent of the root frame's so 72 // none of the values should have changed. 73 assert_equals(iframe.visualViewport.offsetLeft, 0, 74 "After zooming, offsetLeft must remain 0"); 75 assert_equals(iframe.visualViewport.offsetTop, 0, 76 "After zooming, offsetTop must remain 0"); 77 assert_equals(iframe.visualViewport.pageLeft, 1000, 78 "After zooming, pageLeft must reflect location in document."); 79 assert_equals(iframe.visualViewport.pageTop, 1200, 80 "After zooming, pageTop must reflect location in document."); 81 82 assert_equals(iframe.visualViewport.scale, 1, 83 "Iframe's visualViewport must not be scaled"); 84 }, "VisualViewport page and offset values in iframe"); 85 </script> 86 </html>