Bug 42417 - Inline data images break if they contain linefeeds in the style="" attribute
Summary: Inline data images break if they contain linefeeds in the style="" attribute
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-07-15 15:42 PDT by Cabel Sasser
Modified: 2022-07-12 12:58 PDT (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Cabel Sasser 2010-07-15 15:42:23 PDT
When using Base64 inline image data in an src="", you can wrap lines and the image will display properly.

For example, this:

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Works fine, even though lines are wrapped. A red dot will appear.

However, if you use the same image data in a style="", with these newlines, the image will break.

<div style="width: 20px; height: 20px; background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==') top left no-repeat;"></div>

The image will not appear. Instead, you must put all the data on one line:

<div style="width: 20px; height: 20px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==') top left no-repeat;"></div>

So, why does this matter? It's marginally interesting.

Apple's mail server (and presumably others) wrap all e-mail lines at 990 characters. We're using an inline image in a style="", but this hard-wrapping means newlines are being inserted into the Base64 data, and this breaks the image for Apple employees. And since we cannot wrap the image manually due to this bug (avoiding the mail server's wrapping), inline images can't be used for Apple e-mails!

The attached test document mirrors these examples. You should see three red dots. However, the middle one is missing.
Comment 1 Brent Fulgham 2022-07-12 12:58:14 PDT
It seems that all browsers match this behavior.