testing/web-platform/tests/visual-viewport/viewport-scale-manual.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <title>Viewport: Scale</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     </head>
  14     <body>
  15     <h1>Viewport: Scale</h1>
  16     <h4>Test Description: Tests the visualViewport.scale property</h4>
  17     <h2 style="color: red">THIS IS A MANUAL TEST</h2>
  18     <p id="skip">
  19         <button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
  20     </p>
  21     <p id="instruction"></p>
  22     <button id="continue">Start Test</button>
  23     <div id="log"></div>
  24     <div id="spacer"></div>
  25     </body>
  26     <script>
  27         var continueBtn = document.getElementById("continue");
  28
  29         function continueTest() {
  30           nextStep(function(instructionText) {
  31             var instruction = document.getElementById("instruction");
  32             continueBtn.innerText = "Continue";
  33             instruction.innerText = instructionText;
  34           });
  35         }
  36
  37         continueBtn.addEventListener('click', continueTest);
  38
  39         addManualTestStep(
  40             function() {},
  41             null,
  42             '1. Ensure the browser is at the default pinch and browser zoom ' +
  43             'levels (100%). Most browsers: ctrl+0');
  44
  45         addManualTestStep(
  46             showPinchWidget.bind(null, 2.0, 0, 0, continueTest),
  47             null,
  48             '2.Follow instructions on pinch zoom dialog.');
  49
  50         addManualTestStep(
  51             function() {
  52                 // Ensure we zoomed in to about what we expect.
  53                 assert_approx_equals(window.visualViewport.scale, 2.0, 0.2,
  54                     "window.visualViewport.scale reflects pinch-zoom level");
  55             },
  56             'With ~200% pinch-zoom',
  57             '3. Pinch-zoom back out to the minimum scale');
  58
  59         addManualTestStep(
  60             function() {
  61                 assert_equals(window.visualViewport.scale, 1);
  62             },
  63             'Fully pinch-zoomed out',
  64             '4. If your browser supports it, browser-zoom in (using ctrl-+). ' +
  65             'Otherwise just click continue.');
  66
  67         addManualTestStep(
  68             function() {
  69                 assert_equals(window.visualViewport.scale, 1);
  70             },
  71             'Browser zoom doesn\'t change visualViewport.scale',
  72             '5. Reset browser zoom to default (ctrl-0)');
  73
  74         addManualTestStep(
  75             function() {
  76                 continueBtn.remove();
  77             },
  78             null,
  79             'Test Complete');
  80     </script>
  81 </html>