Closed
Bug 1279185
Opened 7 years ago
Closed 5 years ago
interaction in between border-image, fieldset and legend
Categories
(Core :: Layout, defect, P3)
Core
Layout
Tracking
()
RESOLVED
FIXED
mozilla63
Tracking | Status | |
---|---|---|
firefox63 | --- | fixed |
People
(Reporter: karlcow, Assigned: MatsPalmgren_bugz)
References
(Depends on 1 open bug, Blocks 1 open bug)
Details
Attachments
(6 files, 1 obsolete file)
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•7 years ago
|
||
Adding Daniel and David, in case they have an idea/rationale or know a duplicate.
Assignee | ||
Comment 2•7 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•6 years ago
|
Priority: -- → P3
Assignee | ||
Comment 3•5 years ago
|
||
Here's an example with a solid border that renders differently in Firefox / Chrome.
Assignee | ||
Comment 4•5 years ago
|
||
Assignee | ||
Comment 5•5 years ago
|
||
Assignee | ||
Updated•5 years ago
|
Attachment #9001650 -
Attachment is obsolete: true
Assignee | ||
Comment 6•5 years ago
|
||
Slightly off-topic perhaps, but there's also a difference in how margins on the <legend> are handled compared to Chrome.
Assignee | ||
Comment 7•5 years ago
|
||
Assignee | ||
Updated•5 years ago
|
Assignee: nobody → mats
Assignee | ||
Comment 8•5 years ago
|
||
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•5 years ago
|
||
Also, the PaintBorder code is already using physical coordinates which seems wrong. I'll file a follow-up bug on that.
Comment 10•5 years 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•5 years ago
|
||
OK, I'll name it borderTopWidth since it's associated with the 'border-top-width' property.
Comment 12•5 years 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•5 years 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•5 years 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•5 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/c4897ce254c2 https://hg.mozilla.org/mozilla-central/rev/72a1e585702b
Status: NEW → RESOLVED
Closed: 5 years 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
•