commit b892fb0096ffd322c8b7c3d8e99cc098d05da4fc
parent b254a4b2cb20220d2bc40ab2a4808ba8854cf2a2
Author: Thomas Wisniewski <twisniewski@mozilla.com>
Date: Fri, 19 Dec 2025 23:16:56 +0000
Bug 2003826 - add a CSS webcompat intervention for tjoy.jp zoom-in on Android. r=webcompat-reviewers,twisniewski
Differential Revision: https://phabricator.services.mozilla.com/D276965
Diffstat:
3 files changed, 86 insertions(+), 0 deletions(-)
diff --git a/browser/extensions/webcompat/data/interventions.json b/browser/extensions/webcompat/data/interventions.json
@@ -6204,6 +6204,23 @@
}
]
},
+ "2003826": {
+ "label": "tjoy.jp",
+ "bugs": {
+ "2003826": {
+ "issue": "broken-zooming",
+ "matches": ["*://tjoy.jp/shinjuku_wald9/reservation/choice_seat"]
+ }
+ },
+ "interventions": [
+ {
+ "platforms": ["android"],
+ "content_scripts": {
+ "css": ["bug2003826-tjoy.jp-fix-broken-zoom.css"]
+ }
+ }
+ ]
+ },
"2004025": {
"label": "chatbot.weixin.qq.com",
"bugs": {
diff --git a/browser/extensions/webcompat/injections/css/bug2003826-tjoy.jp-fix-broken-zoom.css b/browser/extensions/webcompat/injections/css/bug2003826-tjoy.jp-fix-broken-zoom.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/. */
+
+/**
+ * tjoy.jp - zoom is broken.
+ * Bug #2003826 - https://bugzilla.mozilla.org/show_bug.cgi?id=2003826
+ *
+ * Zoom-in is broken because the page sets '-moz-transform' and 'zoom' together to realize zoom-in.
+ * This CSS corrects that issue.
+ */
+.js-map {
+ -moz-transform: none !important;
+}
diff --git a/testing/webcompat/interventions/tests/test_2003826_tjoy_jp.py b/testing/webcompat/interventions/tests/test_2003826_tjoy_jp.py
@@ -0,0 +1,55 @@
+import asyncio
+
+import pytest
+
+URL = "https://tjoy.jp/shinjuku_wald9#schedule-content"
+
+DATES_CSS = ".calendar-item"
+CARD_CSS = ".card-header"
+RESERVE_CSS = ".schedule-box-body"
+ZOOM_WRAPPER_CSS = ".js-zoom-in"
+MAP_CSS = ".js-map"
+
+
+# It's necessary to navigate to the seat choice screen from the movie list because of the session management.
+async def does_correct_zoom(client):
+ # Open and wait for the movie list to be loaded.
+ await client.navigate(URL, wait="load")
+
+ # Navigate to the seat choice screen.
+ # Display tomorrow's movies and reserve the seat for one of them.
+ # Note that today's movies can be already closed for sale.
+ dates = client.await_css(DATES_CSS, all=True)
+ dates[1].click()
+ tomorrows_movie_card = client.await_css(CARD_CSS, is_displayed=True)
+ tomorrows_movie_card.click()
+ reserve = client.await_css(RESERVE_CSS, is_displayed=True)
+ # The element is overlapped by another one, so we have to use javascript to click it.
+ client.execute_script("arguments[0].click()", reserve)
+
+ # The seat map takes time to be displayed.
+ await asyncio.sleep(4)
+
+ # Zoom in to the seat map and check if it sets only 'zoom' without '-moz-transform'.
+ seat_map_zoom_wrapper = client.await_css(ZOOM_WRAPPER_CSS)
+ client.execute_script("arguments[0].click()", seat_map_zoom_wrapper)
+ seat_map = client.await_css(MAP_CSS)
+ moz_transform = client.execute_script(
+ "return getComputedStyle(arguments[0]).MozTransform", seat_map
+ )
+ zoom = client.execute_script("return getComputedStyle(arguments[0]).zoom", seat_map)
+ return (moz_transform in {"none", ""}) and (zoom not in {"", "none"})
+
+
+@pytest.mark.only_platforms("android")
+@pytest.mark.asyncio
+@pytest.mark.with_interventions
+async def test_enabled(client):
+ assert await does_correct_zoom(client)
+
+
+@pytest.mark.only_platforms("android")
+@pytest.mark.asyncio
+@pytest.mark.without_interventions
+async def test_disabled(client):
+ assert not await does_correct_zoom(client)
