EmscriptenApplication: add test for multiple applications on one page

src/Magnum/Platform/Test/CMakeLists.txt

@@ -43,6 +43,8 @@ if(WITH_EMSCRIPTENAPPLICATION)
     add_executable(PlatformEmscriptenApplicationTest EmscriptenApplicationTest.cpp)
     target_link_libraries(PlatformEmscriptenApplicationTest PRIVATE MagnumEmscriptenApplication MagnumGL)
     set_target_properties(PlatformEmscriptenApplicationTest PROPERTIES FOLDER "Magnum/Platform/Test")
+    # Test that the canvas and keylistener can be found with both the old and the new Emscripten target behaviors
+    target_link_libraries(PlatformEmscriptenApplicationTest PRIVATE "-s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=0")
     add_custom_command(TARGET PlatformEmscriptenApplicationTest POST_BUILD
         COMMAND ${CMAKE_COMMAND} -E copy_if_different
             ${CMAKE_CURRENT_SOURCE_DIR}/../WebApplication.css
@@ -52,31 +54,17 @@ if(WITH_EMSCRIPTENAPPLICATION)
             ${CMAKE_CURRENT_SOURCE_DIR}/EmscriptenApplicationTest.html
             $<TARGET_FILE_DIR:PlatformEmscriptenApplicationTest>/PlatformEmscriptenApplicationTest.html)
 
-    add_executable(PlatformEmscriptenApplicationCustomCanvasTest EmscriptenApplicationTest.cpp)
-    target_link_libraries(PlatformEmscriptenApplicationCustomCanvasTest PRIVATE MagnumEmscriptenApplication MagnumGL)
-    set_target_properties(PlatformEmscriptenApplicationCustomCanvasTest PROPERTIES FOLDER "Magnum/Platform/Test")
-    target_link_libraries(PlatformEmscriptenApplicationCustomCanvasTest PRIVATE "-s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=0")
-    add_custom_command(TARGET PlatformEmscriptenApplicationCustomCanvasTest POST_BUILD
-        COMMAND ${CMAKE_COMMAND} -E copy_if_different
-            ${CMAKE_CURRENT_SOURCE_DIR}/../WebApplication.css
-            ${CMAKE_CURRENT_SOURCE_DIR}/../EmscriptenApplication.js
-            ${CMAKE_CURRENT_SOURCE_DIR}/PatchWebApplicationCssCustomCanvas.cmake
-            $<TARGET_FILE_DIR:PlatformEmscriptenApplicationCustomCanvasTest>
-        COMMAND ${CMAKE_COMMAND} -P PatchWebApplicationCssCustomCanvas.cmake
-        COMMAND ${CMAKE_COMMAND} -E copy_if_different
-            ${CMAKE_CURRENT_SOURCE_DIR}/EmscriptenApplicationCustomCanvasTest.html
-            $<TARGET_FILE_DIR:PlatformEmscriptenApplicationCustomCanvasTest>/PlatformEmscriptenApplicationCustomCanvasTest.html
-        WORKING_DIRECTORY $<TARGET_FILE_DIR:PlatformEmscriptenApplicationCustomCanvasTest>)
-
     add_executable(PlatformMultipleEmscriptenApplicationTest EmscriptenApplicationTest.cpp)
     target_link_libraries(PlatformMultipleEmscriptenApplicationTest PRIVATE MagnumEmscriptenApplication MagnumGL)
     set_target_properties(PlatformMultipleEmscriptenApplicationTest PROPERTIES FOLDER "Magnum/Platform/Test")
-        target_compile_definitions(PlatformMultipleEmscriptenApplicationTest PRIVATE CUSTOM_CLEAR_COLOR=1,0,1,1)
+    target_compile_definitions(PlatformMultipleEmscriptenApplicationTest PRIVATE CUSTOM_CLEAR_COLOR=0.2,0,0.2,1)
     target_link_libraries(PlatformMultipleEmscriptenApplicationTest PRIVATE "-s MODULARIZE -s EXPORT_NAME=createModule")
     target_link_libraries(PlatformMultipleEmscriptenApplicationTest PRIVATE "-s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1")
+    target_link_libraries(PlatformMultipleEmscriptenApplicationTest PRIVATE "--pre-js ${CMAKE_CURRENT_SOURCE_DIR}/../EmscriptenApplication.js")
+    target_link_libraries(PlatformMultipleEmscriptenApplicationTest PRIVATE "--pre-js ${CMAKE_CURRENT_SOURCE_DIR}/MultipleEmscriptenApplicationTestPre.js")
     add_custom_command(TARGET PlatformMultipleEmscriptenApplicationTest POST_BUILD
         COMMAND ${CMAKE_COMMAND} -E copy_if_different
-                ${CMAKE_CURRENT_SOURCE_DIR}/../EmscriptenApplication.js
+            ${CMAKE_CURRENT_SOURCE_DIR}/../WebApplication.css
             $<TARGET_FILE_DIR:PlatformMultipleEmscriptenApplicationTest>
         COMMAND ${CMAKE_COMMAND} -E copy_if_different
             ${CMAKE_CURRENT_SOURCE_DIR}/MultipleEmscriptenApplicationTest.html

src/Magnum/Platform/Test/EmscriptenApplicationCustomCanvasTest.html

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <title>Magnum EmscriptenApplication Custom Canvas Test</title>
-  <link rel="stylesheet" href="WebApplicationCustomCanvas.css" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-</head>
-<body>
-  <h1>Magnum EmscriptenApplication Custom Canvas Test</h1>
-  <div id="container" class="">
-    <div id="sizer"><div id="expander"><div id="listener">
-      <canvas id="canvas2" tabindex="0"></canvas>
-      <div id="status">Initialization...</div>
-      <div id="status-description"></div>
-      <script src="EmscriptenApplication.js"></script>
-      <script>
-      /* Override default canvas set in EmscriptenApplication.js */
-      Module.canvas = document.getElementById('canvas2');
-      </script>
-      <script async="async" src="PlatformEmscriptenApplicationCustomCanvasTest.js"></script>
-      <script>
-      /* To test keyboard capture directly on the canvas */
-      Module.keyboardListeningElement = Module.canvas;
-      Module.canvas.addEventListener('mousedown', function(event) {
-          event.target.focus();
-      });
-      </script>
-    </div></div></div>
-    <!-- To test that it doesn't render into the default canvas -->
-    <canvas id="canvas"></canvas>
-  </div>
-</body>
-</html>

src/Magnum/Platform/Test/EmscriptenApplicationTest.html

@@ -14,7 +14,6 @@
       <div class="mn-status" id="status">Initialization...</div>
       <div class="mn-status-description" id="status-description"></div>
       <script src="EmscriptenApplication.js"></script>
-      <script async="async" src="PlatformEmscriptenApplicationTest.js"></script>
       <script>
         /* To test keyboard capture directly on the canvas */
         Module.keyboardListeningElement = Module.canvas;
@@ -22,6 +21,7 @@
             event.target.focus();
         });
       </script>
