Implement CSS attr() fallback

Implemented support for fallback values in CSS attr(): `attr(<attr-name>, <attr-fallback>)` Full syntax supported as of this rev: `[namespace? `|`]? ident [`,` fallback]?` Spec: https://drafts.csswg.org/css-values-5/#attr-notation Also added a new WPT reftest for attr fallback without a type, and some new attr serialization WPTs (namespace and fallback). Differential Revision: https://phabricator.services.mozilla.com/D176801 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1448248 gecko-commit: a14395d9ad06c9f7462430341d4c7874020a58d0 gecko-reviewers: emilio
web-platform-tests · Sep 21, 2023 · 27a15a6 · 27a15a6 · nikijohnson4 · Oct 14, 2023
1 parent 90fef76
commit 27a15a6
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 2 deletions.
diff --git a/css/css-values/attr-notype-fallback-ref.html b/css/css-values/attr-notype-fallback-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<style>
+  #one::after {
+    content: "Fallback value";
+  }
+
+  #two::after {
+    content: "Not fallback value";
+  }
+
+  #three::after {
+    content: "";
+  }
+
+  #four::after {
+    content: "";
+  }
+
+  #five::after {
+    content: "";
+  }
+
+  #six::after {
+    content: "";
+  }
+</style>
+
+<div id="one"></div>
+<div id="two"></div>
+<div id="three"></div>
+<div id="four"></div>
+<div id="five"></div>
+<div id="six"></div>
diff --git a/css/css-values/attr-notype-fallback.html b/css/css-values/attr-notype-fallback.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notation">
+<link rel="match" href="attr-notype-fallback-ref.html">
+<style>
+  #one::after {
+    content: attr(does-not-exist, "Fallback value");
+  }
+
+  #two::after {
+    content: attr(does-exist, "Fallback value");
+  }
+
+  #three::after {
+    content: attr(does-not-exist, invalid);
+  }
+
+  #four::after {
+    content: attr(does-exist, invalid);
+  }
+
+  #five::after {
+    content: attr(does-exist, "Fallback value");
+  }
+
+  #six::after {
+    content: attr(does-exist, "Fallback value");
+  }
+</style>
+
+<div id="one"></div>
+<div id="two" does-exist="Not fallback value"></div>
+<div id="three"></div>
+<div id="four" does-exist="Not fallback value"></div>
+<div id="five" does-exist=""></div>
+<div id="six" does-exist></div>
diff --git a/css/cssom/serialize-values.html b/css/cssom/serialize-values.html
@@ -97,7 +97,17 @@
     }
 
     function attr() {
-      var values = ['attr(foo-bar)', 'attr(foo_bar)'];
+      var values = ['attr(foo-bar)', 'attr(foo_bar)',
+                    {actual: "attr(|bar)", serialized: "attr(bar)"},
+                    {actual: "attr( |bar )", serialized: "attr(bar)"}];
+      return iterable(values);
+    }
+
+    function attr_fallback() {
+      var values = ['attr(foo-bar, "fallback")', 'attr(foo_bar, "fallback")',
+                    {actual: 'attr(|bar, "fallback")', serialized: 'attr(bar, "fallback")'},
+                    {actual: 'attr(foo, "")', serialized: 'attr(foo)'},
+                    {actual: 'attr( |foo ,  "" )', serialized: 'attr(foo)'}];
       return iterable(values);
     }
 
@@ -377,7 +387,7 @@
         'initial': 'black', //FIXME depends on user agent
       }],
       ['content', {
-        'values': ['normal', 'none', string, uri, counter, attr, 'inherit'], //FIXME
+        'values': ['normal', 'none', string, uri, counter, attr, attr_fallback, 'inherit'], //FIXME
         'initial': 'normal',
       }],
       //counter-increment