Bug 1892898 - add a desktop-only CSS intervention for investopedia.com to size article cards correctly; r=denschub,webcompat-reviewers

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

browser/extensions/webcompat/data/interventions.json

@@ -2101,6 +2101,23 @@
       }
     ]
   },
+  "1892898": {
+    "label": "investopedia.com",
+    "bugs": {
+      "1892898": {
+        "issue": "broken-layout",
+        "matches": ["*://*.investopedia.com/*"]
+      }
+    },
+    "interventions": [
+      {
+        "platforms": ["desktop"],
+        "content_scripts": {
+          "css": ["bug1892898-investopedia.com-fix-card-height.css"]
+        }
+      }
+    ]
+  },
   "1894308": {
     "label": "dingtalk.com",
     "bugs": {

browser/extensions/webcompat/injections/css/bug1892898-investopedia.com-fix-card-height.css

@@ -0,0 +1,14 @@
+/* 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/. */
+
+/**
+ * investopedia.com - Article cards are too tall.
+ * Bug #1892898 - https://bugzilla.mozilla.org/show_bug.cgi?id=1892898
+ *
+ * The site is running into an interop issue with images with alt-text
+ * (see bug 1945916). We can work around this by specifying a minimum height.
+ */
+.card__img {
+  min-height: 0;
+}

browser/extensions/webcompat/moz.build

@@ -73,6 +73,7 @@ FINAL_TARGET_FILES.features["webcompat@mozilla.org"]["injections"]["css"] += [
     "injections/css/bug1886566-quezoncity.gov.ph-iframe-height.css",
     "injections/css/bug1886591-la-vache-noire.com-cookie-banner-fix.css",
     "injections/css/bug1886616-www.six-group.com-select-fix.css",
+    "injections/css/bug1892898-investopedia.com-fix-card-height.css",
     "injections/css/bug1895051-www.zhihu.com-broken-button-fix.css",
     "injections/css/bug1896349-vivaldi.com-selected-text-fix.css",
     "injections/css/bug1896571-gracobaby.ca-unlock-scrolling.css",

testing/webcompat/interventions/tests/test_1892898_investopedia_com.py

@@ -0,0 +1,30 @@
+import pytest
+
+URL = "https://www.investopedia.com/banking-4427754"
+
+CARD_CSS = ".card__content[data-tag=Banking]"
+
+
+async def are_cards_too_tall(client):
+    await client.navigate(URL)
+    card = client.await_css(CARD_CSS, is_displayed=True)
+    return client.execute_script(
+        """
+      return arguments[0].getBoundingClientRect().height > window.innerHeight;
+    """,
+        card,
+    )
+
+
+@pytest.mark.skip_platforms("android")
+@pytest.mark.asyncio
+@pytest.mark.with_interventions
+async def test_enabled(client):
+    assert not await are_cards_too_tall(client)
+
+
+@pytest.mark.skip_platforms("android")
+@pytest.mark.asyncio
+@pytest.mark.without_interventions
+async def test_disabled(client):
+    assert await are_cards_too_tall(client)