Summary: | [CSS blending] Background-blend-mode doesn't apply for an SVG image with css border-style or padding property set | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Mirela <mbudaes> | ||||||||||||||||
Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||||||||||||
Status: | RESOLVED FIXED | ||||||||||||||||||
Severity: | Normal | CC: | bunhere, cdumez, commit-queue, ddkilzer, d-r, fmalita, gyuyoung.kim, krit, lforschler, mihnea, olaru, pdr, rakuco, schenney, WebkitBugTracker | ||||||||||||||||
Priority: | P2 | ||||||||||||||||||
Version: | 528+ (Nightly build) | ||||||||||||||||||
Hardware: | Unspecified | ||||||||||||||||||
OS: | Unspecified | ||||||||||||||||||
Bug Depends on: | 126988, 127056 | ||||||||||||||||||
Bug Blocks: | 108546 | ||||||||||||||||||
Attachments: |
|
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. The same issue for: background-origin: content-box; background-size: - specified in pixels and percent (e.g. 50% 50%; and 100px 100px; ) Created attachment 221041 [details]
Patch
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.
Created attachment 221114 [details]
Patch for review
Replacing pixel with ref test
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. Created attachment 221120 [details]
Patch
Converted SVG encoding to UTF8
Comment on attachment 221120 [details] Patch Clearing flags on attachment: 221120 Committed r161964: <http://trac.webkit.org/changeset/161964> All reviewed patches have been landed. Closing bug. 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. 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 #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. Re-opened since this is blocked by bug 126988 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! Attempting to reopen with Web Inspector editing of the form. 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.
Comment on attachment 221239 [details]
Includes tests with rects instead of circles
That looks better, lets wait for the bots first.
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> All reviewed patches have been landed. Closing bug. 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 Looks like neither author nor reviewer are available to advise on the best course of action, so rolling out again. Re-opened since this is blocked by bug 127056 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.
Created attachment 221350 [details]
Patch
Add Pass aswell for test on mac
Comment on attachment 221350 [details] Patch Clearing flags on attachment: 221350 Committed r162341: <http://trac.webkit.org/changeset/162341> All reviewed patches have been landed. Closing bug. |
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>