Bug 1954144 - add a CSS intervention for td.com to improve scrollbar rendering on video pop-ups; r=denschub,webcompat-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D249010

browser/extensions/webcompat/data/interventions.json

@@ -3357,6 +3357,23 @@
       }
     ]
   },
+  "1954144": {
+    "label": "td.com",
+    "bugs": {
+      "1954144": {
+        "issue": "extra-scrollbars",
+        "matches": ["*://*.td.com/*"]
+      }
+    },
+    "interventions": [
+      {
+        "platforms": ["desktop"],
+        "content_scripts": {
+          "css": ["bug1954144-td.com-scrollbar-fix.css"]
+        }
+      }
+    ]
+  },
   "1955932": {
     "label": "coopvoce.it",
     "bugs": {

browser/extensions/webcompat/injections/css/bug1954144-td.com-scrollbar-fix.css

@@ -0,0 +1,16 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * td.com - scrollbars on videos are not styled correctly
+ * Bug #1954144 - https://bugzilla.mozilla.org/show_bug.cgi?id=1954144
+ *
+ * They are using non-standard webkit-scrollbar CSS to style the scrollbar, but we
+ * provide a standards-based analogue.
+ */
+.overlay-video-modal .cmp-dialog__details {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #616161 #fff;
+}

testing/webcompat/interventions/tests/test_1954144_td_com.py

@@ -0,0 +1,46 @@
+import pytest
+from webdriver.error import NoSuchElementException
+
+URL = "https://www.td.com/ca/en/about-td/diversity-and-inclusion/black-communities-in-canada?cm_sp=c000-20-2404"
+
+COOKIES_CLOSE_CSS = ".onetrust-close-btn-handler"
+VIDEO_CSS = "a.cmp-banner-container__video-container-link"
+CONTAINER_CSS = ".videoModal.container .cmp-dialog__details"
+
+
+async def is_scrollbar_visible(client):
+    await client.navigate(URL)
+
+    try:
+        client.await_css(COOKIES_CLOSE_CSS, is_displayed=True, timeout=4).click()
+        client.await_element_hidden(client.css(COOKIES_CLOSE_CSS))
+    except NoSuchElementException:
+        pass
+
+    client.execute_script("HTMLMediaElement.prototype.play = () => {}")
+    client.await_css(VIDEO_CSS, is_displayed=True).click()
+    container = client.await_css(CONTAINER_CSS, is_displayed=True)
+    return client.execute_script(
+        """
+      const container = arguments[0];
+      const { width, height } = container.getBoundingClientRect();
+      return container.scrollWidth !== Math.round(width) || container.scrollHeight !== Math.round(height);
+    """,
+        container,
+    )
+
+
+@pytest.mark.skip_platforms("android")
+@pytest.mark.need_visible_scrollbars
+@pytest.mark.asyncio
+@pytest.mark.with_interventions
+async def test_enabled(client):
+    assert not await is_scrollbar_visible(client)
+
+
+@pytest.mark.skip_platforms("android")
+@pytest.mark.need_visible_scrollbars
+@pytest.mark.asyncio
+@pytest.mark.without_interventions
+async def test_disabled(client):
+    assert await is_scrollbar_visible(client)