resize example tweaks

greggman · greggman · commit ae27ebe34969 · 2021-09-24T09:38:54.000-07:00
diff --git a/webgl/webgl-resize-the-canvas-comparison-fullwindow.html b/webgl/webgl-resize-the-canvas-comparison-fullwindow.html
@@ -148,13 +148,15 @@
     let width;
     let height;
     let dpr = window.devicePixelRatio;
+    let dprSupport = false;
     if (entry.devicePixelContentBoxSize) {
       // NOTE: Only this path gives the correct answer
       // The other paths are an imperfect fallback
       // for browsers that don't provide anyway to do this
       width = entry.devicePixelContentBoxSize[0].inlineSize;
       height = entry.devicePixelContentBoxSize[0].blockSize;
       dpr = 1; // it's already in width and height
+      dprSupport = true;
     } else if (entry.contentBoxSize) {
       if (entry.contentBoxSize[0]) {
         width = entry.contentBoxSize[0].inlineSize;
@@ -173,12 +175,14 @@
     const displayHeight = Math.round(height * dpr);
     canvasToDisplaySizeMap.set(entry.target, [displayWidth, displayHeight]);
     resizeAndDraw();
+    if (!dprSupport) {
+      document.querySelector('#warning').style.display = '';
+    }
   }
 }
 
 const resizeObserver = new ResizeObserver(onResize);
 resizeObserver.observe(canvas, {box: 'content-box'});
-document.querySelector('#warning').style.display = '';
 </script>
 </html>
 
diff --git a/webgl/webgl-resize-the-canvas-comparison.html b/webgl/webgl-resize-the-canvas-comparison.html
@@ -19,6 +19,10 @@
      height: 100px;
      display: block;
    }
+   .bad {
+     color: red;
+     font-weight: bold;
+   }
 </style>
 </head>
 <body>
@@ -27,7 +31,7 @@
   <canvas id="use-clientWidth"></canvas>
   <div>using round(getBoundingClientRect().width * devicePixelRatio)</div>
   <canvas id="use-getBoundingClientRect"></canvas>
-  <div>using ResizeObserver</div>
+  <div>using ResizeObserver (<span id="dpr-support"></span>)</div>
   <canvas id="use-ResizeObserver"></canvas>
   <div id="warning" style="color: red; display: none">(warning: no support for device-pixel-content-box)</div>
 </div>
@@ -89,6 +93,7 @@
 
 setupCanvas(document.querySelector('#use-ResizeObserver'), (canvas, drawFn) => {
   const canvasToDisplaySizeMap = new Map([[canvas, [300, 150]]]);
+  const dprSupportElem = document.querySelector('#dpr-support');
 
   const resizeAndDraw = () => {
     const [displayWidth, displayHeight] = canvasToDisplaySizeMap.get(canvas);
@@ -100,13 +105,15 @@
       let width;
       let height;
       let dpr = window.devicePixelRatio;
+      let dprSupport = false;
       if (entry.devicePixelContentBoxSize) {
         // NOTE: Only this path gives the correct answer
         // The other paths are an imperfect fallback
         // for browsers that don't provide anyway to do this
         width = entry.devicePixelContentBoxSize[0].inlineSize;
         height = entry.devicePixelContentBoxSize[0].blockSize;
         dpr = 1; // it's already in width and height
+        dprSupport = true;
       } else if (entry.contentBoxSize) {
         if (entry.contentBoxSize[0]) {
           width = entry.contentBoxSize[0].inlineSize;
@@ -125,6 +132,8 @@
       const displayHeight = Math.round(height * dpr);
       canvasToDisplaySizeMap.set(entry.target, [displayWidth, displayHeight]);
       resizeAndDraw();
+      dprSupportElem.textContent = dprSupport ? "dpr supported 😀" : "dpr not supported 😢";
+      dprSupportElem.classList.toggle('bad', !dprSupport);
     }
   }
 
