diff --git a/browser/extensions/webcompat/data/interventions.json b/browser/extensions/webcompat/data/interventions.json index 0feecdd2dbbb..d9483e28b4b7 100644 --- a/browser/extensions/webcompat/data/interventions.json +++ b/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": { diff --git a/browser/extensions/webcompat/injections/css/bug1954144-td.com-scrollbar-fix.css b/browser/extensions/webcompat/injections/css/bug1954144-td.com-scrollbar-fix.css new file mode 100644 index 000000000000..c4cd1c7e8c42 --- /dev/null +++ b/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; +} diff --git a/testing/webcompat/interventions/tests/test_1954144_td_com.py b/testing/webcompat/interventions/tests/test_1954144_td_com.py new file mode 100644 index 000000000000..bdb7b7c235e5 --- /dev/null +++ b/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)