[css-images-4] possible element() use cases for spec

[jsnkuhn]

possible element() use cases for spec. Firefox only right now (FF has only current implementation): https://codepen.io/jsnkuhn/pen/wFcqz?editors=1000

Example 1: a little more aesthetically pleasing example of background text from an element

Example 2: uses an inline SVG squircle as a mask-image

Example 3: was trying to do something with border-image but its not working well. Not sure if I borked something or if its an issue with the -moz implementation.

https://drafts.csswg.org/css-images-4/#element-notation

[SelenIT]

I believe it's Firefox implementation issue because the same SVG code works perfectly fine as url("data:image/svg+xml,%3Csvg width='16' height='16' viewbox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-width='2' fill='none' stroke='%23747474'%3E%3Cpath d='M3,3h10v10h-10z'/%3E%3Cg stroke-dasharray='8, 2' stroke-dashoffset='-1'%3E%3Cpath d='M3,3h10v10h-10z' stroke-width='6'/%3E%3Cpath d='M3,3h10v10h-10z' stroke='%23fcfcfc'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") in otherwise the same border-image declaration. It seems that the SVG doesn't scale in this case for some reason, regardless whether the SVG element is placed inside or outside the element is used as the source of element() for.

[jsnkuhn]

another possible border-image use example. binary text as borders:

https://codepen.io/jsnkuhn/pen/JjOyNqY?editors=1100

[jsnkuhn]

another one is masked text:

https://codepen.io/jsnkuhn/pen/jOYELoE?editors=1100

also should point out that the above binary text border-image seems to indicate that border-image works fine in -moz-element(). So example 3 in my first post was likely just a mistake on my end. I'll have another look at it.

[SelenIT]

My guess is that the bug is SVG-specific. Regular HTML elements as -moz-element() work fine for border-image, but SVGs have some scaling issues.

[jsnkuhn]

Another possibility:

This sort of thing is very easy to do with raster images because you could just reuse the same file path in the css and the img tag but if you're rocking a inline svg for an image/logo element() seems like the best option.

https://codepen.io/jsnkuhn/pen/dyJVObX?editors=1100

example uses background-blend-mode on the svg but this combine with the background-image manipulation from the @image suggestion in #6807 could give more control