EmscriptenApplication: add custom canvas test

6 years ago · 910a47676e
4 changed files with 58 additions and 1 deletions
--- a/src/Magnum/Platform/Test/CMakeLists.txt
+++ b/src/Magnum/Platform/Test/CMakeLists.txt
@ -51,6 +51,22 @@ if(WITH_EMSCRIPTENAPPLICATION)
        COMMAND ${CMAKE_COMMAND} -E copy_if_different
            ${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_compile_definitions(PlatformEmscriptenApplicationCustomCanvasTest PRIVATE CUSTOM_CANVAS_ID)
+    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>)
 endif()

 if(WITH_GLFWAPPLICATION)
--- a/src/Magnum/Platform/Test/EmscriptenApplicationCustomCanvasTest.html
+++ b/src/Magnum/Platform/Test/EmscriptenApplicationCustomCanvasTest.html
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Magnum EmscriptenApplication 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>
--- a/src/Magnum/Platform/Test/EmscriptenApplicationTest.cpp
+++ b/src/Magnum/Platform/Test/EmscriptenApplicationTest.cpp
@ -153,7 +153,11 @@ EmscriptenApplicationTest::EmscriptenApplicationTest(const Arguments& arguments)
        return;
    }

-    create(Configuration{}.setWindowFlags(Configuration::WindowFlag::Resizable)
+    create(Configuration{}
+        .setWindowFlags(Configuration::WindowFlag::Resizable)
+        #ifdef CUSTOM_CANVAS_ID
+        .setCanvasTarget("#canvas2")
+        #endif
        //, GLConfiguration{}.setFlags({})
    );

--- a/src/Magnum/Platform/Test/PatchWebApplicationCssCustomCanvas.cmake
+++ b/src/Magnum/Platform/Test/PatchWebApplicationCssCustomCanvas.cmake
@ -0,0 +1,3 @@
+file(READ ${CMAKE_CURRENT_LIST_DIR}/WebApplication.css CONTENT)
+string(REPLACE "#canvas" "#canvas2" CONTENT "${CONTENT}")
+file(WRITE ${CMAKE_CURRENT_LIST_DIR}/WebApplicationCustomCanvas.css "${CONTENT}")