[CSS3 Backgrounds and Borders] border image area can exist and be drawn, can be painted even if 'border-style' of element is 'none'

• Component: CSS
• Status: RESOLVED DUPLICATE

[Gérard Talbot]

This bug report spun from bug 99922 comment 16

Unprefixed tests
----------------

http://test.csswg.org/suites/css-backgrounds-3_dev/nightly-unstable/html4/border-image-width-005.htm

http://test.csswg.org/suites/css-backgrounds-3_dev/nightly-unstable/html4/border-image-width-006.htm

http://test.csswg.org/suites/css-backgrounds-3_dev/nightly-unstable/html4/border-image-width-007.htm


Expected result
---------------

http://test.csswg.org/suites/css-backgrounds-3_dev/nightly-unstable/html4/reference/ref-filled-green-100px-square.htm


Explanations
------------

'border-style' of an element can be 'none' and/or 'border-width' can be '0' and there still can be a non-zero border image area which can be painted, drawn by the border-image-source as long as border-image-width is non-zero (and, of course, border-image-source exists and border-image-slice is non-zero). This is what the 3 tests are specifically checking, verifying, demonstrating.

By definition, border image area is the border box of an element. border image area is not the border belt of an element. So, there is a non-zero border image area if there is a non-zero content area and/or a non-zero padding belt (or area). Furthermore, even the margin belt (or area) could be painted by the border image if border-image-outset is non-zero.

6.3. Drawing Areas: the ‘border-image-width’ property
http://www.w3.org/TR/css3-background/#the-border-image-width

"
The border image is drawn inside an area called the border image area (...) whose boundaries by default correspond to the border box (...). 
"

Notes
-----

- I do not have Safari 9.0.2. 
- Chrome 48.0.2564.10 fails the 3 tests
- Firefox 42, IE11 and Edge 12 pass the 3 tests
- I've searched for duplicates and did not find any; the closest I could found was bug 67657

[Adenilson Cavalcanti Silva]

I can confirm that all 3 tests fail in Safari.

[Gérard Talbot]

I assume here that you mean version 9.0.2, which is the latest stable released version, right?

[Adenilson Cavalcanti Silva]

I tested Safari 8.0.8, 9.0.1 (as also compiled from trunk).

[Gérard Talbot]

> 'border-style' of an element can be 'none' and/or 'border-width' can be '0'
> and there still can be a non-zero border image area which can be painted,
> drawn by the border-image-source as long as border-image-width is non-zero

To formulate this more precisely:

'border-style' of an element can be 'none' and/or *_computed_* 'border-width' value can be '0' and there still can be a non-zero border image area which can be painted, drawn by the border-image-source as long as border-image-width is a *_non-zero length (eg. 1em, 3px, etc)  or non-zero percentage_* ...

[Gérard Talbot]

Correspondent Chrome (Blink) bug:

https://bugs.chromium.org/p/chromium/issues/detail?id=767352

[Gérard Talbot]

Please use these for now:

https://wpt.fyi/results/css/css-backgrounds/border-image-width-005.xht
http://wpt.live/css/css-backgrounds/border-image-width-005.xht


https://wpt.fyi/results/css/css-backgrounds/border-image-width-006.xht
http://wpt.live/css/css-backgrounds/border-image-width-006.xht


https://wpt.fyi/results/css/css-backgrounds/border-image-width-007.xht
http://wpt.live/css/css-backgrounds/border-image-width-007.xht

[Simon Fraser (smfr)]

Fixing via bug 99922.

*** This bug has been marked as a duplicate of bug 99922 ***