Bug 2024601 - patch 2 - Add evaluation tests involving substitution functions. r=firefox-style-system-reviewers,emilio

jfkthame · jfkthame · commit c3158e57d984 · 2026-04-01T09:37:18.000Z
The existing WPTs check that these forms can be parsed, but not that they actually work at matching time. So this adds a few examples to the query-evaluation test. They won't pass in Firefox until support for these functions is hooked up. (Confirmed that these work as expected in Chrome.) Differential Revision: https://phabricator.services.mozilla.com/D290903
diff --git a/testing/web-platform/meta/css/css-conditional/container-queries/query-evaluation-style.html.ini b/testing/web-platform/meta/css/css-conditional/container-queries/query-evaluation-style.html.ini
@@ -0,0 +1,19 @@
+[query-evaluation-style.html]
+
+  [style(1px < attr(xyzzy type(<length>)) < 10px)]
+    expected: FAIL
+
+  [style(1px < attr(plugh, 5px) < 10px)]
+    expected: FAIL
+
+  [style(1px < attr(plugh type(<length>), 5px) < 10px)]
+    expected: FAIL
+
+  [style(var(--unknown-prop, 20px) > 10px)]
+    expected: FAIL
+
+  [style(var(--prop, 5px) > 10px)]
+    expected: FAIL
+
+  [style(var(--length, 20px) < 10px)]
+    expected: FAIL
diff --git a/testing/web-platform/tests/css/css-conditional/container-queries/query-evaluation-style.html b/testing/web-platform/tests/css/css-conditional/container-queries/query-evaluation-style.html
@@ -45,7 +45,7 @@
     --foo: bar;
   }
 </style>
-<div id=container>
+<div id=container xyzzy="5px">
   <div id=inner data-foo="3px"></div>
 </div>
 <script>
@@ -239,10 +239,28 @@
   test_query_with_custom_properties('style(--x >= 3ms)',
                                   [['--x', '3px']],
                                   false);
-  test_query_with_custom_properties(`style(--length <= 30px)`,
+  test_query_with_custom_properties('style(--length <= 30px)',
                                   [['--length', 'attr(data-foo type(<length>))']],
                                   true);
 
+  // These should be true: the container has an attribute 'xyzzy="5px"',
+  // while 'plugh' is undefined so will use the default.
+  test_query('style(1px < attr(xyzzy type(<length>)) < 10px)', true);
+  test_query('style(1px < attr(plugh, 5px) < 10px)', true);
+  test_query('style(1px < attr(plugh type(<length>), 5px) < 10px)', true);
+  // This is false because the untyped attr() resolves to a string, not a length.
+  test_query('style(1px < attr(xyzzy) < 10px)', false);
+  test_query('style(1px < attr(plugh, "5px") < 10px)', false);
+
+  // var() function with a default value.
+  test_query('style(var(--unknown-prop, 20px) > 10px)', true);
+  test_query_with_custom_properties('style(var(--prop, 5px) > 10px)',
+                                    [['--prop', '15px']],
+                                    true);
+  test_query_with_custom_properties('style(var(--length, 20px) < 10px)',
+                                    [['--length', 'attr(data-foo type(<length>))']],
+                                    true);
+
   test_query('style(10px <= 10px < 11px)', true);
   test_query_with_custom_properties(
     'style(3 < --x <= 5)',
