<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body>
<p>
<div>
<b><a class="bz_bug_link
bz_status_REOPENED "
title="REOPENED - [css border] border-image doesn't honor border-style"
href="https://bugs.webkit.org/show_bug.cgi?id=99922#c14">Comment # 14</a>
on <a class="bz_bug_link
bz_status_REOPENED "
title="REOPENED - [css border] border-image doesn't honor border-style"
href="https://bugs.webkit.org/show_bug.cgi?id=99922">bug 99922</a>
from <span class="vcard"><a class="email" href="mailto:browserbugs2@gtalbot.org" title="Gérard Talbot <browserbugs2@gtalbot.org>"> <span class="fn">Gérard Talbot</span></a>
</span></b>
<pre>(In reply to <a href="show_bug.cgi?id=99922#c0">comment #0</a>)
<span class="quote">> one of WebKit layout tests:
> <a href="http://trac.webkit.org/browser/trunk/LayoutTests/fast/borders/border-image">http://trac.webkit.org/browser/trunk/LayoutTests/fast/borders/border-image</a>-
> omit-right-slice.html</span >
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’>
<a href="http://www.w3.org/TR/css3-background/#the-border-image">http://www.w3.org/TR/css3-background/#the-border-image</a>
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 <a href="show_bug.cgi?id=99922#c5">comment #5</a>)
<span class="quote">> I understood that border image is used instead of border-style.
> border-image is used in place of the border-styles. </span >
"
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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>