1448248 - Implement CSS attr(<attr-name>, <attr-fallback>)

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Sebastian Zartner [:sebo]]

The CSS Values and Units Module Level 3 extends the attr() function to optionally specify a fallback value, which is used if the named attribute is missing, or its value cannot be parsed into the given type or is invalid/out-of-range for the property.

This bug is meant to implement the basic functionality of the fallback value for the case the attribute is missing.

Sebastian

Comment 1

[Gérard Talbot]

Tests

background: attr(data-test color);
http://w3c-test.org/css/css-values/attr-color-valid.html

width: attr(data-test length);
http://w3c-test.org/css/css-values/attr-length-valid-zero-nofallback.html

width: attr(data-test length);
http://w3c-test.org/css/css-values/attr-length-valid.html

width: attr(data-test px);
http://w3c-test.org/css/css-values/attr-px-valid.html

Comment 2

[Oliver Medhurst [:canadahonk]]

Attachment: Bug 1448248 - Implement CSS attr() fallback

Implemented support for a fallback in CSS attr funcs
(attr(<attr-name>, <attr-fallback>))

Spec: https://drafts.csswg.org/css-values-5/#attr-notation

WIP. Todo:

• Parse fallback into variable
• Use fallback in C++
• Add WPT tests

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a14395d9ad06
Implement CSS attr() fallback r=emilio

Comment 4

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42079 for changes under testing/web-platform/tests

Comment 5

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/a14395d9ad06

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 7

[Oliver Medhurst [:canadahonk]]

Release Note Request (optional, but appreciated)
[Why is this notable]: New CSS feature supported
[Affects Firefox for Android]: Yes
[Suggested wording]: The CSS attr() function now supports a fallback parameter (eg attr(foobar, "Default value")). First browser to implement, and ship.
[Links (documentation, blog post, etc)]: None yet.

Comment 8

[Dianna Smith [:diannaS]]

Added to 119 beta release notes (https://www.mozilla.org/en-US/firefox/119.0beta/releasenotes/) as well as the Draft release notes for 119

Comment 9

[Dave Letorey]

• Content PR
• BCD PR

Comment 10

[Martin Thomson [:mt:]]

I don't know if this was intentional, but I don't think that this works.

Consider the following:

<style>
p { background-color: green; padding: attr(data-padding px, 10px); margin: 20px; }
</style>
<p>This has the default padding.</p>
<p data-padding=0>This has no padding.</p>
<p data-padding=30>This has triple padding.</p>

I see no padding in Firefox. Not 10px of padding. Chromium is fine.

The following works, which suggests that this is probably a parsing thing.

<style>
    div::after { content: attr(data-after, "nothing"); }
</style>
<div>The fox says:</div>
<div data-after="yo">The fox says:</div>

Comment 11

[Sebastian Zartner [:sebo]]

Firefox still only supports attr() in the content property, at the moment. See bug 435426 and the ones blocking it for the extensions to it and letting it apply to other properties. (The one for your example is bug 1871823.)

Sebastian

Comment 12

[Emilio Cobos Álvarez [:emilio]]

This works, but we only currently support attr() on the content property. Bug 435426 which is being worked on at the moment will fix your test case.

Comment 13

[Emilio Cobos Álvarez [:emilio]]

Hah, midaired, thx Sebastian :)