Handle use case when canvas size is already controlled by css (#20956)

- implementation is inspired by SDL implementation

Author: ypujante

src/library_glfw.js

@@ -1076,6 +1076,13 @@ var LibraryGLFW = {
       // not valid
       if (width <= 0 || height <= 0) return 0;
 
+      // check whether css is modifying the size
+      const canvas = Module['canvas'];
+      const originalCanvasWidth = canvas.width;
+      const orginalCanvasHeight = canvas.height;
+      canvas.width = 1; canvas.height = 1;
+      GLFW.hasExternalSizing = canvas.clientWidth != 1 || canvas.clientHeight != 1;
+
       if (monitor) {
         Browser.requestFullscreen();
       } else {
@@ -1109,9 +1116,11 @@ var LibraryGLFW = {
       if (!Module.ctx && useWebGL) return 0;
 
       // Get non alive id
-      const canvas = Module['canvas'];
       var win = new GLFW_Window(id, canvas.clientWidth, canvas.clientHeight, canvas.width, canvas.height, title, monitor, share);
 
+      win.originalCanvasWidth = originalCanvasWidth;
+      win.orginalCanvasHeight = orginalCanvasHeight;
+
       // Set window to array
       if (id - 1 == GLFW.windows.length) {
         GLFW.windows.push(win);
@@ -1142,7 +1151,14 @@ var LibraryGLFW = {
       for (var i = 0; i < GLFW.windows.length; i++)
         if (GLFW.windows[i] !== null) return;
 
-      Module.ctx = Browser.destroyContext(Module['canvas'], true, true);
+      const canvas = Module['canvas'];
+      if (!GLFW.hasExternalSizing && typeof canvas.style != 'undefined') {
+        canvas.style.removeProperty('width');
+        canvas.style.removeProperty('height');
+      }
+      Module.ctx = Browser.destroyContext(canvas, true, true);
+      canvas.width = win.originalCanvasWidth;
+      canvas.height = win.orginalCanvasHeight;
     },
 
     swapBuffers: (winid) => {
@@ -1245,13 +1261,13 @@ var LibraryGLFW = {
       const hNativeScaled = Math.floor(hNative * scale);
       if (canvas.width  != wNativeScaled) canvas.width  = wNativeScaled;
       if (canvas.height != hNativeScaled) canvas.height = hNativeScaled;
-      if (typeof canvas.style != 'undefined') {
+      if (!GLFW.hasExternalSizing && typeof canvas.style != 'undefined') {
         if (wNativeScaled != wNative || hNativeScaled != hNative) {
-          canvas.style.setProperty( "width", wNative + "px", "important");
-          canvas.style.setProperty("height", hNative + "px", "important");
+          canvas.style.setProperty( 'width', wNative + 'px', 'important');
+          canvas.style.setProperty('height', hNative + 'px', 'important');
         } else {
-          canvas.style.removeProperty( "width");
-          canvas.style.removeProperty("height");
+          canvas.style.removeProperty('width');
+          canvas.style.removeProperty('height');
         }
       }
     },

test/browser/test_glfw3_hi_dpi_aware.c

@@ -51,6 +51,20 @@ static void checkWindowSize(GLFWwindow *window, int expectedWidth, int expectedH
   assert(fbw == (int) (expectedWidth * ratio) && fbh == (int) (expectedHeight * ratio));
 }
 
+static void checkCanvasSize(int expectedWidth, int expectedHeight) {
+  int w, h;
+  emscripten_get_canvas_element_size("#canvas", &w, &h);
+  printf("canvas size => %d == %d && %d == %d\n", w, expectedWidth, h, expectedHeight);
+  assert(w == expectedWidth && h == expectedHeight);
+}
+
+static void checkCanvasFramebufferSize(int expectedWidth, int expectedHeight) {
+  double fbw, fbh;
+  emscripten_get_element_css_size("#canvas", &fbw, &fbh);
+  printf("canvas framebufferSize => %d == %d && %d == %d\n", (int) fbw, (int) expectedWidth, (int) fbh, expectedHeight);
+  assert((int) fbw == expectedWidth && (int) fbh == expectedHeight);
+}
+
 static bool getGLFWIsHiDPIAware() {
   return EM_ASM_INT(return GLFW.isHiDPIAware() ? 1 : 0) != 0;
 }
@@ -75,13 +89,17 @@ int main() {
   // Expected outcome is window size and frame buffer size are the same
   {
     printf("Use case #1\n");
+    checkCanvasSize(300, 150); // 300x150 is the default canvas size
+    checkCanvasFramebufferSize(300, 150);
     window = glfwCreateWindow(640, 480, "test_glfw3_hi_dpi_aware.c | #1", NULL, NULL);
     assert(window != NULL);
     checkHiDPIAware(window, false);
     checkWindowSize(window, 640, 480, 1.0);
     glfwSetWindowSize(window, 600, 400);
     checkWindowSize(window, 600, 400, 1.0);
     glfwDestroyWindow(window);
+    checkCanvasSize(300, 150); // we make sure that the glfw code resets the canvas how it was
+    checkCanvasFramebufferSize(300, 150);
   }
 
   // Use case 2: GLFW is NOT Hi DPI Aware | devicePixelRatio is 2.0
@@ -174,6 +192,24 @@ int main() {
     glfwDestroyWindow(window);
   }
 
+  // Use case 8: GLFW is Hi DPI Aware | devicePixelRatio is 2.0 | canvas has css override
+  // Expected outcome is that the framebuffer size is adjusted according to the canvas size
+  {
+    printf("Use case #8\n");
+    setDevicePixelRatio(2.0);
+    glfwWindowHint(GLFW_SCALE_TO_MONITOR, GLFW_TRUE);
+    emscripten_set_element_css_size("#canvas", 700, 525);
+    checkCanvasSize(300, 150); // default canvas size
+    checkCanvasFramebufferSize(700, 525); // css override
+    window = glfwCreateWindow(640, 480, "test_glfw3_hi_dpi_aware.c | #8", NULL, NULL);
+    assert(window != NULL);
+    checkHiDPIAware(window, true);
+    checkWindowSize(window, 700, 525, 2.0); // canvas size overrides window size
+    glfwDestroyWindow(window);
+    checkCanvasSize(300, 150);
+    checkCanvasFramebufferSize(700, 525);
+  }
+
   glfwTerminate();
 
   return 0;