viewport-scale-iframe-manual.html (2646B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Scale iframe</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, minimum-scale=1"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="viewport_support.js"></script> 10 <script> 11 setup({explicit_done: true, explicit_timeout: true}); 12 </script> 13 <style> 14 iframe { 15 width: 200px; 16 height: 200px; 17 } 18 </style> 19 </head> 20 <body> 21 <h1>Viewport: Scale iframe</h1> 22 <h4>Test Description: Tests the visualViewport.scale property inside an iframe</h4> 23 <h2 style="color: red">THIS IS A MANUAL TEST</h2> 24 <p id="skip"> 25 <button id="skipbtn" onclick="skipManualTest();">Skip Test</button> 26 </p> 27 <p id="instruction"></p> 28 <button id="continue">Start Test</button> 29 <p> 30 <iframe srcdoc="<!DOCTYPE html><style>html {background-color: coral;}</style>"></iframe> 31 </p> 32 <div id="log"></div> 33 </body> 34 <script> 35 var continueBtn = document.getElementById("continue"); 36 37 function continueTest() { 38 nextStep(function(instructionText) { 39 var instruction = document.getElementById("instruction"); 40 continueBtn.innerText = "Continue"; 41 instruction.innerText = instructionText; 42 }); 43 } 44 45 continueBtn.addEventListener('click', continueTest); 46 47 addManualTestStep( 48 function() {}, 49 null, 50 '1. Ensure the browser is at the default pinch and browser zoom ' + 51 'levels (100%). Most browsers: ctrl+0'); 52 53 addManualTestStep( 54 showPinchWidget.bind(null, 2.0, 0, 0, continueTest), 55 null, 56 '2.Follow instructions on pinch zoom dialog.'); 57 58 addManualTestStep( 59 function() { 60 // Ensure we zoomed in to about what we expect. 61 assert_approx_equals(window.visualViewport.scale, 2.0, 0.2, 62 "Main window.visualViewport.scale reflects pinch-zoom level"); 63 64 assert_equals(frames[0].window.visualViewport.scale, 1.0, 65 "Iframe scale unchanged even when pinch-zoomed"); 66 }, 67 'Check iframe scale is unchanged when page is pinch-zoomed', 68 '3. Pinch-zoom back out to the minimum scale'); 69 70 addManualTestStep( 71 function() { 72 continueBtn.remove(); 73 }, 74 null, 75 'Test Complete'); 76 </script> 77 </html>