From 1446864785e7ba7523e71acc41c69618fa16a777 Mon Sep 17 00:00:00 2001 From: CanadaHonk Date: Wed, 20 Sep 2023 14:25:54 +0000 Subject: [PATCH] Implement CSS attr() fallback Implemented support for fallback values in CSS attr(): `attr(, )` 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 --- css/css-values/attr-notype-fallback-ref.html | 33 ++++++++++++++++++ css/css-values/attr-notype-fallback.html | 35 ++++++++++++++++++++ css/cssom/serialize-values.html | 14 ++++++-- 3 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 css/css-values/attr-notype-fallback-ref.html create mode 100644 css/css-values/attr-notype-fallback.html diff --git a/css/css-values/attr-notype-fallback-ref.html b/css/css-values/attr-notype-fallback-ref.html new file mode 100644 index 000000000000000..efb9b969f3a1ea0 --- /dev/null +++ b/css/css-values/attr-notype-fallback-ref.html @@ -0,0 +1,33 @@ + + + +
+
+
+
+
+
\ No newline at end of file diff --git a/css/css-values/attr-notype-fallback.html b/css/css-values/attr-notype-fallback.html new file mode 100644 index 000000000000000..b88f3de4b571136 --- /dev/null +++ b/css/css-values/attr-notype-fallback.html @@ -0,0 +1,35 @@ + + + + + +
+
+
+
+
+
\ No newline at end of file diff --git a/css/cssom/serialize-values.html b/css/cssom/serialize-values.html index e92808af70d63a3..1482e7118974275 100644 --- 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