UserAgent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:55.0) Gecko/20100101 Firefox/55.0

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

Steps to reproduce the problem:
3 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

What is the expected behavior?
Filled green square and no red.

Reference file
************** 

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

What went wrong?
A small red square in 005 and 006 tests.

No filled green square in 007 test.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 63.0.3218.0  Channel: dev
OS Version: 
Flash Version: irrelevant

This issue spun from  issue 559258  comment 67 .

WebKit issue for these 3 tests:

https://bugs.webkit.org/show_bug.cgi?id=151612

- - - - - - - 

Explanations
************

When border-image-width is set to a positive and non-zero length (say 30px, 2em, etc.) or a positive and non-zero percentage, then the border image area exists and must be painted (assuming that border box is at least 1px by 1px) .

One important sentence of the spec to keep in mind is:

"
The border image is drawn inside an area called the border image area (...) whose boundaries by default correspond to the border box (...). 
"
6.3. Drawing Areas: the ‘border-image-width’ property
http://www.w3.org/TR/css3-background/#the-border-image-width

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 can be a non-zero border image area to be painted if there is a non-zero content area and/or a non-zero padding belt (or area) and even though the border belt may be 0 px by 0px. The 3 tests are such precise code scenarios.

Furthermore, even the margin belt (or even beyond if there is no margin area) could be painted by the border image if border-image-outset is set to a positive non-zero length. This is the case in all 3 tests: the margin belt (or even beyond) is painted by the border image.

- - - - - - - 

Chrome 48.0.2564.10 and Chrome 63.0.3218.0 fail the 3 tests.

Firefox 42+, IE11 and Edge 12+ pass the 3 tests.