Closed Bug 1279185 Opened 5 years ago Closed 3 years ago

interaction in between border-image, fieldset and legend


(Core :: Layout, defect, P3)




Tracking Status
firefox63 --- fixed


(Reporter: karlcow, Assigned: mats)


(Depends on 1 open bug, Blocks 1 open bug)



(6 files, 1 obsolete file)

Attached image legend-border-image.png
A bug reported to me by the French dev ffoodd

Rendering attached
Gecko on the left, Blink on the right

HTML code.

  <a href="blah">foo</a>

  <a href="blah">foo</a>

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=');
Adding Daniel and David, in case they have an idea/rationale or know a duplicate.
FWIW, I looked into this briefly - the code that renders the borders when a <legend>
is present is here:
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?
Priority: -- → P3
Attached file Testcase #2
Here's an example with a solid border that renders differently in Firefox / Chrome.
Attachment #9001650 - Attachment is obsolete: true
Attached file Testcase #4
Slightly off-topic perhaps, but there's also a difference in how margins on the <legend> are handled compared to Chrome.
Assignee: nobody → mats
Also, the PaintBorder code is already using physical coordinates which
seems wrong.  I'll file a follow-up bug on that.
Comment on attachment 9003415 [details] [diff] [review]

Review of attachment 9003415 [details] [diff] [review]:


::: 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+
OK, I'll name it borderTopWidth since it's associated with the 'border-top-width' property.
Pushed by
Make sure we clip all of the fieldset border behind the legend, also when the legend is smaller than the border.  r=dholbert
Depends on: 1485784
(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+
Pushed by
(Follow-up) - Mark the WPT test legend-position-relative.html as expected PASS.  r=me
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla63
Duplicate of this bug: 1485920
You need to log in before you can comment on or make changes to this bug.