Closed Bug 1684958 Opened 3 years ago Closed 1 year ago

Implement full <image> syntax for 'content' property

Categories

(Core :: CSS Parsing and Computation, enhancement)

enhancement

Tracking

()

RESOLVED FIXED
113 Branch
Tracking Status
firefox113 --- fixed

People

(Reporter: sebo, Assigned: emilio)

References

(Blocks 3 open bugs, )

Details

(Keywords: dev-doc-needed)

Attachments

(1 file)

The CSS Generated Content Module Level 3 specifies that the content property can take a <content-replacement> value which is an alias for <image>.

According to CSS Images Module Level 3 this includes support for gradients. Furthermore, CSS Images Module Level 4 extends the syntax for <image>.

This means, the content property should have complete support for all <image> values.

Sebastian

See Also: → 1696314
Duplicate of this bug: 1821807
No longer depends on: content-url-element
Duplicate of this bug: 1806233

We implemented support for list-style-image anyways.

Assignee: nobody → emilio
Status: NEW → ASSIGNED
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ee3d083f9512
Support rendering content: <gradient> images. r=dholbert,devtools-reviewers
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/38980 for changes under testing/web-platform/tests
Upstream PR merged by moz-wptsync-bot

The linear gradients are not working with the ::before & ::after psuedo selectors

This works fine with out the psuedo selectors and replaces the content correctly.

They also do not work with the psuedo selector when using linear-gradients inside image-set()

Here is a codepen with my test for this:
https://codepen.io/CodeRedDigital/pen/poxVmyq?editors=1100

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: