TEMP

mahozad · Nov 17, 2023 · 461dfb0 · 461dfb0
1 parent 81d07fb
commit 461dfb0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/src/main.js b/src/main.js
@@ -266,6 +266,12 @@ function generateStyle() {
     return `STYLES_TEMPLATE`;
 }
 
+window.CSS.registerProperty({
+  name: '--theme-switch-icon-color',
+  syntax: '<color>',
+  inherits: false,
+  initialValue: '#000',
+});
 updateTheme();
 window.customElements.define(ELEMENT_NAME, ThemeSwitchElement);
 window

diff --git a/test/main.test.js b/test/main.test.js
@@ -335,6 +335,16 @@ describe("Screenshot tests", () => {
         expect(screenshot).toMatchReferenceSnapshot();
     }, 100_000);
 
+    test(`The icon color should be animatable`, async () => {
+        const screenshot = await takeScreenshot(() => {
+            localStorage.setItem("theme", "auto");
+        }, async (page, element) => {
+            await element.hover();
+            await page.waitForTimeout(1_000);
+        }, "template-8.html");
+        expect(screenshot).toMatchReferenceSnapshot();
+    }, 100_000);
+
     // See https://stackoverflow.com/q/47107465/8583692
     // and https://github.com/puppeteer/puppeteer/blob/main/examples/custom-event.js
     test(`When the switch is toggled, it should trigger a "themeToggle" event`, async () => {

diff --git a/test/template-8.html b/test/template-8.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Theme switch test 8</title>
+  <style>
+    @keyframes anim {
+      0%   { --theme-switch-icon-color: #000; }
+      100% { --theme-switch-icon-color: #f00; }
+    }
+    theme-switch {
+      width: 64px;
+      height: 64px;
+      --theme-switch-icon-color: #000;
+      transition: --theme-switch-icon-color 2s linear;
+    }
+    theme-switch:hover {
+      --theme-switch-icon-color: #f00;
+    }
+  </style>
+  <script src="../dist/theme-switch.js"></script>
+</head>
+<body>
+
+<theme-switch></theme-switch>
+
+</body>
+</html>