From 5bb1f8e3fc503f981893ea57ccaddf4360376691 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Thu, 9 Jan 2025 21:11:45 -0800
Subject: [PATCH] keep info onscreen

---
 .../dpr-zoom-test-with-visualviewport.html            | 11 ++++++++++-
 1 file changed, 10 insertions(+), 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
index db22e99..abede23 100644
--- 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' });