Inline small SVG images in CSS with data: URLs

[lmorchard]

Fixes #3048

[codecov-io]

Codecov Report

Merging #3049 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3049   +/-   ##
=======================================
  Coverage   85.26%   85.26%           
=======================================
  Files         106      106           
  Lines        2953     2953           
=======================================
  Hits         2518     2518           
  Misses        435      435

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dffbc19...4e759a7. Read the comment docs.

[fzzzy]

For some reason, even though the data: urls that are generated properly and applied as the background-image url, the actual images aren't showing up.

STR:

• Visit https://example.com:8000, scroll to the bottom and type foo@example.com in the email box.
• Observe the checkbox does not show up (unless it is something weird about my particular machine).
• Right click on the "I'm ok with Mozilla..." notice and "Inspect Element".
• Click on the <label> element.
• Hover over the background: url("data:image/svg+xml,%3Csvg width='24' height='25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.2' y='.2' width='21.6' height='21.6' rx='2' transform='translate(1 1.667)' stroke-width='2' stroke='%23C1C1C1' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat left; rule.
  • Notice the image shows up as broken in the devtools preview.
• Click data:image/svg+xml,%3Csvg width='24' height='25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='.2' y='.2' width='21.6' height='21.6' rx='2' transform='translate(1 1.667)' stroke-width='2' stroke='%23C1C1C1' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E
  • The image opens in a new tab and it renders just fine.
  • ???

[lmorchard]

Doesn't seem like this actually fixed anything, and couldn't figure out why after some more poking. Just going to close for now