896284 - With some combinations of rotation and different borders some transparent lines appear

Status: NEW

(Core :: Web Painting, defect)

Description

[obrufau]

Attachment: Cases

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:25.0) Gecko/20130720 Firefox/25.0 (Nightly/Aurora)
Build ID: 20130720030214

Steps to reproduce:

Create an element and style it like this:

    border: 25px solid #396bb3;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 20px;

Then, try different combinations of changing one border and rotating.


Actual results:

Sometimes, thin transparent lines appear in the border.

In the cases below I have changed border-top, but it's analogous for the other borders.

 ---------
|  Cases  | ( http://jsfiddle.net/yF95m/show/ , http://jsfiddle.net/yF95m/ )
 ---------
-> No modifications
    -> ∅: good

-> One modification
    -> rotate: good
    -> border-top-width: good
    -> border-top-style: bad - problem 1
    -> border-top-color: good

-> Two modifications
    -> rotate, border-top-width: bad - problem 2
    -> rotate, border-top-style: bad - problem 1, problem 2
    -> rotate, border-top-color: bad - problem 2
    -> border-top-width, border-top-style: bad - problem 1
    -> border-top-width, border-top-color: good
    -> border-top-style, border-top-color: bad - problem 1

-> Three modifications
    -> rotate, border-top-width, border-top-style: bad - problem 1, problem 2
    -> rotate, border-top-width, border-top-color: bad - problem 2
    -> rotate, border-top-style, border-top-color: bad - problem 1, problem 2
    -> border-top-width, border-top-style, border-top-color: bad - problem 1

-> Four modifications
    -> rotate, border-top-width, border-top-style, border-top-color: bad - problem 1, problem 2

 ------------
|  Problems  |
 ------------

-> Problem 1
    If two adjacent borders have different border-style,
    then there appears a diagonal transparent line between them.
    
-> Problem 2
    If the element is rotated and (
        not all borders have the same border-width
        or
        not all borders have the same border-style
        or
        not all borders have the same border-color
    ),
    then there appear 8 transparent lines which divide the border in 8 sections (up, down, left, right, up-right, up-left, down-right, down-left).
          


Expected results:

In any case there shouldn't be any transparent line in the border.

Comment 1

[obrufau]

Attachment: example image