[css-backgrounds] Let border-style apply to border-image

Currently the spec. says for border images:

"Authors can specify an image to be used in place of the border
styles. ... The border-image properties do not affect layout: layout
of the box, its content, and surrounding content is based on the
‘border-width’ and ‘border-style’ properties only."

And for border-image-source:

"If the value is ‘none’ or if the image cannot be displayed (or the
property doesn't apply), the border styles will be used; otherwise the
element's ‘border-style’ borders are not drawn and the border image is
drawn as described in the sections below."

This makes the border image be displayed dependent on whether
'border-style' is different to 'none' or 'hidden' and lets it
overwrite the actual style set for 'border-style'.
Though I assume authors would rather expect 'border-style' to affect
the layout of 'border-image' like a mask similar to 'mask-border'
(with the difference that 'border-style' only affects the border image
area.

Example:
.rainbow {
  border-image: linear-gradient(to right, red, yellow, lime, blue, purple) 1;
  border-style: double;
}

This should result in two rainbow-colored parallel solid lines with
some space between them.

The current behavior would be achieved by setting 'border-style' to 'solid'.

I am aware that this change may break the websites, though I'm not
sure how many would be affected. If the breakage is neglectable, could
the behavior of 'border-image' be changed accordingly?

Sebastian

Received on Wednesday, 9 March 2016 07:57:09 UTC