SVG with internal CSS Styling not applied

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
jegub

SVG with internal CSS Styling not applied

Unread post by jegub » 2018-03-28, 11:53

Hello,
Apologies if this is has been covered already, I looked through the search results for 'SVG' and suspect it might be related to one of the security fixes.
A SVG with CSS incorporated will animate in a webpage as an externally linked image or a data URI in Firefox V59.0.1 (64-bit) and Iridium 2017.11 (64-bit), but will not do so in Pale Moon V27.8.2 (64-bit, desktop). If the SVG file is opened directly in Pale Moon then it will animate. Pale Moon was opened in safe mode in case it was related to an add-on, and the same was observed in a fresh copy of Pale Moon Portable V27.8.2 (64-bit).

(Dell Latitude 13 7350 running Win8.1 Pro, also seen with the same version of Pale Moon on a generic desktop running Win7 SP1.)

svgcsstest.svg

Code: Select all

<svg viewBox="0 0 198 164" xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"><style type="text/css"><![CDATA[.knot { stroke-dasharray: 250; stroke-dashoffset: 0; transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation: d 4s infinite alternate; } @keyframes d { to { stroke-dashoffset: 250; } }]]></style><path class="knot" d="M107.699 126.515c12.338-12.338 17.74-10.639 21.162-27.748l4.706-23.534c3.138-15.69-8.313-38.434-34.353-68.233-26.04 29.8-37.491 52.544-34.353 68.233m4.706 23.534c3.422 17.11 8.824 15.41 21.162 27.748l16.97 16.97c11.314 11.314 39.223 13.519 83.729 6.614-16.609-37.36-32.758-57.608-48.447-60.746m-23.534-4.706c-19.84-3.968-20.626-3.968-40.466 0l-23.534 4.706C39.758 92.491 23.609 112.74 7 150.1c44.506 6.905 72.415 4.7 83.729-6.614" stroke-width="14" stroke-linecap="butt" fill="none" stroke="#000" fill-rule="evenodd" stroke-linejoin="bevel"/></svg>
svgcsstest.html

Code: Select all

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>SVG Internal CSS Test</title> </head>
<body> 
<img width="480px" src="data:image/svg+xml,%3csvg viewBox='0 0 198 164' xmlns='http://www.w3.org/2000/svg' version='1.2' baseProfile='tiny'%3e%3cstyle type='text/css'%3e%3c!%5bCDATA%5b.knot %7b stroke-dasharray: 250%3b stroke-dashoffset: 0%3b transition-timing-function: cubic-bezier(0.42%2c 0%2c 0.58%2c 1)%3b animation: d 4s infinite alternate%3b %7d %40keyframes d %7b to %7b stroke-dashoffset: 250%3b %7d %7d%5d%5d%3e%3c/style%3e%3cpath class='knot' d='M107.699 126.515c12.338-12.338 17.74-10.639 21.162-27.748l4.706-23.534c3.138-15.69-8.313-38.434-34.353-68.233-26.04 29.8-37.491 52.544-34.353 68.233m4.706 23.534c3.422 17.11 8.824 15.41 21.162 27.748l16.97 16.97c11.314 11.314 39.223 13.519 83.729 6.614-16.609-37.36-32.758-57.608-48.447-60.746m-23.534-4.706c-19.84-3.968-20.626-3.968-40.466 0l-23.534 4.706C39.758 92.491 23.609 112.74 7 150.1c44.506 6.905 72.415 4.7 83.729-6.614' stroke-width='14' stroke-linecap='butt' fill='none' stroke='black' fill-rule='evenodd' stroke-linejoin='bevel'/%3e%3c/svg%3e">
<img width="480px" src="svgcsstest.svg">
</body>
</html>

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35473
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: SVG with internal CSS Styling not applied

Unread post by Moonchild » 2018-03-28, 15:18

Looks like an old regression in Mozilla code that was fixed in bug #1190881.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Locked