1684958 - Implement full <image> syntax for 'content' property

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Sebastian Zartner [:sebo]]

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

Comment 2

[Daniel Holbert [:dholbert]]

Note, https://wpt.fyi/results/css/css-images/image-set/image-set-parsing.html depends on this feature. See dupe bug 1821807 comment 0 for specific subtests.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1684958 - Support rendering content: <gradient> images. r=dholbert,#layout

We implemented support for list-style-image anyways.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ee3d083f9512
Support rendering content: <gradient> images. r=dholbert,devtools-reviewers

Comment 6

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

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

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1029d4dcb353
Fix test_bug877690.html.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a7595ae72e42
Annotate more test passes.

Comment 9

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/ee3d083f9512
https://hg.mozilla.org/mozilla-central/rev/1029d4dcb353
https://hg.mozilla.org/mozilla-central/rev/a7595ae72e42

Comment 10

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

Upstream PR merged by moz-wptsync-bot

Comment 11

[Dave Letorey]

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

Comment 12

[Daniel Holbert [:dholbert]]

I spun off bug 1832901 for comment 11.