commit 42e365e57bda8611466b7546a6651311bcb72e24
parent e9235dbea71cf95883b5dd48ef668a858c2119b0
Author: Steinar H. Gunderson <sesse@chromium.org>
Date: Thu, 6 Nov 2025 21:33:35 +0000
Bug 1997560 [wpt PR 55787] - Add negative media queries to mixin invalidation information., a=testonly
Automatic update from web-platform-tests
Add negative media queries to mixin invalidation information.
If a media query returned false, we'd assume it couldn't affect mixin
invalidation; however, it obviously can (because if the media query
flips from false to true, it would expose the mixin). Thus, go through
and look for mixins even in media queries that don't match right now.
Bug: 406935599
Change-Id: If15bd63dc67ee4af83029837823892fdd5827258
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7106183
Commit-Queue: Steinar H Gunderson <sesse@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Auto-Submit: Steinar H Gunderson <sesse@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1538539}
--
wpt-commits: 31135a6f80f0ea98a5eed30c0550513196dcd9c5
wpt-pr: 55787
Diffstat:
1 file changed, 39 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-mixins/mixin-media-query-invalidation-2.html b/testing/web-platform/tests/css/css-mixins/mixin-media-query-invalidation-2.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+ <head>
+ <title>CSS Mixins: Invalidates on negative media query becoming positive</title>
+ <link rel="help" href="https://drafts.csswg.org/css-mixins/#mixin-rule">
+ <script src="/resources/testharness.js"></script>
+ <script src="/resources/testharnessreport.js"></script>
+ </head>
+ <body>
+ <iframe id="iframe" width="500" height="300" srcdoc="
+ <style>
+ @mixin --m1() {
+ color: red;
+ }
+ @media (width < 50px) {
+ @mixin --m1() {
+ color: green;
+ }
+ }
+ </style>
+ <style>
+ /* Invalidated by a mixin in a different style sheet. */
+ #target {
+ @apply --m1;
+ }
+ </style>
+ <div id='target'>This text should be green once narrowed.</div>
+ "></iframe>
+ <script>
+ promise_test(async () => {
+ await new Promise(r => iframe.addEventListener('load', r));
+
+ let target = iframe.contentDocument.getElementById('target');
+ assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)");
+ iframe.width = 30;
+ assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)");
+ });
+ </script>
+</body>
+</html>
