1372086 - SVG image in content property should be shown

Status: VERIFIED DUPLICATE of bug 215083

(Core :: Layout, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin off of https://webcompat.com/issues/7321
where we test tier1 of Google when emulating a Chrome User agent on Gecko Android.
Currently Google is not sending the tier1 experience to Fennec (Firefox Android).


https://drafts.csswg.org/css-content-3/#content-property

This test case:
also at https://codepen.io/webcompat/pen/NgNLVo

<div style="content: url(data:image/svg+xml,%0A%3Csvg%20focusable%3D%22false%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23717171%22%20d%3D%22M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%0A);"> </div>

should display a magnifier. It does on Chrome.

Comment 1

[Xidorn Quan [:xidorn] UTC+10]

The old summary is too vague. We do support CSS content 3 to some extent, and there is nothing in the spec seems to explicitly state how SVG should be handled.

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This looks like it's just a duplicate of bug 215083.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(I tested that if I change the style in https://codepen.io/webcompat/pen/NgNLVo from '.content' to '.content::before' then the magnifying glass shows up.)

Comment 5

[Levente Sacal]

Marking this as verified from a QA perspective. Let me know if this is not correct.