From 110e45d0ea75e5c53677b1c99581cba216e33719 Mon Sep 17 00:00:00 2001
From: Pablo Escobar <mail@rvrs.in>
Date: Thu, 5 Nov 2020 22:26:03 +0100
Subject: [PATCH] Platform: add test for multiple applications on one page.

---
 src/Magnum/Platform/Test/CMakeLists.txt       | 17 ++++++
 .../Test/EmscriptenApplicationTest.cpp        |  4 ++
 .../MultipleEmscriptenApplicationTest.html    | 56 +++++++++++++++++++
 3 files changed, 77 insertions(+)
 create mode 100644 src/Magnum/Platform/Test/MultipleEmscriptenApplicationTest.html

diff --git a/src/Magnum/Platform/Test/CMakeLists.txt b/src/Magnum/Platform/Test/CMakeLists.txt
index 7fa2dfc4e..74bc57f2f 100644
--- a/src/Magnum/Platform/Test/CMakeLists.txt
+++ b/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
@@ -51,6 +53,21 @@ if(WITH_EMSCRIPTENAPPLICATION)
         COMMAND ${CMAKE_COMMAND} -E copy_if_different
             ${CMAKE_CURRENT_SOURCE_DIR}/EmscriptenApplicationTest.html
             $<TARGET_FILE_DIR:PlatformEmscriptenApplicationTest>/PlatformEmscriptenApplicationTest.html)
+
+    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=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")
+    add_custom_command(TARGET PlatformMultipleEmscriptenApplicationTest POST_BUILD
+        COMMAND ${CMAKE_COMMAND} -E copy_if_different
+            ${CMAKE_CURRENT_SOURCE_DIR}/../WebApplication.css
+            ${CMAKE_CURRENT_SOURCE_DIR}/../EmscriptenApplication.js
+            $<TARGET_FILE_DIR:PlatformMultipleEmscriptenApplicationTest>
+        COMMAND ${CMAKE_COMMAND} -E copy_if_different
+            ${CMAKE_CURRENT_SOURCE_DIR}/MultipleEmscriptenApplicationTest.html
+            $<TARGET_FILE_DIR:PlatformMultipleEmscriptenApplicationTest>/PlatformMultipleEmscriptenApplicationTest.html)
 endif()
 
 if(WITH_GLFWAPPLICATION)
diff --git a/src/Magnum/Platform/Test/EmscriptenApplicationTest.cpp b/src/Magnum/Platform/Test/EmscriptenApplicationTest.cpp
index 4ad684d6e..1fd052a07 100644
--- a/src/Magnum/Platform/Test/EmscriptenApplicationTest.cpp
+++ b/src/Magnum/Platform/Test/EmscriptenApplicationTest.cpp
@@ -31,6 +31,7 @@
 #include "Magnum/GL/Renderer.h"
 #include "Magnum/GL/DefaultFramebuffer.h"
 #include "Magnum/GL/Mesh.h"
+#include "Magnum/Math/Color.h"
 
 namespace Magnum { namespace Platform { namespace Test {
 
@@ -40,6 +41,9 @@ struct EmscriptenApplicationTest: Platform::Application {
 
     virtual void drawEvent() override {
         Debug() << "draw event";
+        #ifdef CUSTOM_CLEAR_COLOR
+        GL::Renderer::setClearColor({ CUSTOM_CLEAR_COLOR });
+        #endif
         GL::defaultFramebuffer.clear(GL::FramebufferClear::Color);
 
         swapBuffers();
diff --git a/src/Magnum/Platform/Test/MultipleEmscriptenApplicationTest.html b/src/Magnum/Platform/Test/MultipleEmscriptenApplicationTest.html
new file mode 100644
index 000000000..c6a7b5099
--- /dev/null
+++ b/src/Magnum/Platform/Test/MultipleEmscriptenApplicationTest.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<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" />
+  <script src="EmscriptenApplication.js"></script>
+</head>
+<body>
+  <h1>Magnum Multiple EmscriptenApplication Test</h1>
+  <div class="mn-container">
+    <div class="mn-sizer"><div class="mn-expander"><div class="mn-listener">
+      <canvas class="mn-canvas" id="canvas1" tabindex="0"></canvas>
+      <div class="mn-status" id="status1">Initialization...</div>
+      <div class="mn-status-description" id="status-description1"></div>
+      <script src="PlatformMultipleEmscriptenApplicationTest.js"></script>
+      <script async="async">
+      /* 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. */
+      const myModule = createMagnumModule({
+          canvas: document.getElementById('canvas1'),
+          status: document.getElementById('status1'),
+          statusDescription: document.getElementById('status-description1')
+      });
+      myModule.keyboardListeningElement = myModule.canvas;
+      myModule.canvas.addEventListener('mousedown', function(event) {
+          event.target.focus();
+      });
+      createModule(myModule);
+      </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>
+      <script>
+      /* This application is compiled without -s MODULARIZE so it uses the
+         global Module set by EmscriptenApplication.js and runs instantly.
+         You'll usually want to use MODULARIZE for all applications but this
+         makes it easier to reuse the existing EmscriptenApplicationTest */
+      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>
+</html>