From 50ab9b9c7b2b9b475540598be4304012756aeefb Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Sat, 17 Sep 2022 21:17:26 +0200
Subject: [PATCH] Only style `<a>` with a href link (#9843)

- This patch changes the behavior of the user agent styling for the `<a>` element. It will only modify the color of `<a>` if it has a link(thus a `href` attribute), this will leave alone those without any link, thus a more user-agent styling matching behavior.
- Resolves #9836
---
 CHANGELOG.md                                 | 4 ++++
 src/inject/dynamic-theme/modify-css.ts       | 2 +-
 tests/inject/dynamic/style-override.tests.ts | 6 ++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31ad66942109..014a7c425544 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## Unreleased
+
+- Don't style `<a>` elements without a link(href attribute) anymore. Only those with a link.
+
 ## 4.9.57 (Aug 23, 2022)
 
 - Fix iframes not getting modified when settings were changed.
diff --git a/src/inject/dynamic-theme/modify-css.ts b/src/inject/dynamic-theme/modify-css.ts
index a9abdf53e172..525d656baba9 100644
--- a/src/inject/dynamic-theme/modify-css.ts
+++ b/src/inject/dynamic-theme/modify-css.ts
@@ -112,7 +112,7 @@ export function getModifiedUserAgentStyle(theme: Theme, isIFrame: boolean, style
     lines.push(`    border-color: ${modifyBorderColor({r: 76, g: 76, b: 76}, theme)};`);
     lines.push(`    color: ${modifyForegroundColor({r: 0, g: 0, b: 0}, theme)};`);
     lines.push('}');
-    lines.push('a {');
+    lines.push('a:any-link {');
     lines.push(`    color: ${modifyForegroundColor({r: 0, g: 64, b: 255}, theme)};`);
     lines.push('}');
     lines.push('table {');
diff --git a/tests/inject/dynamic/style-override.tests.ts b/tests/inject/dynamic/style-override.tests.ts
index 303db691a296..d21f4ff73ab1 100644
--- a/tests/inject/dynamic/style-override.tests.ts
+++ b/tests/inject/dynamic/style-override.tests.ts
@@ -50,13 +50,15 @@ describe('STYLE ELEMENTS', () => {
     it('should override User Agent style', async () => {
         container.innerHTML = multiline(
             '<span>Text</span>',
-            '<a href="#">Link</a>',
+            '<a href="#" class="href">Link</a>',
+            '<a class="non-href">Non-link</a>'
         );
         createOrUpdateDynamicTheme(theme, null, false);
         expect(getComputedStyle(container).backgroundColor).toBe('rgb(0, 0, 0)');
         expect(getComputedStyle(container).color).toBe('rgb(255, 255, 255)');
         expect(getComputedStyle(container.querySelector('span')).color).toBe('rgb(255, 255, 255)');
-        expect(getComputedStyle(container.querySelector('a')).color).toBe('rgb(51, 145, 255)');
+        expect(getComputedStyle(container.querySelector('.href')).color).toBe('rgb(51, 145, 255)');
+        expect(getComputedStyle(container.querySelector('.non-href')).color).toBe('rgb(255, 255, 255)');
     });
 
     it('should override static style', async () => {