#36348: ManifestStaticFilesStorage breaks CSS containing data: URIs with
multiple
nested url()s
-------------------------------------+-------------------------------------
Reporter: Samuel Cormier- | Owner: Samuel
Iijima | Cormier-Iijima
Type: Bug | Status: closed
Component: contrib.staticfiles | Version: 5.2
Severity: Normal | Resolution: invalid
Keywords: | Triage Stage:
| Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Samuel Cormier-Iijima):
Sure, I had shortened the example to make the issue clearer, but this
happens with valid SVGs. Here's a
[https://editsvgcode.com/9sw9316mzb9m9vjjz4t sample valid SVG file]:
{{{
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg";>
<filter id="blur1">
<feGaussianBlur stdDeviation="2" />
</filter>
<filter id="blur2">
<feGaussianBlur stdDeviation="5" />
</filter>
<rect width="50" height="50" x="10" y="10" fill="red"
filter="url(#blur1)" />
<rect width="50" height="50" x="40" y="40" fill="blue"
filter="url(#blur2)" />
</svg>
}}}
If this gets inlined into CSS with a data: URI, the resulting CSS file
looks like this:
{{{
#example {
background-image: url("data:image/svg+xml,%3Csvg width='100'
height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter
id='blur1'%3E%3CfeGaussianBlur stdDeviation='2' /%3E%3C/filter%3E%3Cfilter
id='blur2'%3E%3CfeGaussianBlur stdDeviation='5' /%3E%3C/filter%3E%3Crect
width='50' height='50' x='10' y='10' fill='red' filter='url(%23blur1)'
/%3E%3Crect width='50' height='50' x='40' y='40' fill='blue'
filter='url(%23blur2)' /%3E%3C/svg%3E");
}
}}}
When this then gets processed by Django's collectstatic, the output is
this:
{{{
#example {
background-image: url("data:image/svg+xml,%3Csvg width='100'
height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter
id='blur1'%3E%3CfeGaussianBlur stdDeviation='2' /%3E%3C/filter%3E%3Cfilter
id='blur2'%3E%3CfeGaussianBlur stdDeviation='5' /%3E%3C/filter%3E%3Crect
width='50' height='50' x='10' y='10' fill='red' filter='url(%23blur1)'
/%3E%3Crect width='50' height='50' x='40' y='40' fill='blue'
filter='url("#blur2")' /%3E%3C/svg%3E");
}
}}}
Notice that the second use of filter has been changed to `url("#blur2")` -
because this has the double quotes this CSS is invalid.
--
Ticket URL: <https://code.djangoproject.com/ticket/36348#comment:5>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/d/msgid/django-updates/01070196688332e2-312fc3d6-28ea-4ee1-8163-d2f9f3b4034e-000000%40eu-central-1.amazonses.com.
