Adjust Quirks for hotels.com to remove the flickering

karlcow · karlcow · commit 381ad0cbb2cd · 2026-03-04T21:04:37.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=308116 rdar://170331800 Reviewed by Brandon Stewart, Antoine Quint, and Sam Weinig. The previous quirk stopped working, but the markup and CSS do not seem to have changed at all. This is another strategy to make it work. The flickering doesn't happen. * LayoutTests/fast/css/hotels-animation-quirk.html: Added Test for making sure any future changes will not break this quirk. * LayoutTests/fast/css/hotels-animation-quirk-expected.txt: Added. * Source/WebCore/page/Quirks.cpp: (WebCore::Quirks::needsHotelsAnimationQuirk const): * Source/WebCore/style/StyleAdjuster.cpp: (WebCore::Style::Adjuster::adjustForSiteSpecificQuirks const): Canonical link: https://commits.webkit.org/308678@main
diff --git a/LayoutTests/fast/css/hotels-animation-quirk-expected.txt b/LayoutTests/fast/css/hotels-animation-quirk-expected.txt
@@ -0,0 +1,4 @@
+
+PASS hotels.com animation quirk overrides animation:none for the menu container element
+PASS hotels.com animation quirk sets correct animation-delay and animation-duration
+
diff --git a/LayoutTests/fast/css/hotels-animation-quirk.html b/LayoutTests/fast/css/hotels-animation-quirk.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- Test for hotels.com animation quirk (https://webkit.org/b/308116)
+     The quirk restores menu-grow-left and menu-fade-in animations for elements
+     matching .uitk-menu-mounted .uitk-menu-container.uitk-menu-container-autoposition.uitk-menu-container-has-intersection-root-el
+     which otherwise receive animation:none from a @supports (-webkit-hyphens:none) block on the real site. -->
+<head>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+</head>
+<style>
+/* Mirrors the relevant hotels.com CSS that this quirk is meant to fix.
+   The real site uses @supports (-webkit-hyphens:none) and (stroke-color:transparent)
+   to set animation:none on Safari, overriding the intended open-menu animations. */
+.uitk-menu-mounted .uitk-menu-container.uitk-menu-container-autoposition.uitk-menu-container-has-intersection-root-el {
+    animation: none;
+}
+</style>
+<body>
+<!-- Minimal DOM structure matching the hotels.com menu, per the quirk's CSS selector -->
+<div class="uitk-menu-mounted">
+    <div id="target" class="uitk-menu-container uitk-menu-container-autoposition uitk-menu-container-has-intersection-root-el"></div>
+</div>
+<script>
+"use strict";
+
+if (window.internals)
+    window.internals.setTopDocumentURLForQuirks("https://www.hotels.com");
+
+test(function() {
+    assert_true(!!window.internals, "This test requires window.internals");
+
+    const target = document.getElementById("target");
+    const animations = getComputedStyle(target).animationName;
+    // Without the quirk, the element would have animationName "none" due to the CSS above.
+    // With the quirk, WebCore overrides the computed style to apply the two named animations.
+    assert_not_equals(animations, "none", "animation:none should be overridden by the quirk");
+    assert_true(animations.includes("menu-grow-left"), "quirk should apply menu-grow-left animation");
+    assert_true(animations.includes("menu-fade-in"), "quirk should apply menu-fade-in animation");
+}, "hotels.com animation quirk overrides animation:none for the menu container element");
+
+test(function() {
+    assert_true(!!window.internals, "This test requires window.internals");
+
+    const target = document.getElementById("target");
+    const style = getComputedStyle(target);
+    // animation-delay: 0s for menu-grow-left, 0.06s for menu-fade-in
+    const delays = style.animationDelay;
+    assert_true(delays.includes("0s") || delays.includes("0.06s"),
+        "quirk should set correct animation delays (0s, 0.06s); got: " + delays);
+    // animation-duration: 0.18s for menu-grow-left, 0.06s for menu-fade-in
+    const durations = style.animationDuration;
+    assert_true(durations.includes("0.18s") || durations.includes("0.06s"),
+        "quirk should set correct animation durations (0.18s, 0.06s); got: " + durations);
+}, "hotels.com animation quirk sets correct animation-delay and animation-duration");
+</script>
+</body>
+</html>
diff --git a/Source/WebCore/style/StyleAdjuster.cpp b/Source/WebCore/style/StyleAdjuster.cpp
@@ -1064,16 +1064,18 @@ void Adjuster::adjustForSiteSpecificQuirks(RenderStyle& style) const
         //     animation-fill-mode: none, forwards;
         //     animation-name: menu-grow-left, menu-fade-in;
         auto menuGrowLeftAnimation = Style::Animation { { ScopedName { "menu-grow-left"_s } } };
+        menuGrowLeftAnimation.setDelay(0_css_s);
         menuGrowLeftAnimation.setDuration(.18_css_s);
+        menuGrowLeftAnimation.setFillMode(AnimationFillMode::None);
 
         auto menuFadeInAnimation = Style::Animation { { ScopedName { "menu-fade-in"_s } } };
         menuFadeInAnimation.setDelay(.06_css_s);
         menuFadeInAnimation.setDuration(.06_css_s);
         menuFadeInAnimation.setFillMode(AnimationFillMode::Forwards);
 
         auto& animations = style.ensureAnimations();
-        animations.append(WTF::move(menuGrowLeftAnimation));
-        animations.append(WTF::move(menuFadeInAnimation));
+        animations = Style::Animations { WTF::move(menuGrowLeftAnimation), WTF::move(menuFadeInAnimation) };
+        animations.prepareForUse();
     }
 
 #if PLATFORM(IOS_FAMILY)

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
++
 +PASS hotels.com animation quirk overrides animation:none for the menu container element
 +PASS hotels.com animation quirk sets correct animation-delay and animation-duration
++