interaction in between border-image, fieldset and legend

RESOLVED FIXED in Firefox 63

Status

()

P3
normal
RESOLVED FIXED
3 years ago
6 months ago

People

(Reporter: karlcow, Assigned: mats)

Tracking

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

unspecified
mozilla63
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox63 fixed)

Details

Attachments

(6 attachments, 1 obsolete attachment)

(Reporter)

Description

3 years ago
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?
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 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 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)

Updated

6 months ago
Depends on: 1485784
(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

Updated

6 months ago
Blocks: 1483781

Updated

6 months ago
Duplicate of this bug: 1485920
You need to log in before you can comment on or make changes to this bug.