dom/events/test/test_event_screenXY_with_zoom.html

   1 <!doctype html>
   2 <meta charset="utf-8">
   3 <title>Event.screenX/Y on a zoomed page.</title>
   4 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   5 <script src="/tests/SimpleTest/EventUtils.js"></script>
   6 <style>
   7   #target {
   8     width: 100px;
   9     height: 100px;
  10     background-color: blue;
  11     /* We want synthesizeMouseAtCenter to click on the same point regardless of
  12        zoom, so we achieve that by centering the target in our viewport */
  13     position: absolute;
  14     top: 0;
  15     left: 0;
  16     right: 0;
  17     bottom: 0;
  18     margin: auto;
  19   }
  20 </style>
  21 <div id="target" style=""></div>
  22 <script>
  23 const target = document.getElementById("target");
  24 async function getScreenPositionOfTarget() {
  25   return new Promise(resolve => {
  26     target.addEventListener("click", function(e) {
  27       resolve({ x: e.screenX, y: e.screenY });
  28     }, { once: true });
  29     synthesizeMouseAtCenter(target, {});
  30   });
  31 }
  32
  33 function getScreen() {
  34   return {
  35     width: screen.width,
  36     height: screen.height,
  37     top: screen.top,
  38     left: screen.left,
  39   };
  40 }
  41
  42 add_task(async () => {
  43   let pos = await getScreenPositionOfTarget();
  44   let s = getScreen();
  45
  46   SpecialPowers.setFullZoom(window, 2);
  47   let zoomedPos = await getScreenPositionOfTarget();
  48   let zoomedScreen = getScreen();
  49
  50   info(`Original pos=${JSON.stringify(pos)} s=${JSON.stringify(s)}`);
  51   info(`Zoomed pos=${JSON.stringify(zoomedPos)} s=${JSON.stringify(zoomedScreen)}`);
  52
  53   isfuzzy(pos.x, zoomedPos.x * 2, 1, "screenX coordinate");
  54   isfuzzy(pos.y, zoomedPos.y * 2, 1, "screenY coordinate");
  55
  56   isfuzzy(s.top, zoomedScreen.top * 2, 1, "Screen.top");
  57   isfuzzy(s.left, zoomedScreen.left * 2, 1, "Screen.left");
  58   isfuzzy(s.width, zoomedScreen.width * 2, 1, "Screen.width");
  59   isfuzzy(s.height, zoomedScreen.height * 2, 1, "Screen.height");
  60
  61   SpecialPowers.setFullZoom(window, 1);
  62 });
  63 </script>