From b8ca7eefde0630b70b995586fc695f269826fff7 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Fri, 11 Oct 2024 11:32:52 +0200
Subject: [PATCH] Patch CSS issue

---
 ...-browser-runner-npm-9.1.6-41633725a3.patch | 13 ++++
 packages/snaps-controllers/package.json       |  2 +-
 .../snaps-execution-environments/package.json |  2 +-
 packages/snaps-utils/package.json             |  2 +-
 yarn.lock                                     | 61 +++++++++++++++++--
 5 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 .yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch

diff --git a/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch b/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch
new file mode 100644
index 0000000000..e1a005f528
--- /dev/null
+++ b/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch
@@ -0,0 +1,13 @@
+diff --git a/build/browser/setup.js b/build/browser/setup.js
+index 59dd12246f2307beb3547b79484485d5fd4a34e3..fbe3c9505498d12cdc40ba651b1dfe7d8b10d036 100644
+--- a/build/browser/setup.js
++++ b/build/browser/setup.js
+@@ -293,7 +293,7 @@ sendTestReport_fn = function(value) {
+ };
+ var template = document.createElement("template");
+ template.innerHTML = /*html*/
+-'\n<style>\n    @import "/node_modules/mocha/mocha.css";\n\n    .reporter {\n        transition: width .3s;\n        box-shadow: -5px 0px 10px rgb(0 0 0 / 30%);\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 500px;\n        height: 100%;\n        margin: 0;\n        color: var(--mocha-color);\n        background-color: var(--mocha-bg-color);\n        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+TG9nbyBSZWd1bGFyPC90aXRsZT4KICAgIDxnIGlkPSJMb2dvLVJlZ3VsYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNFQTU5MDYiIHg9IjAiIHk9IjAiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjUiPjwvcmVjdD4KICAgICAgICA8cGF0aCBkPSJNOCwxNiBMOCw0OCBMNiw0OCBMNiwxNiBMOCwxNiBaIE00MywxNiBDNTEuODM2NTU2LDE2IDU5LDIzLjE2MzQ0NCA1OSwzMiBDNTksNDAuODM2NTU2IDUxLjgzNjU1Niw0OCA0Myw0OCBDMzQuMTYzNDQ0LDQ4IDI3LDQwLjgzNjU1NiAyNywzMiBDMjcsMjMuMTYzNDQ0IDM0LjE2MzQ0NCwxNiA0MywxNiBaIE0yNywxNiBMMTQuMTA2LDQ3Ljk5OTIwNzggTDExLjk5OSw0Ny45OTkyMDc4IEwyNC44OTQsMTYgTDI3LDE2IFogTTQzLDE4IEMzNS4yNjgwMTM1LDE4IDI5LDI0LjI2ODAxMzUgMjksMzIgQzI5LDM5LjczMTk4NjUgMzUuMjY4MDEzNSw0NiA0Myw0NiBDNTAuNzMxOTg2NSw0NiA1NywzOS43MzE5ODY1IDU3LDMyIEM1NywyNC4yNjgwMTM1IDUwLjczMTk4NjUsMTggNDMsMTggWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);\n        background-repeat: no-repeat;\n        background-size: 30px;\n        background-position: 15px 20px;\n    }\n    .lds-ring {\n        display: inline-block;\n        position: absolute;\n        top: calc(50% - 40px);\n        left: calc(50% - 40px);\n        width: 80px;\n        height: 80px;\n    }\n    .lds-ring div {\n        box-sizing: border-box;\n        display: block;\n        position: absolute;\n        width: 64px;\n        height: 64px;\n        margin: 8px;\n        border: 4px solid #EA5907;\n        border-radius: 50%;\n        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n        border-color: #EA5907 transparent transparent transparent;\n    }\n    .lds-ring div:nth-child(1) {\n        animation-delay: -0.45s;\n    }\n    .lds-ring div:nth-child(2) {\n        animation-delay: -0.3s;\n    }\n    .lds-ring div:nth-child(3) {\n        animation-delay: -0.15s;\n    }\n    @keyframes lds-ring {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    .reporter.minified {\n        width: 65px;\n    }\n\n    #mocha {\n        margin: 0;\n    }\n    ul#mocha-report {\n        transition: opacity .3s;\n        opacity: 1;\n        padding: 50px 15px  0 0;\n    }\n    .minified ul#mocha-report {\n        opacity: 0;\n    }\n    .minified .progress {\n        display: block;\n        float: none;\n    }\n    .minified #mocha-stats {\n        width: 50px;\n        padding-top: 60px;\n    }\n    .minified #mocha-stats li {\n        font-size: .9em;\n    }\n\n    @keyframes fadeOutIn {\n        0% { opacity: 1; }\n        20% { opacity: 0; }\n        100% { opacity: 1; }\n    }\n\n    .btnCollapseExpand {\n        display: block;\n        width: 50px;\n        position: absolute;\n        height: 50px;\n        bottom: 0;\n        right: 0;\n        transition: transform .3s;\n        transform: scale(1) translateX(-434px);\n        margin: 10px 8px;\n        background: transparent;\n        border: 0;\n        cursor: pointer;\n    }\n    .minified .btnCollapseExpand {\n        transform: scale(-1) translateX(0px);\n        animation-name: fadeOutIn;\n        animation-duration: .3s;\n    }\n</style>\n<div class="reporter">\n    <div id="mocha"></div>\n    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>\n    <button class="btnCollapseExpand">\n        <svg width="50" height="40" viewBox="2 0 32 32" xmlns="http://www.w3.org/2000/svg">\n            <path fill="#fff" d="M13.11 29.113c7.243 0 13.113-5.871 13.113-13.113S20.353 2.887 13.11 2.887C5.868 2.887-.003 8.758-.003 16S5.868 29.113 13.11 29.113zm0-25.177c6.652 0 12.064 5.412 12.064 12.064S19.762 28.064 13.11 28.064C6.457 28.064 1.046 22.652 1.046 16S6.457 3.936 13.11 3.936z"/>\n            <path fill="#fff" d="m13.906 21.637.742.742L21.026 16l-6.378-6.379-.742.742 5.112 5.112H6.291v1.049h12.727z"/>\n        </svg>\n    </button>\n</div>\n';
++'\n<style>\n\n\n    .reporter {\n        transition: width .3s;\n        box-shadow: -5px 0px 10px rgb(0 0 0 / 30%);\n        position: absolute;\n        top: 0;\n        right: 0;\n        width: 500px;\n        height: 100%;\n        margin: 0;\n        color: var(--mocha-color);\n        background-color: var(--mocha-bg-color);\n        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjRweCIgaGVpZ2h0PSI2NHB4IiB2aWV3Qm94PSIwIDAgNjQgNjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+TG9nbyBSZWd1bGFyPC90aXRsZT4KICAgIDxnIGlkPSJMb2dvLVJlZ3VsYXIiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIGZpbGw9IiNFQTU5MDYiIHg9IjAiIHk9IjAiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjUiPjwvcmVjdD4KICAgICAgICA8cGF0aCBkPSJNOCwxNiBMOCw0OCBMNiw0OCBMNiwxNiBMOCwxNiBaIE00MywxNiBDNTEuODM2NTU2LDE2IDU5LDIzLjE2MzQ0NCA1OSwzMiBDNTksNDAuODM2NTU2IDUxLjgzNjU1Niw0OCA0Myw0OCBDMzQuMTYzNDQ0LDQ4IDI3LDQwLjgzNjU1NiAyNywzMiBDMjcsMjMuMTYzNDQ0IDM0LjE2MzQ0NCwxNiA0MywxNiBaIE0yNywxNiBMMTQuMTA2LDQ3Ljk5OTIwNzggTDExLjk5OSw0Ny45OTkyMDc4IEwyNC44OTQsMTYgTDI3LDE2IFogTTQzLDE4IEMzNS4yNjgwMTM1LDE4IDI5LDI0LjI2ODAxMzUgMjksMzIgQzI5LDM5LjczMTk4NjUgMzUuMjY4MDEzNSw0NiA0Myw0NiBDNTAuNzMxOTg2NSw0NiA1NywzOS43MzE5ODY1IDU3LDMyIEM1NywyNC4yNjgwMTM1IDUwLjczMTk4NjUsMTggNDMsMTggWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);\n        background-repeat: no-repeat;\n        background-size: 30px;\n        background-position: 15px 20px;\n    }\n    .lds-ring {\n        display: inline-block;\n        position: absolute;\n        top: calc(50% - 40px);\n        left: calc(50% - 40px);\n        width: 80px;\n        height: 80px;\n    }\n    .lds-ring div {\n        box-sizing: border-box;\n        display: block;\n        position: absolute;\n        width: 64px;\n        height: 64px;\n        margin: 8px;\n        border: 4px solid #EA5907;\n        border-radius: 50%;\n        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n        border-color: #EA5907 transparent transparent transparent;\n    }\n    .lds-ring div:nth-child(1) {\n        animation-delay: -0.45s;\n    }\n    .lds-ring div:nth-child(2) {\n        animation-delay: -0.3s;\n    }\n    .lds-ring div:nth-child(3) {\n        animation-delay: -0.15s;\n    }\n    @keyframes lds-ring {\n        0% {\n            transform: rotate(0deg);\n        }\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    .reporter.minified {\n        width: 65px;\n    }\n\n    #mocha {\n        margin: 0;\n    }\n    ul#mocha-report {\n        transition: opacity .3s;\n        opacity: 1;\n        padding: 50px 15px  0 0;\n    }\n    .minified ul#mocha-report {\n        opacity: 0;\n    }\n    .minified .progress {\n        display: block;\n        float: none;\n    }\n    .minified #mocha-stats {\n        width: 50px;\n        padding-top: 60px;\n    }\n    .minified #mocha-stats li {\n        font-size: .9em;\n    }\n\n    @keyframes fadeOutIn {\n        0% { opacity: 1; }\n        20% { opacity: 0; }\n        100% { opacity: 1; }\n    }\n\n    .btnCollapseExpand {\n        display: block;\n        width: 50px;\n        position: absolute;\n        height: 50px;\n        bottom: 0;\n        right: 0;\n        transition: transform .3s;\n        transform: scale(1) translateX(-434px);\n        margin: 10px 8px;\n        background: transparent;\n        border: 0;\n        cursor: pointer;\n    }\n    .minified .btnCollapseExpand {\n        transform: scale(-1) translateX(0px);\n        animation-name: fadeOutIn;\n        animation-duration: .3s;\n    }\n</style>\n<div class="reporter">\n    <div id="mocha"></div>\n    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>\n    <button class="btnCollapseExpand">\n        <svg width="50" height="40" viewBox="2 0 32 32" xmlns="http://www.w3.org/2000/svg">\n            <path fill="#fff" d="M13.11 29.113c7.243 0 13.113-5.871 13.113-13.113S20.353 2.887 13.11 2.887C5.868 2.887-.003 8.758-.003 16S5.868 29.113 13.11 29.113zm0-25.177c6.652 0 12.064 5.412 12.064 12.064S19.762 28.064 13.11 28.064C6.457 28.064 1.046 22.652 1.046 16S6.457 3.936 13.11 3.936z"/>\n            <path fill="#fff" d="m13.906 21.637.742.742L21.026 16l-6.378-6.379-.742.742 5.112 5.112H6.291v1.049h12.727z"/>\n        </svg>\n    </button>\n</div>\n';
+ customElements.define("mocha-framework", MochaFramework);
+ 
+ // src/browser/setup.ts
diff --git a/packages/snaps-controllers/package.json b/packages/snaps-controllers/package.json
index d37b144d1c..e05fe6eeb4 100644
--- a/packages/snaps-controllers/package.json
+++ b/packages/snaps-controllers/package.json
@@ -128,7 +128,7 @@
     "@types/tar-stream": "^3.1.1",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^6.21.0",
