commit bf41e0b41f38fea5db910c4d6d34278232aa02ee parent bd66d5a76220f572874d225764fea919f3a09885 Author: Tim Nguyen <nt1m@users.noreply.github.com> Date: Thu, 9 Oct 2025 16:28:10 +0000 Bug 1991195 [wpt PR 55088] - Fix VT reftests to account for Safari dynamically colored scrollbar tracks, a=testonly Automatic update from web-platform-tests Fix VT reftests to account for Safari dynamically colored scrollbar tracks (#55088) Since macOS Tahoe, Safari has started dynamically coloring the scrollbar tracks based on the root background color. This has lead many reftests to start failing, since they are no longer using the same fixed track background like other browsers. To fix this, we either hide the scrollbar using scrollbar-width: none when the scrollbar isn't critical to the test, or change the root background color to trump the track color heuristic. -- wpt-commits: c8857a02615b2fe02a8ad481023f1f5ef9acec30 wpt-pr: 55088 Diffstat:
14 files changed, 37 insertions(+), 2 deletions(-)
diff --git a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text-ref.html b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text-ref.html @@ -8,6 +8,7 @@ <style> :root { font: 20px/1 Ahem; + scrollbar-width: none; } #target { diff --git a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html @@ -13,6 +13,7 @@ <style> :root { font: 20px/1 Ahem; + scrollbar-width: none; } #target { text-shadow: red -20px -50px; diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants-ref.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants-ref.html @@ -5,6 +5,9 @@ <link rel="author" href="mailto:vmpstr@chromium.org"> <style> +:root { + scrollbar-width: none; +} body { background: pink; } diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html @@ -8,6 +8,9 @@ <script src="/common/reftest-wait.js"></script> <style> +:root { + scrollbar-width: none; +} .target { width: 100px; height: 100px; diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html @@ -3,6 +3,9 @@ <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:vmpstr@chromium.org"> <style> +:root { + scrollbar-width: none; +} .target { contain: paint; width: 100px; diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html @@ -7,6 +7,9 @@ <script src="/common/reftest-wait.js"></script> <style> +:root { + scrollbar-width: none; +} .target { contain: paint; width: 100px; diff --git a/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object-ref.html b/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object-ref.html @@ -5,6 +5,10 @@ <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> +:root { + scrollbar-width: none; +} + body { width: 100vw; height: 100vh; diff --git a/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object.html b/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object.html @@ -7,6 +7,10 @@ <script src="/common/reftest-wait.js"></script> <style> +:root { + scrollbar-width: none; +} + body { width: 100vw; height: 100vh; diff --git a/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored-ref.html b/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored-ref.html @@ -4,6 +4,9 @@ <link rel="author" href="mailto:vmpstr@chromium.org"> <style> +:root { + scrollbar-width: none; +} body { background: pink } #spacer { width: 100px; diff --git a/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored.html b/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored.html @@ -7,6 +7,9 @@ <script src="/common/reftest-wait.js"></script> <style> +:root { + scrollbar-width: none; +} #spacer { width: 100px; height: 950px; diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block-ref.html b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block-ref.html @@ -5,6 +5,9 @@ <link rel="author" href="mailto:khushalsagar@chromium.org"> <style> + :root { + scrollbar-width: none; + } .outer { transform: scale3d(2, 2, 1); width: 100vw; diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html @@ -9,6 +9,9 @@ <script src="/common/reftest-wait.js"></script> <script src="/common/rendering-utils.js"></script> <style> + :root { + scrollbar-width: none; + } .outer { transform: scale(2); width: 100vw; diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html @@ -1,5 +1,5 @@ <!DOCTYPE html> -<html class="reftest-wait"> +<html class="reftest-wait" style="background: lightblue;"> <title>View transitions: capture root element with scrollbar (ref)</title> <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> <link rel="author" href="mailto:khushalsagar@chromium.org"> diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html @@ -10,7 +10,8 @@ <style> :root { view-transition-name: none; - background-color: red; + background-color: limegreen; + box-shadow: 0 0 0 10px inset red; } body {