Bug 156121 – CSS Triangles Rendering Regression affecting CSS Ribbons

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[hexalys]

Created attachment 275444 [details]
Visual of rendering defect on CSS Ribbon

A rendering regression has ben introduced since at least Safari 8+ (perhaps as early as 7) which breaks CSS triangle shapes, as shown in the snapshot. If you visit the sample url on Safari 8 or 9, you can see the ribbon at the footer of the site does not render properly in Safari 8+. All other browsers including Webkit as far back as Safari 5.1 are showing the ribbon inner edges as expected.

[Jon Lee]

Looks like sub pixel.

[Radar WebKit Bug Importer]

<rdar://problem/25503257>

[Simon Fraser (smfr)]

Changed in the mid-late 160000's.

Can't reproduce in a simple reduction.

[hexalys]

(In reply to comment #3)
> Changed in the mid-late 160000's.
> 
> Can't reproduce in a simple reduction.

I know it a peculiar issue... After fiddling with it. One pointer I can give you is this:

If you disable the 'font-size' on #footer in the example, or set it to 1em instead of 0.938em. The problem goes away. However that isn't the font size I want, and reveal that somthing is up.

It appears the font-size is changing the pseudo(s) behavior in unexpected ways.

Is that enough info for you the assess the cause and pinpoint what was changed?

[hexalys]

I have put together a minimal repro.
http://goo.gl/RtOLiY

[alan]

Created attachment 275461 [details]
Test reduction

[alan]

(In reply to comment #5)
> I have put together a minimal repro.
> http://goo.gl/RtOLiY

Thanks for the reduction!

[alan]

This fixes the painting issue and matches FF's border sizing behavior (floor border width to device pixel).
 
diff --git a/Source/WebCore/css/StyleBuilderConverter.h b/Source/WebCore/css/StyleBuilderConverter.h
index ef6b19d..f9da9da 100644
--- a/Source/WebCore/css/StyleBuilderConverter.h
+++ b/Source/WebCore/css/StyleBuilderConverter.h
@@ -40,6 +40,7 @@
 #include "CSSPrimitiveValue.h"
 #include "CSSReflectValue.h"
 #include "Frame.h"
+#include "LayoutUnit.h"
 #include "Length.h"
 #include "LengthRepeat.h"
 #include "Pair.h"
@@ -254,7 +255,7 @@ inline T StyleBuilderConverter::convertLineWidth(StyleResolver& styleResolver, C
         float minimumLineWidth = 1 / styleResolver.document().deviceScaleFactor();
         if (result > 0 && result < minimumLineWidth)
             return minimumLineWidth;
-        return result;
+        return floorToDevicePixel(result, styleResolver.document().deviceScaleFactor());
     }
     default:
         ASSERT_NOT_REACHED();

- I am expecting tons of rebaseline on this :(

[alan]

with this change getComputedStyle() reports the floored border width value, but that's also inline with what FF reports.

[alan]

Created attachment 275527 [details]
Patch

[Build Bot]

Comment on attachment 275527 [details]
Patch

Attachment 275527 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: http://webkit-queues.webkit.org/results/1095688

New failing tests:
fast/block/float/016.html
ietestcenter/css3/bordersbackgrounds/border-radius-style-002.htm
fast/css/bidi-override-in-anonymous-block.html
ietestcenter/css3/bordersbackgrounds/border-radius-style-001.htm
ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-003.htm
tables/mozilla_expected_failures/bugs/bug1055-2.html
ietestcenter/css3/bordersbackgrounds/border-radius-with-three-values-001.htm
ietestcenter/css3/bordersbackgrounds/border-radius-style-004.htm
css1/units/length_units.html
ietestcenter/css3/bordersbackgrounds/border-radius-with-two-values-001.htm
ietestcenter/css3/bordersbackgrounds/border-radius-initial-value-001.htm

[Build Bot]

Created attachment 275528 [details]
Archive of layout-test-results from ews124 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews124  Port: ios-simulator-wk2  Platform: Mac OS X 10.10.5

[alan]

Created attachment 275549 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 275549 [details]
Patch

Clearing flags on attachment: 275549

Committed r199034: <http://trac.webkit.org/changeset/199034>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.