-    "@wdio/browser-runner": "^9.1.6",
+    "@wdio/browser-runner": "patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch",
     "@wdio/cli": "^9.1.5",
     "@wdio/globals": "^9.1.5",
     "@wdio/mocha-framework": "^9.1.3",
diff --git a/packages/snaps-execution-environments/package.json b/packages/snaps-execution-environments/package.json
index a7f0610856..3201f590cb 100644
--- a/packages/snaps-execution-environments/package.json
+++ b/packages/snaps-execution-environments/package.json
@@ -98,7 +98,7 @@
     "@types/node": "18.14.2",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^6.21.0",
-    "@wdio/browser-runner": "^9.1.6",
+    "@wdio/browser-runner": "patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch",
     "@wdio/cli": "^9.1.5",
     "@wdio/globals": "^9.1.5",
     "@wdio/mocha-framework": "^9.1.3",
diff --git a/packages/snaps-utils/package.json b/packages/snaps-utils/package.json
index 11c41a2c7d..51cbd08e06 100644
--- a/packages/snaps-utils/package.json
+++ b/packages/snaps-utils/package.json
@@ -121,7 +121,7 @@
     "@types/validate-npm-package-name": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^6.21.0",
-    "@wdio/browser-runner": "^9.1.6",
+    "@wdio/browser-runner": "patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch",
     "@wdio/cli": "^9.1.5",
     "@wdio/globals": "^9.1.5",
     "@wdio/mocha-framework": "^9.1.3",