+      <script async="async" src="PlatformEmscriptenApplicationTest.js"></script>
     </div></div></div>
   </div>
 </body>

src/Magnum/Platform/Test/MultipleEmscriptenApplicationTest.html

@@ -3,46 +3,52 @@
 <head>
   <meta charset="UTF-8" />
   <title>Magnum Multiple EmscriptenApplication Test</title>
+  <link rel="stylesheet" href="WebApplication.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 <body>
   <h1>Magnum Multiple EmscriptenApplication Test</h1>
-  <div id="container" class="">
+  <div class="mn-container">
-    <div id="sizer"><div id="expander"><div id="listener">
+    <div class="mn-sizer"><div class="mn-expander"><div class="mn-listener">
-      <canvas id="canvas" tabindex="0"></canvas>
+      <canvas class="mn-canvas" id="canvas1" tabindex="0"></canvas>
-      <canvas id="canvas2" tabindex="1"></canvas>
+      <div class="mn-status" id="status1">Initialization...</div>
-      <div id="status">Initialization...</div>
+      <div class="mn-status-description" id="status-description1"></div>
-      <div id="status-description"></div>
-      <script src="EmscriptenApplication.js"></script>
       <script src="PlatformMultipleEmscriptenApplicationTest.js"></script>
       <script>
-      const myModule = Module;
-      /* Override default canvas set in EmscriptenApplication.js */
-      myModule.canvas = document.getElementById('canvas2');
-
-      myModule.keyboardListeningElement = Module.canvas;
-      myModule.canvas.addEventListener('mousedown', function(event) {
-          event.target.focus();
-      });
-
         /*
           This application is compiled with -s MODULARIZE -s EXPORT_NAME=createModule
-        so it doesn't run until we instantiate it with its own Module object
+          so it doesn't run until we instantiate it with its own Module object.
+          We embedded EmscriptenApplication.js into the application .js via --pre-js
+          so that its code is run before the Emscripten runtime code.
+          All changes to Module (e.g overriding the canvas element) have to be done
+          in another --pre-js (MultipleEmscriptenApplicationTestPre.js).
         */
-      createModule(myModule);
+        createModule();
       </script>
+    </div></div></div>
+  </div>
+  <div class="mn-container">
+    <div class="mn-sizer"><div class="mn-expander"><div class="mn-listener">
+      <canvas class="mn-canvas" id="canvas2" tabindex="1"></canvas>
+      <div class="mn-status" id="status2">Initialization...</div>
+      <div class="mn-status-description" id="status-description2"></div>
       <!--
         Create a fresh Module. This application is compiled without -s MODULARIZE
         so Module is expected to be global and the application is run instantly.
+        You'll usually want to use MODULARIZE for all applications but this
+        makes it easier to reuse the existing PlatformEmscriptenApplicationTest.js.
       -->
       <script src="EmscriptenApplication.js"></script>
-      <script src="PlatformEmscriptenApplicationTest.js"></script>
       <script>
+        Module.canvas = document.getElementById('canvas2');
+        Module.status = document.getElementById('status2');
+        Module.statusDescription = document.getElementById('status-description2');
         Module.keyboardListeningElement = Module.canvas;
         Module.canvas.addEventListener('mousedown', function(event) {
             event.target.focus();
         });
       </script>
+      <script async="async" src="PlatformEmscriptenApplicationTest.js"></script>
     </div></div></div>
   </div>
 </body>

src/Magnum/Platform/Test/MultipleEmscriptenApplicationTestPre.js

@@ -0,0 +1,8 @@
+Module.canvas = document.getElementById('canvas1');
+Module.status = document.getElementById('status1');
+Module.statusDescription = document.getElementById('status-description1');
+
+Module.keyboardListeningElement = Module.canvas;
+Module.canvas.addEventListener('mousedown', function(event) {
+    event.target.focus();
+});

src/Magnum/Platform/Test/PatchWebApplicationCssCustomCanvas.cmake

@@ -1,3 +0,0 @@
-file(READ ${CMAKE_CURRENT_LIST_DIR}/WebApplication.css CONTENT)
-string(REPLACE "#canvas" "#canvas2" CONTENT "${CONTENT}")
-file(WRITE ${CMAKE_CURRENT_LIST_DIR}/WebApplicationCustomCanvas.css "${CONTENT}")