1279185 - interaction in between border-image, fieldset and legend

Status: RESOLVED FIXED

Description

[Karl Dubost💡 :karlcow]

Attachment: 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=');
}

Comment 1

[Karl Dubost💡 :karlcow]

Adding Daniel and David, in case they have an idea/rationale or know a duplicate.

Comment 2

[Mats Palmgren (:mats)]

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?

Comment 3

[Mats Palmgren (:mats)]

Attachment: Testcase #2

Here's an example with a solid border that renders differently in Firefox / Chrome.

Comment 4

[Mats Palmgren (:mats)]

Attachment: Testcase #3, border-image w. border larger than legend

Comment 5

[Mats Palmgren (:mats)]

Attachment: Testcase #3, border-image w. border larger than <legend>

Comment 6

[Mats Palmgren (:mats)]

Attachment: Testcase #4

Slightly off-topic perhaps, but there's also a difference in how margins on the <legend> are handled compared to Chrome.

Comment 7

[Mats Palmgren (:mats)]

Attachment: Testcase #5 - another border-image test

Comment 8

[Mats Palmgren (:mats)]

Attachment: 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.

Comment 9

[Mats Palmgren (:mats)]

Also, the PaintBorder code is already using physical coordinates which
seems wrong.  I'll file a follow-up bug on that.

Comment 10

[Daniel Holbert [:dholbert]]

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?

Comment 11

[Mats Palmgren (:mats)]

OK, I'll name it borderTopWidth since it's associated with the 'border-top-width' property.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
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

Comment 13

[Mats Palmgren (:mats)]

(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.)

Comment 14

[Pulsebot]

Pushed by [e-mail]:
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

[Tiberius Oros[:tiberius_oros]]

https://hg.mozilla.org/mozilla-central/rev/c4897ce254c2
https://hg.mozilla.org/mozilla-central/rev/72a1e585702b