added test for the CSS scaling feature

Author: ypujante

src/library_glfw.js

@@ -1113,14 +1113,7 @@ var LibraryGLFW = {
       // Get non alive id
       const canvas = Module['canvas'];
 
-      var clientWidth = canvas.clientWidth;
-      var clientHeight = canvas.clientHeight;
-      if (GLFW.isCSSScalingEnabled()) {
-        clientWidth = width;
-        clientHeight = height;
-      }
-
-      var win = new GLFW_Window(id, clientWidth, clientHeight, canvas.width, canvas.height, title, monitor, share);
+      var win = new GLFW_Window(id, width, height, canvas.width, canvas.height, title, monitor, share);
 
       // Set window to array
       if (id - 1 == GLFW.windows.length) {
@@ -1331,14 +1324,7 @@ var LibraryGLFW = {
 
     adjustCanvasDimensions() {
       if (GLFW.active) {
-        const canvas = Module['canvas'];
-        var clientWidth = canvas.clientWidth;
-        var clientHeight = canvas.clientHeight;
-        if (GLFW.isCSSScalingEnabled()) {
-          clientWidth = GLFW.active.width;
-          clientHeight = GLFW.active.height;
-        }
-        Browser.updateCanvasDimensions(canvas, clientWidth, clientHeight);
+        Browser.updateCanvasDimensions(Module['canvas'], GLFW.active.width, GLFW.active.height);
         Browser.updateResizeListeners();
       }
     },

test/browser/test_glfw3_css_scaling.c

@@ -0,0 +1,119 @@
+/*
+ * Copyright 2024 The Emscripten Authors.  All rights reserved.
+ * Emscripten is available under two separate licenses, the MIT license and the
+ * University of Illinois/NCSA Open Source License.  Both these licenses can be
+ * found in the LICENSE file.
+ */
+
+#include <GLFW/glfw3.h>
+#include <assert.h>
+#include <emscripten/html5.h>
+#include <stdio.h>
+
+/*
+ * History:
+ * - This test was added after the issue #22847 was reported (November 2024).
+ * - For historical reasons, the JavaScript GLFW implementation includes a feature: the ability to scale the canvas via CSS.
+ * - Note that this feature is not part of GLFW as GLFW does not offer any API to scale the window.
+ * - Being undocumented/untested, this feature was accidentally removed when HiDPI support was added (in 3.1.51 / December 2023).
+ * - This test was added to document this feature and ensure proper behavior.
+ *
+ * What does this feature do?
+ * - if there is a CSS rule that specifies the size of the canvas (ex: `#canvas { width: 100%;}`), then the canvas
+ *   will be scaled to match this value. Note that from a GLFW point of view, the size of the window remains what
+ *   gets specified in `glfwCreateWindow` and/or `glfwSetWindowSize`
+ * - only global CSS rules apply, as setting a CSS rule on the canvas itself is removed (ex: `<canvas style="width:100%;">` is ignored)
+ *
+ * In HiDPI mode, (`glfwWindowHint(GLFW_SCALE_TO_MONITOR, GLFW_TRUE)`), this feature cannot work and as a result is disabled (because the canvas
+ * is sized using `devicePixelRatio` as the factor and CSS is used to scale it at the desired size).
+ */
+
+/**
+ * As explained above, this function adds a global CSS rule instead of setting the CSS style directly on the canvas
+ * because it gets ignored otherwise. */
+EM_JS(void, addCSSScalingRule, (), {
+  const style = document.createElement('style');
+  style.appendChild(document.createTextNode("#canvas { width: 700px; height: 500px; }"));
+  document.head.appendChild(style);
+})
+
+/**
+ * Since it is unclear in which browser/resolution this test will run we compute the actual ratio used by the test.
+ * This has the neat effect that the test can be run manually on a HiDPI screen.
+ */
+EM_JS(double, getDevicePixelRatio, (), {return (typeof devicePixelRatio == 'number' && devicePixelRatio) || 1.0;})
+
+/**
+ * Checks window size and framebuffer size according to ratio */
+static void checkWindowSize(GLFWwindow *window, int expectedWidth, int expectedHeight, float ratio) {
+  // first check the window size
+  int w, h;
+  glfwGetWindowSize(window, &w, &h);
+  printf("windowSize => %d == %d && %d == %d\n", w, expectedWidth, h, expectedHeight);
+  assert(w == expectedWidth && h == expectedHeight);
+
+  // second check the frame buffer size
+  int fbw, fbh;
+  glfwGetFramebufferSize(window, &fbw, &fbh);
+  printf("framebufferSize => %d == %d && %d == %d\n", fbw, (int) (expectedWidth * ratio), fbh, (int) (expectedHeight * ratio));
+  assert(fbw == (int) (expectedWidth * ratio) && fbh == (int) (expectedHeight * ratio));
+}
+
+int main() {
+
+  assert(glfwInit() == GLFW_TRUE);
+
+  // Use Case #1
+  // Create a window without HiDPI support and without CSS rule => expected sizes to match
+  {
+    printf("Use case #1\n");
+    GLFWwindow* window = glfwCreateWindow(640, 480, "test_glfw3_css_scaling.c", NULL, NULL);
+    assert(window);
+    checkWindowSize(window, 640, 480, 1.0);
+    double w, h;
+    emscripten_get_element_css_size("#canvas", &w, &h);
+    printf("CSS Size=%.0fx%.0f\n", w, h);
+    assert(w == 640 && h == 480);
+    glfwDestroyWindow(window);
+  }
+
+  // Use Case #2
+  // Create a window without HiDPI support, and with CSS rule =>
+  // the window size should match the creation size, but the CSS size should match the rule.
+  {
+    printf("Use case #2\n");
+    addCSSScalingRule();
+    GLFWwindow* window = glfwCreateWindow(640, 480, "test_glfw3_css_scaling.c", NULL, NULL);
+    assert(window);
+    checkWindowSize(window, 640, 480, 1.0);
+    double w, h;
+    emscripten_get_element_css_size("#canvas", &w, &h);
+    printf("CSS Size=%.0fx%.0f\n", w, h);
+    assert(w == 700 && h == 500); // Rule is "#canvas { width: 700px; height: 500px; }"
+    glfwDestroyWindow(window);
+  }
+
+  // Use Case #3
+  // Create a window with HiDPI support, and with CSS rule =>
+  // the window size and framebuffer size should match the creation size (CSS rule is ignored)
+  {
+    printf("Use case #3\n");
+    glfwWindowHint(GLFW_SCALE_TO_MONITOR, GLFW_TRUE);
+    GLFWwindow* window = glfwCreateWindow(640, 480, "test_glfw3_css_scaling.c", NULL, NULL);
+    assert(window);
+    double dpr = getDevicePixelRatio();
+    printf("devicePixelRatio=%.0f\n", dpr);
+    checkWindowSize(window, 640, 480, dpr);
+    double w, h;
+    emscripten_get_element_css_size("#canvas", &w, &h);
+    printf("CSS Size=%.0fx%.0f\n", w, h);
+    assert(w == 640 && h == 480);
+    glfwDestroyWindow(window);
+  }
+
+  printf("All tests complete\n");
+
+  glfwTerminate();
+
+  return 0;
+}

test/test_browser.py

@@ -2864,6 +2864,10 @@ def test_glfw_events(self, args):
   def test_glfw3_hi_dpi_aware(self):
     self.btest_exit('test_glfw3_hi_dpi_aware.c', args=['-sUSE_GLFW=3', '-lGL'])
 
+  @requires_graphics_hardware
+  def test_glfw3_css_scaling(self):
+    self.btest_exit('test_glfw3_css_scaling.c', args=['-sUSE_GLFW=3'])
+
   @requires_graphics_hardware
   @also_with_wasm2js
   def test_sdl2_image(self):