diff --git a/yarn.lock b/yarn.lock
index adfea9ee6f..53d36d6614 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6111,7 +6111,7 @@ __metadata:
     "@types/tar-stream": "npm:^3.1.1"
     "@typescript-eslint/eslint-plugin": "npm:^5.42.1"
     "@typescript-eslint/parser": "npm:^6.21.0"
-    "@wdio/browser-runner": "npm:^9.1.6"
+    "@wdio/browser-runner": "patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch"
     "@wdio/cli": "npm:^9.1.5"
     "@wdio/globals": "npm:^9.1.5"
     "@wdio/mocha-framework": "npm:^9.1.3"
@@ -6198,7 +6198,7 @@ __metadata:
     "@types/node": "npm:18.14.2"
     "@typescript-eslint/eslint-plugin": "npm:^5.42.1"
     "@typescript-eslint/parser": "npm:^6.21.0"
-    "@wdio/browser-runner": "npm:^9.1.6"
+    "@wdio/browser-runner": "patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch"
     "@wdio/cli": "npm:^9.1.5"
     "@wdio/globals": "npm:^9.1.5"
     "@wdio/mocha-framework": "npm:^9.1.3"
@@ -6635,7 +6635,7 @@ __metadata:
     "@types/validate-npm-package-name": "npm:^4.0.0"
     "@typescript-eslint/eslint-plugin": "npm:^5.42.1"
     "@typescript-eslint/parser": "npm:^6.21.0"
