|Summary:||border-image-repeat:round output doesn't match other browsers|
|Product:||WebKit||Reporter:||Chris Rebert <webkit>|
|Component:||Layout and Rendering||Assignee:||Nobody <webkit-unassigned>|
|Severity:||Normal||CC:||savagobr, simon.fraser, webkit-bug-importer|
|Version:||WebKit Nightly Build|
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
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."