[Webkit-unassigned] [Bug 99922] [css border] border-image doesn't honor border-style

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=99922

--- Comment #14 from Gérard Talbot <browserbugs2 at gtalbot.org> ---
(In reply to comment #0)
> one of WebKit layout tests:
> http://trac.webkit.org/browser/trunk/LayoutTests/fast/borders/border-image-
> omit-right-slice.html

The following border-image shorthand declaration (found in that test, still fetchable)

    border-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAUFJREFUGNMBNgHJ/gPcUkznH/n8lGR5YkMIIMDXFhgoVNnfqeM5dbre55MDGkF/U6tMmi12K6QBpfkB4H3NyPZAiyjm6kp//uPtAA4pZhHPJ8xbkSop4chy5ecPsVSqkC03ozAmk77SOwOHR+fDXmoF5UUJU9YsnVfehg/iLC7p3etC3w3LEA8D0eGf/DZozPPzoSSX6gTVlQ/L4Ylt4SrFiOgqNDQPAPvl/JQuLv33xK66eAgGCn+OAIUu1Fugs2hsZNIB6gPhrZ80q7sXNUEuIE7EGNC5Dc2ExcIe9tseb4r7usAAralzLgdas9URX21wGUqSgDnf/jMydhxMIEx4w9TtAfCQPsbi30EEVABXFJYnOZgfbQK3CLkwg6PDGG27KwOYF7jD+sIHhdwoUyILAF5sv/6bI6S56fbULB5OToUjFpS7UHGrVgAAAABJRU5ErkJggg==) 1 2 3;

is invalid. The CSS validator also confirms that.

6.7. Border Image Shorthand syntax is:

    <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’> | / <‘border-image-width’>? / <‘border-image-outset’> ]? || <‘border-image-repeat’>
http://www.w3.org/TR/css3-background/#the-border-image

The declaration misses 2 forward slashes.

border-image: url("cat.png") 1 / 2 / 3; /* is valid */

border-image: url("cat.png") 1 2 3; /* is invalid */

- - - - - - - - - - - 

(In reply to comment #5)
> I understood that border image is used instead of border-style.
> border-image is used in place of the border-styles. 

"
The border image is drawn inside an area called the border image area. This is an area whose boundaries *_by default_* correspond to the border box
"

and then border image area can be extended out of the border box, beyond the border box and into the margin area thanks to border-image-outset. So the border image can fill the content area, the padding area, the border area and even the margin area of an element.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20151119/6e97536e/attachment-0001.html>