-    "@wdio/browser-runner": "npm:^9.1.6"
+    "@wdio/browser-runner": "patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch"
     "@wdio/cli": "npm:^9.1.5"
     "@wdio/globals": "npm:^9.1.5"
     "@wdio/mocha-framework": "npm:^9.1.3"
@@ -9235,7 +9235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wdio/browser-runner@npm:^9.1.6":
+"@wdio/browser-runner@npm:9.1.6":
   version: 9.1.6
   resolution: "@wdio/browser-runner@npm:9.1.6"
   dependencies:
@@ -9288,6 +9288,59 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@wdio/browser-runner@patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch":
+  version: 9.1.6
+  resolution: "@wdio/browser-runner@patch:@wdio/browser-runner@npm%3A9.1.6#~/.yarn/patches/@wdio-browser-runner-npm-9.1.6-41633725a3.patch::version=9.1.6&hash=bd935c"
+  dependencies:
+    "@nuxt/kit": "npm:^3.12.4"
+    "@originjs/vite-plugin-commonjs": "npm:^1.0.3"
+    "@stencil/core": "npm:^4.20.0"
+    "@types/istanbul-lib-source-maps": "npm:^4.0.4"
+    "@vitest/spy": "npm:^2.0.4"
+    "@wdio/globals": "npm:9.1.5"
+    "@wdio/local-runner": "npm:9.1.5"
+    "@wdio/logger": "npm:9.1.3"
+    "@wdio/mocha-framework": "npm:9.1.3"
+    "@wdio/protocols": "npm:9.0.8"
+    "@wdio/runner": "npm:9.1.5"
+    "@wdio/types": "npm:9.1.3"
+    "@wdio/utils": "npm:9.1.3"
+    deepmerge-ts: "npm:^7.0.3"
+    expect: "npm:30.0.0-alpha.6"
+    expect-webdriverio: "npm:^5.0.1"
+    get-port: "npm:^7.1.0"
+    import-meta-resolve: "npm:^4.0.0"
+    istanbul-lib-coverage: "npm:^3.2.2"
+    istanbul-lib-report: "npm:^3.0.1"
+    istanbul-lib-source-maps: "npm:^5.0.4"
+    istanbul-reports: "npm:^3.1.7"
+    mlly: "npm:^1.6.1"
+    modern-node-polyfills: "npm:^1.0.0"
+    recast: "npm:^0.23.6"
+    safe-stringify: "npm:^1.1.0"
+    source-map-support: "npm:^0.5.21"
+    unimport: "npm:^3.10.0"
+    vite: "npm:~5.4.0"
+    vite-plugin-istanbul: "npm:^6.0.0"
+    vite-plugin-top-level-await: "npm:^1.4.1"
+    webdriver: "npm:9.1.5"
+    webdriverio: "npm:9.1.5"
+  peerDependencies:
+    mocha: ^10.7.3
+  dependenciesMeta:
+    "@nuxt/kit":
+      optional: true
+    "@stencil/core":
+      optional: true
+    unimport:
+      optional: true
+  peerDependenciesMeta:
+    mocha:
+      optional: false
+  checksum: 10/2e738ee5439ea5ea399987f7eb1384449174eea6297f40efa4fccf2786f320d4b238782fe25606d48205faef52b418569e9dc37396f35635ff6e677b1e4ff9f1
+  languageName: node
+  linkType: hard
+
 "@wdio/cli@npm:^9.1.5":
   version: 9.1.5
   resolution: "@wdio/cli@npm:9.1.5"