Status
()
People
(Reporter: karlcow, Assigned: mats)
Tracking
(Depends on: 1 bug, Blocks: 1 bug)
Bug Flags:
Firefox Tracking Flags
(firefox63 fixed)
Details
Attachments
(6 attachments, 1 obsolete attachment)
Created attachment 8761520 [details] legend-border-image.png A bug reported to me by the French dev ffoodd https://twitter.com/ffoodd_fr Rendering attached Gecko on the left, Blink on the right http://codepen.io/anon/pen/YWwqVa HTML code. <fieldset> <legend>blah</legend> <a href="blah">foo</a> </fieldset> <fieldset> <a href="blah">foo</a> </fieldset> CSS Code. fieldset { border-style: solid; margin: 20px; width: 100px; border-image-slice: 20 14 19 14 fill; border-image-width: 13px 13px 13px 13px; border-image-outset: 13px 13px 13px 13px; border-image-repeat: round repeat; border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAqCAQAAABfRhDxAAADzklEQVR4AcWXA8wkSRTHf93TO5617Y3Od+HZtm3btm3btm0Hh+i4tsbq/vomLy9JZbdr50uffvWx61f1f6/GDgDyUwix4Rhe2NVUDxwZxlIZK6GeiyNOTxfPKCMhyxIyZHkUunkfGZ54odUzd5MAuaBLzWwTV7ZPkemMFJ46kZ7sldS9xEiQosDgYPZuExlMgRQJHEwccfoxcoPVm/Oa8zZYnZH0s3iy124Tg9noXi5IdWl31K1nkyNDH9wVF4qRoe99ZySHJ4ffdwZ9V+nlbj3bHUVaDJFcPNIw4pDr1iRLWtpzzHOV+dyFa0zdG2Dq3heuQc7qZa9bc8QhIPMujqutJcHxDruYAhmSJESXZTqboXDCuY4nl7wTzl2Vd9jF4sksuKA9AAPWfHsPqU3aN9ru1P/6HoNXRxm8+utW7+09BqwJIPVrAJIubHLCRiPIIvcCHR5JshuN2OJYDLY41uZtcgIIUr8EaISQ7H/PyeTRmxC92cjfc3KyP0KvPQciAmDa9letR46UtOjikSJ31XrTtkfp7kUGGLhHn5UtkCUlD74U2Wzh6LPieLYA+k99fX+5CZMk5ebdv/9UiOu5RLDBETuNJU+WLPmdxm5wBEI8z4u8mL/x9FfOkrnsjad7eYR4nkskEze/cSMGMODGjSZujhDX87Bw6CmXHk/nJ0pMzx7Qb8xj+9L5iRLX87Cy9c50wfRiBHgpTGJ6Lv8a/3+A3/JbdEe8WAHvvfreq3RHvBgB5TkHPHHAE+U5KDE9e8DDNy1ZsGTBwzehxPLsAdM/OvFjlrHsxI+nf4QQw7MH+LUzrqNIqTOKZ1zn1xBieLaAL+9/fjpVZDw//cv7AWJ4toDibzs+SpU6rc6oU93x0eJvEMOzBIQPXFssUaOFj0+LWrH0wLWEcT0X1VF+ffO0r6nSxCcgoE2T6mlf//omSq+9MDKgXTzuJio0aBMQEtJDmwaV425qFxF66ZkBIgQIn97x3hxqNHWZzNCk9t6cj+7C4KO7bN6ndyAgMxogLQLLf9z2KapSV49WoLVR3f7ppT+jLP15+6dt3rZPLf8RQHvDlRyfJuA/enGrLDdbj7mwM1rU2uW7rwgDuRTcfUXb6rXKj16MD3LrhIQuSHYd5j960vd6s+kydKkUUDnv++lPAUx/6rzvqVi96knfz38UqEt/eHpAdWcIDj5to21zqZQw8TwuBjmKutWDYMTZnIWPHJIHkhzSlr8CvXEM9BCRI9CO8fEtXkigVqAdgPzpiCKDFZArvhTioOcd6UXs5cBKn5OjcRBPnO4eqPcXVZ8jBj5s668AAAAASUVORK5CYII='); }
![]() |
(Reporter) | |
Comment 1•3 years ago
|
||
Adding Daniel and David, in case they have an idea/rationale or know a duplicate.
(Assignee) | ||
Comment 2•3 years ago
|
||
FWIW, I looked into this briefly - the code that renders the borders when a <legend> is present is here: https://hg.mozilla.org/mozilla-central/annotate/b6f7d0eb61b1/layout/forms/nsFieldSetFrame.cpp#l239 If I comment out the "gfx->Clip(...)" calls there we do render the border, although it overlaps the <legend> of course. So the issue seems to be that nsCSSRendering::PaintBorder, or some method it calls, isn't happy about having an existing clip area. I'm pretty sure the clip area rects are setup correctly in nsFieldSetFrame because they work fine for non-image borders. This might be a good first bug for some intern to look at?
Updated•2 years ago
|
Priority: -- → P3
(Assignee) | ||
Comment 3•6 months ago
|
||
Created attachment 9001627 [details]
Testcase #2
Here's an example with a solid border that renders differently in Firefox / Chrome.
(Assignee) | ||
Comment 4•6 months ago
|
||
Created attachment 9001650 [details]
Testcase #3, border-image w. border larger than legend
(Assignee) | ||
Comment 5•6 months ago
|
||
Created attachment 9001652 [details]
Testcase #3, border-image w. border larger than <legend>
(Assignee) | ||
Updated•6 months ago
|
Attachment #9001650 -
Attachment is obsolete: true
(Assignee) | ||
Comment 6•6 months ago
|
||
Created attachment 9001658 [details]
Testcase #4
Slightly off-topic perhaps, but there's also a difference in how margins on the <legend> are handled compared to Chrome.
(Assignee) | ||
Comment 7•6 months ago
|
||
Created attachment 9001666 [details]
Testcase #5 - another border-image test
(Assignee) | ||
Updated•6 months ago
|
Assignee: nobody → mats
(Assignee) | ||
Comment 8•6 months ago
|
||
Created attachment 9003415 [details] [diff] [review] fix https://treeherder.mozilla.org/#/jobs?repo=try&revision=02de7de28e6ae85c566d6109087f460b05c557c2 Simon already wrote a WPT for this case: https://github.com/web-platform-tests/wpt/blob/d929247a384ebd6d31608e3cfd028b76c08d1712/html/rendering/non-replaced-elements/the-fieldset-element-0/fieldset-border-gap.html which I assume we'll import that at some point, so I'm not adding any further tests in this bug.
Attachment #9003415 -
Flags: review?(dholbert)
(Assignee) | ||
Comment 9•6 months ago
|
||
Also, the PaintBorder code is already using physical coordinates which seems wrong. I'll file a follow-up bug on that.
Comment 10•6 months ago
|
||
Comment on attachment 9003415 [details] [diff] [review] fix Review of attachment 9003415 [details] [diff] [review]: ----------------------------------------------------------------- r=me ::: layout/forms/nsFieldSetFrame.cpp @@ +275,5 @@ > > + // Make sure we clip all of the border in case the legend is smaller. > + nscoord borderTop = GetUsedBorder().top; > + if (legendRect.height < borderTop) { > + legendRect.height = borderTop; Understandability nit: I initially misinterpreted what "borderTop" meant, and I thought this was comparing a height against the *coordinate for the top edge of the border*, and that didn't make sense to me. Perhaps rename "borderTop" to "borderTopThickness" or something that is more clearly a thickness (as opposed to a coordinate), to make that misreading harder to do?
Attachment #9003415 -
Flags: review?(dholbert) → review+
(Assignee) | ||
Comment 11•6 months ago
|
||
OK, I'll name it borderTopWidth since it's associated with the 'border-top-width' property.
Comment 12•6 months ago
|
||
Pushed by mpalmgren@mozilla.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/c4897ce254c2 Make sure we clip all of the fieldset border behind the legend, also when the legend is smaller than the border. r=dholbert
(Assignee) | ||
Comment 13•6 months ago
|
||
(I'll mark this in-testsuite+ since it will be when we sync WPT the next time) (I filed bug 1485784 to follow-up on the logical coordinates issues in this code.)
Flags: in-testsuite+
Comment 14•6 months ago
|
||
Pushed by mpalmgren@mozilla.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/72a1e585702b (Follow-up) - Mark the WPT test legend-position-relative.html as expected PASS. r=me
Comment 15•6 months ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/c4897ce254c2 https://hg.mozilla.org/mozilla-central/rev/72a1e585702b
Status: NEW → RESOLVED
Last Resolved: 6 months ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla63
You need to log in
before you can comment on or make changes to this bug.
Description
•