Bug 155955 - border-image-repeat:round output doesn't match other browsers
Summary: border-image-repeat:round output doesn't match other browsers
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL: http://output.jsbin.com/weqiqu/quiet
Keywords: HasReduction, InRadar
Depends on:
Blocks:
 
Reported: 2016-03-28 13:57 PDT by Chris Rebert
Modified: 2016-10-12 14:01 PDT (History)
3 users (show)

See Also:


Attachments
Screenshot from WebKit Nightly r198607 (315.95 KB, image/png)
2016-03-28 13:57 PDT, Chris Rebert
no flags Details
Screenshot from Firefox 47 (1.27 MB, image/png)
2016-03-28 13:58 PDT, Chris Rebert
no flags Details
Screenshot from Chrome 49 (399.03 KB, image/png)
2016-03-28 13:58 PDT, Chris Rebert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Rebert 2016-03-28 13:57:32 PDT
Created attachment 275046 [details]
Screenshot from WebKit Nightly r198607

(Tested in OS X WebKit Nightly r198607 and in iOS 9.3)

Steps to reproduce:
1. Open http://output.jsbin.com/weqiqu/quiet in WebKit/Safari.
2. Note that the page's CSS uses `border-image-repeat: round round;` for the border in question.
3. Observe the red, blue, and transparent border.

Expected result:
Each segment of red, blue, and transparency in the border should be relatively short.
(See attached screenshots from other browsers)

Actual result:
Each segment of red, blue, and transparency in the border is relatively long, roughly twice as long as in the other browsers.
(See attached screenshot from WebKit Nightly)
Comment 1 Chris Rebert 2016-03-28 13:58:12 PDT
Created attachment 275047 [details]
Screenshot from Firefox 47
Comment 2 Chris Rebert 2016-03-28 13:58:40 PDT
Created attachment 275049 [details]
Screenshot from Chrome 49
Comment 3 Chris Rebert 2016-03-28 14:00:00 PDT
See also: https://github.com/Fyrd/caniuse/issues/2366
Comment 4 Alexey Proskuryakov 2016-09-08 14:01:11 PDT
<rdar://problem/28213711>
Comment 5 Simon Fraser (smfr) 2016-09-29 22:15:52 PDT
We fail to implement the "and their width is scaled proportionally" bit of https://www.w3.org/TR/css3-background/#border-image-process.

Fixing this and the rendering of the middle part of the image requires hoisting the tiling mode logic out of Image::drawTiled() and up into NicePieceImage.
Comment 6 Adenilson Cavalcanti Silva 2016-10-12 13:30:41 PDT
If this one is available, I would like to work on it.
Comment 7 Simon Fraser (smfr) 2016-10-12 14:01:58 PDT
Please do. I started looking at this and it's a bit more involved than I thought.

Basically I think the fix should reflect this comment in Image::drawTiled():
    // FIXME: These rules follow CSS border-image rules, but they should not be down here in Image.

so the 'space' and 'round' logic there needs to pushed up into NinePieceImage::computeTileScales(), maybe as part of scaleSlicesIfNeeded(). This probably requires sending 'spacing' and 'phase' down through GraphicsContext::drawTiledImage(). I think this code move is necessary to implement this part of the spec:

"The middle image's width is scaled by the same factor as the top image unless that factor is zero or infinity, in which case the scaling factor of the bottom is substituted, and failing that, the width is not scaled. The height of the middle image is scaled by the same factor as the left image unless that factor is zero or infinity, in which case the scaling factor of the right image is substituted, and failing that, the height is not scaled."