Bug 118894 – [CSS blending] Background-blend-mode doesn't apply for an SVG image with css border-style or padding property set

• Component: CSS
• Status: RESOLVED FIXED

[Mirela]

Created attachment 207072 [details]
Sample file

Setting a border-style or padding property for a div with an SVG background image results in background-blending not being applied.

Sample code:

<style>
div { 
	border: 5px navy;
	border-style: dotted double;
	padding: 8.5px;
	background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBmaWxsPSJyZWQiLz4KPC9zdmc+'), green;
       width: 200px;
      height: 200px;
}
</style>
<div style="-webkit-background-blend-mode: screen;"></div>

[Horia Olaru]

I tested this with the current nightly: Version 6.0.5 (8536.30.1, 538+)

I can reproduce this only using border-style. If I take out the border, and leave only the padding, background blending works.

Also,the bug reproduces even without the padding added.
This only seems to reproduce with data uri svg images. I could not reproduce it with a local file svg (url).

It is probably worth checking if this reproduces with data uri non-svg images.

[Mirela]

The same issue for:

	background-origin: content-box;
        background-size:  - specified in pixels and percent (e.g. 50% 50%; and 100px 100px; )

[Mihai Tica]

Created attachment 221041 [details]
Patch

[WebKit Commit Bot]

Attachment 221041 [details] did not pass style-queue:

Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'LayoutTests/ChangeLog', u'LayoutTests/css3/compositing/background-blend-mode-data-uri-svg-image.html', u'LayoutTests/platform/mac/css3/compositing/background-blend-mode-data-uri-svg-image-expected.png', u'LayoutTests/platform/mac/css3/compositing/background-blend-mode-data-uri-svg-image-expected.txt', u'Source/WebCore/ChangeLog', u'Source/WebCore/svg/graphics/SVGImage.cpp', u'Source/WebCore/svg/graphics/SVGImage.h', u'Source/WebCore/svg/graphics/SVGImageForContainer.cpp', '--commit-queue']" exit_code: 1
Traceback (most recent call last):
  File "Tools/Scripts/check-webkit-style", line 48, in <module>
    sys.exit(CheckWebKitStyle().main())
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/main.py", line 154, in main
    patch_checker.check(patch)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/patchreader.py", line 71, in check
    self._text_file_reader.process_file(file_path=path, line_numbers=None)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/filereader.py", line 118, in process_file
    lines = self._read_lines(file_path)
  File "/Volumes/Data/StyleQueue/WebKit/Tools/Scripts/webkitpy/style/filereader.py", line 86, in _read_lines
    contents = file.read()
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/codecs.py", line 671, in read
    return self.reader.read(size)
  File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/codecs.py", line 477, in read
    newchars, decodedbytes = self.decode(data, self.errors)
UnicodeDecodeError: 'utf8' codec can't decode byte 0x89 in position 0: invalid start byte


If any of these errors are false positives, please file a bug against check-webkit-style.

[Mihai Tica]

Created attachment 221114 [details]
Patch for review

Replacing pixel with ref test

[Dirk Schulze]

Comment on attachment 221114 [details]
Patch for review

View in context: https://bugs.webkit.org/attachment.cgi?id=221114&action=review

> LayoutTests/css3/compositing/background-blend-mode-data-uri-svg-image-expected.html:7
> +        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiPg0KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iIzBGMCIvPg0KPC9zdmc+'), #FF0;

please no base64 encoded SVGs, normal data urls with readable SVG please.

> LayoutTests/css3/compositing/background-blend-mode-data-uri-svg-image.html:7
> +        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiPg0KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgZmlsbD0iI0YwMCIvPg0KPC9zdmc+'), #FF0;

Ditto.

[Mihai Tica]

Created attachment 221120 [details]
Patch

Converted SVG encoding to UTF8

[WebKit Commit Bot]

Comment on attachment 221120 [details]
Patch

Clearing flags on attachment: 221120

Committed r161964: <http://trac.webkit.org/changeset/161964>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Alexey Proskuryakov]

These tests are now failing on Mavericks Debug bots:

css3/compositing/background-blend-mode-crossfade-image.htmlhistory
css3/compositing/background-blend-mode-data-uri-svg-image.html

One looks like a color diff, another is antialiasing.

[Alexey Proskuryakov]

Not sure if it's this change that is to blame, there were multiple related changes landed at once, and tested at once.

[Dirk Schulze]

(In reply to comment #11)
> Not sure if it's this change that is to blame, there were multiple related changes landed at once, and tested at once.

(In reply to comment #10)
> These tests are now failing on Mavericks Debug bots:
> 
> css3/compositing/background-blend-mode-crossfade-image.htmlhistory
> css3/compositing/background-blend-mode-data-uri-svg-image.html
> 
> One looks like a color diff, another is antialiasing.



I think we can deal with these tests differently. It should be easy to find a compositing mode that calculates to black if one layer is red and the other green. We should roll the patch out and redo the tests.

[WebKit Commit Bot]

Re-opened since this is blocked by bug 126988

[Alexey Proskuryakov]

This change was responsible for css3/compositing/background-blend-mode-data-uri-svg-image.html failures seen on some of the bots: <http://build.webkit.org/results/Apple%20Mavericks%20Debug%20WK2%20(Tests)/r161973%20(1629)/css3/compositing/background-blend-mode-data-uri-svg-image-diffs.html>.

This looks like an antialiasing only diff.

Complete history: <http://webkit-test-results.appspot.com/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=css3%2Fcompositing%2Fbackground-blend-mode-data-uri-svg-image.html>.

For some reason, this bug cannot be re-opened!

[David Kilzer (:ddkilzer)]

Attempting to reopen with Web Inspector editing of the form.

[Mihai Tica]

Created attachment 221239 [details]
Includes tests with rects instead of circles

Adding a new version of the patch that uses rectangles in the tests instead of circles. Also skipping efl for the test and testing the hardware path.

[Dirk Schulze]

Comment on attachment 221239 [details]
Includes tests with rects instead of circles

That looks better, lets wait for the bots first.

[WebKit Commit Bot]

Comment on attachment 221239 [details]
Includes tests with rects instead of circles

Clearing flags on attachment: 221239

Committed r162066: <http://trac.webkit.org/changeset/162066>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Alexey Proskuryakov]

The test ails on some bots again:

http://build.webkit.org/results/Apple%20MountainLion%20Debug%20WK2%20(Tests)/r162066%20(15344)/css3/compositing/background-blend-mode-data-uri-svg-image-diffs.html

http://webkit-test-results.appspot.com/dashboards/flakiness_dashboard.html#showAllRuns=true&revision=162066&tests=css3%2Fcompositing%2Fbackground-blend-mode-data-uri-svg-image.html

[Alexey Proskuryakov]

Looks like neither author nor reviewer are available to advise on the best course of action, so rolling out again.

[WebKit Commit Bot]

Re-opened since this is blocked by bug 127056

[Mihai Tica]

Created attachment 221348 [details]
Updated test expectations on mac

This patch skips the added test on mac as the result from applying blending is slightly different than the result of the blending formula.

[Mihai Tica]

Created attachment 221350 [details]
Patch

Add Pass aswell for test on mac

[WebKit Commit Bot]

Comment on attachment 221350 [details]
Patch

Clearing flags on attachment: 221350

Committed r162341: <http://trac.webkit.org/changeset/162341>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.