keep info onscreen

greggman · Jan 10, 2025 · 5bb1f8e · 5bb1f8e
1 parent eea98b9
commit 5bb1f8e
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/test/devicepixelcontentbox-with-visualviewport-scale/dpr-zoom-test-with-visualviewport.html b/test/devicepixelcontentbox-with-visualviewport-scale/dpr-zoom-test-with-visualviewport.html
@@ -56,6 +56,7 @@
 import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';
 
 const info = document.querySelector('#info');
+const ui = document.querySelector('#ui');
 
 const canvas = document.querySelector('canvas');
 const gl = canvas.getContext('webgl2', {antialias: false});
@@ -105,9 +106,16 @@
          renderCount: ${++renderCount}
     devicePixelRatio: ${devicePixelRatio}
          canvas size: ${canvas.width}x${canvas.height}
-visualViewport.scale: ${visualViewport.scale}
+ visualViewport.scale: ${visualViewport.scale}
+visualViewport.offset: ${visualViewport.offsetLeft}, ${visualViewport.offsetTop}
+  visualViewport.page: ${visualViewport.pageLeft}, ${visualViewport.pageTop}
+  visualViewport.size: ${visualViewport.width}, ${visualViewport.height}
 `;
 
+  ui.style.left = `${visualViewport.offsetLeft * visualViewport.scale}px`;
+  ui.style.top = `${visualViewport.offsetTop * visualViewport.scale}px`;
+  ui.style.zoom = `${1 / visualViewport.scale}`;
+
   gl.clearColor(0,1,1,1);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
@@ -128,6 +136,7 @@
 });
 
 visualViewport.addEventListener('resize', render);
+visualViewport.addEventListener('scroll', render);
 
 try {
   observer.observe(canvas, { box: 'device-pixel-content-box' });