Bug 150557 – [GTK] If two adjacent sides for the <fieldset> element have EXACTLY the same color defined

• Component: CSS
• Status: NEW

[Noel]

Created attachment 264045 [details]
RENDER-bug - simulation files.

I encounter, some RENDERING-ERRORS using webkitgtk-2.4.9 ( or later) and the latest revision in SVN trunk.

In certain pages, I do get faulty-rendered  'artifacts'  (faulty screen output), seems to be CSS-related! 

Those 'faulty'-renderings are visible on different platforms, PC-x64, PX-x86 and Arm architectures (other architectures/platforms have not been tested).

I've included some stripped html/css code that can show the faulty behavior.

Enclosed is a zip file that allows to simulate the behavior (Webcontent.zip).

When e.g. row '001:' is clicked, the BMS_ui_adm() event handler makes <fieldset class="dialog" id="AdmValue"> visible. That is when an 'orange shape' appears on the lower right half of the display. 
(Remember this is a cut-and-paste snippet of production code all put in one file to simulate the issue).


NOTE: this problem seems to happen whenever two adjacent sides for the <fieldset> element have EXACTLY the same color defined.

For instance, the following code in the test case (line 729 in CSS file):

  fieldset {
      border-width: 3px;
      border-style: solid;
      border-color: #5e5e5e #ffbc00 #ffbc00 #5e5e5e;
  }

...it's exposing the bug because the right&bottom sides of border have exactly the same colour (orange). In the same way, the fact that top&left have the same exact colour (gray) is also causing a similar problem.

You can test this theory by quickly workaround the problem you're seeing by slightly modifying those colours, so that adjacent sides don't have exactly the same colour. For instance, this hides the bug for me:

  fieldset {
      border-width: 3px;
      border-style: solid;
      border-color: #5e5e5f #ffbc01 #ffbc00 #5e5e5e;
  }

But still, this looks like a bug (works fine in Firefox 41 and Chrome 45), so I'd say reporting it in bugzilla is the way to go.

[Alexey Proskuryakov]

I do not see any difference in rendering between Safari 9 and Firefox.

[Noel]

(In reply to comment #1)
> I do not see any difference in rendering between Safari 9 and Firefox.

Indeed Webkit-gtk  ( 2.4.9 , 2.10.x and latest svn )show faulty behavior, (works fine in Firefox 41 and Chrome 45/46).

[Noel]

BAD-rendering- WEBKIT-GTK : http://www.tiikoni.com/tis/view/?id=6f5a5ea

OK-rendering (CHROME/FIREFOX) : http://www.tiikoni.com/tis/view/?id=6649a3f

[Mario Sanchez Prada]

For what is worth, I can't see any bad rendering either in OSX Yosemite with Safari 9.0 (10601.1.56.2) nor with WebKit Nightly r191175, so it looks like an issue specific to the GTK Port.

Updating bug's title and adding a few more people to CC

[Carlos Garcia Campos]

When rendering the border, if the bottom and left edges have the same style, GraphicsContext::clipConvexPolygon() is called with antialiased = false. This is why it only happens when two adjacent side share the color. The problem seems to be a cairo bug when antialias is set to NONE. It seems it generates the wrong clip polygon. Not changing the cairo antialias in GraphicsContext::clipConvexPolygon() fixes the issue.