Closed
Bug 667939
Opened 14 years ago
Closed 14 years ago
CSS: -moz-border-image property do not work currectly.
Categories
(Core :: Layout: Block and Inline, defect)
Core
Layout: Block and Inline
Tracking
()
RESOLVED
INVALID
People
(Reporter: a.jansons, Unassigned)
References
Details
(Keywords: testcase)
Attachments
(5 files, 2 obsolete files)
image-border.png
User Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.100 Safari/534.30
Steps to reproduce:
In CSS file:
border-width: 20px 16px 16px 15px;
-moz-border-image: url('../i/image-border.png') 20 16 16 15 round;
-webkit-border-image: url('../i/image-border.png') 20 16 16 15 round;
-o-border-image: url('../i/image-border.png') 20 16 16 15 round;
border-image: url('../i/image-border.png') 20 16 16 15 round;
Actual results:
Did not look same as in Google Chrome (as best example).
Expected results:
http://www.w3.org/TR/css3-background/#border-images
|
||
Comment 1•14 years ago
|
||
Can you provide/attach a reduced Testcase showing the Issue?
Is this still an Issue against a recent Nightly?
http://nightly.mozilla.org/
Sorry, I`m new in BugZilla. So, I`ll better show You result: http://imageshack.us/photo/my-images/146/28062011200749.png/
Yes, I tested it on Ubuntu 10.10 both Firefox 4 and Firefox 7.0a1.
Why every browser works differently? :)
|
|
||
Comment 4•14 years ago
|
||
Waht I meant to ask for is attaching an Example HTML Code and or point to an URL showing the Issue.
Version: 4.0 Branch → Trunk
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.border {
border-width: 20px 16px 16px 15px;
-moz-border-image: url('image-border.png') 20 16 16 15 round;
-webkit-border-image: url('image-border.png') 20 16 16 15 round;
-o-border-image: url('image-border.png') 20 16 16 15 round;
border-image: url('image-border.png') 20 16 16 15 round;
border-color: #3a2213;
border-style: double;
min-height: 145px;
min-width: 110px;
display: inline-block;
}
</style>
</head>
<body>
<div class="border">
Lorem lipsum...
</div>
</body>
</html>
Bahh, sorry, doesn't work without image file, of course.
Reporter, please attach your image-border.png
Attachment #542671 -
Attachment is obsolete: true
Attachment #542678 -
Attachment mime type: text/plain → text/html
|
|
Reporter | |
Comment 10•14 years ago
|
||
I think the repetition of the mid should appear as when you substitute a mirror in the middle of the image and extent of stretching the field - move to the edge of a border-image. When the field becomes more than the border-image - the width of the field will divided and the middle of the field becomes the "edge" of border-image. (see next attachment)
// sorry for that mess
|
|
Reporter | |
Comment 11•14 years ago
|
||
|
||
Comment 12•14 years ago
|
||
Its not clear to me, where your (In reply to comment #7)
> Reporter, please attach your image-border.png
url('../i/image-border.png')
Were or what is this file? By now, this bug report is incomplete for me.
|
|
Reporter | |
Comment 13•14 years ago
|
||
(In reply to comment #12)
> Its not clear to me, where your (In reply to comment #7)
> > Reporter, please attach your image-border.png
>
> url('../i/image-border.png')
> Were or what is this file? By now, this bug report is incomplete for me.
https://bug667939.bugzilla.mozilla.org/attachment.cgi?id=542509
|
|
Reporter | |
Comment 14•14 years ago
|
||
|
|
||
Comment 15•14 years ago
|
||
I haven't looked into this yet, but is this a dup of bug 497995?
|
|
Reporter | |
Comment 16•14 years ago
|
||
No, this is an addition.
|
||
Comment 17•14 years ago
|
||
It looks to me like the issue is that webkit doesn't support the "round" keyword for border-image.
https://bugs.webkit.org/show_bug.cgi?id=14185
|
|
||
Comment 18•14 years ago
|
||
Attachment #542678 -
Attachment is obsolete: true
Component: General → Layout: Block and Inline
OS: Other → All
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Keywords: testcase
Summary: CSS: -moz-border-image pseudo-class do not work currectly. → CSS: -moz-border-image property do not work currectly.
Sounds like comment 17 describes the issue, and our behavior is correct. You'd probably get the same behavior as WebKit if you used 'repeat' instead of 'round', which is a value that both browsers support.
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•