| <!DOCTYPE html> |
| <!-- Test for the Expedia Group menu animation quirk (https://webkit.org/b/312549, |
| extending https://webkit.org/b/308116 / https://webkit.org/b/312212). |
| 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. |
| The same UITK design system is shipped across the Expedia Group portfolio |
| (hotels.com, expedia.*, orbitz.com, travelocity.*, wotif.*, etc.). --> |
| <head> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| </head> |
| <style> |
| /* Mirrors the relevant Expedia Group CSS that this quirk is meant to fix. |
| The real sites use @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 Expedia Group menu, per the quirk's CSS selector. |
| uitk-menu-open is required: the quirk only fires when the menu is actively opening. --> |
| <div class="uitk-menu-mounted"> |
| <div id="target" class="uitk-menu-container uitk-menu-container-autoposition uitk-menu-container-has-intersection-root-el uitk-menu-open"></div> |
| </div> |
| <script> |
| "use strict"; |
| |
| const groupURLs = [ |
| "https://www.carrentals.com", |
| "https://www.cheaptickets.com", |
| "https://www.ebookers.de", |
| "https://www.expedia.com", |
| "https://www.expedia.fr", |
| "https://www.hoteis.com", |
| "https://www.hoteles.com", |
| "https://www.hotels.com", |
| "https://www.mrjet.se", |
| "https://www.orbitz.com", |
| "https://www.travelocity.ca", |
| "https://www.travelocity.com", |
| "https://www.wotif.co.nz", |
| "https://www.wotif.com", |
| ]; |
| |
| // Mutating inline style marks the element dirty so the next getComputedStyle |
| // re-runs the quirks-aware style adjuster instead of returning a cached value. |
| let invalidationCounter = 0; |
| function forceStyleRecalc(el) { |
| el.style.setProperty("--quirk-test-tick", String(++invalidationCounter)); |
| } |
| |
| for (const url of groupURLs) { |
| test(function() { |
| assert_true(!!window.internals, "This test requires window.internals"); |
| window.internals.setTopDocumentURLForQuirks(url); |
| |
| const target = document.getElementById("target"); |
| forceStyleRecalc(target); |
| const style = getComputedStyle(target); |
| |
| const animations = style.animationName; |
| 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"); |
| |
| const delays = style.animationDelay; |
| assert_true(delays.includes("0s") || delays.includes("0.06s"), |
| "quirk should set correct animation delays (0s, 0.06s); got: " + delays); |
| 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); |
| }, "Expedia Group animation quirk applies on " + url); |
| } |
| |
| test(function() { |
| assert_true(!!window.internals, "This test requires window.internals"); |
| window.internals.setTopDocumentURLForQuirks("https://www.example.com"); |
| |
| const target = document.getElementById("target"); |
| forceStyleRecalc(target); |
| const animations = getComputedStyle(target).animationName; |
| assert_equals(animations, "none", "quirk must not fire on a non-Expedia-Group host"); |
| }, "Expedia Group animation quirk does not apply on unrelated hosts"); |
| </script> |
| </body> |
| </html> |
