1601192 - foreignObject border styling not working

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Ryu Decade]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

I don't know if this is the only style that doesn't work.

I used this code from MDN to test it in codepen.io

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
.test {
color: white;
font: 18px serif;
height: 100px;
overflow: auto;
}
</style>

<polygon points="5,5 195,10 185,185 10,195" />

<foreignObject x="20" y="20" width="160" height="160" style="border: 10px solid blue">
<div xmlns="http://www.w3.org/1999/xhtml" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.
</div>
</foreignObject>
</svg>

Actual results:

Firefox doesn't display the blue border around the div while chromium does.

Expected results:

Firefox should've display the blue border around the div

Comment 1

[Pablo]

I also tested on Windows 10 64bit with the following versions:

FF Nightly 73.0a1
FF Beta 72.0b4
FF Release 71.0

All are affected. I will check just in case on Ubunty and MacOs.

Comment 2

[Robert Longson [:longsonr]]

border is not an inherited style and it doesn't apply to SVG elements per https://www.w3.org/TR/SVG2/styling.html#RequiredProperties

Comment 3

[Ryu Decade]

(In reply to Robert Longson [:longsonr] from comment #2)

border is not an inherited style and it doesn't apply to SVG elements per https://www.w3.org/TR/SVG2/styling.html#RequiredProperties

So it's a bug on chrome and not on firefox?

Comment 4

[Robert Longson [:longsonr]]

yup.