1848458 - [css-ui-4] Add stripes() function to 'outline-color' property

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[Sebastian Zartner [:sebo]]

In CSS UI 4 the outline-color property takes <image-1D> values and with those the stripes() function defined in CSS Images 4. With that function it is possible to define multiple colors for the outline.

Among other use cases, this is especially important from an accessibility point of view.

Sebastian

Comment 1

[Calixte Denizet (:calixte)]

In the pdf.js context, UX asked us to change the outline of selected editors in order to have a bi-colored one: stripes(white 1px, blue 2px, white 1px).
It's especially helpful to make it easily visible whatever the background is and in the pdf viewer we don't have the control on the background color (i.e. the current page color).
I tried different approaches to implement it and only one worked correctly:
https://github.com/mozilla/pdf.js/blob/3f7060e77743a2d3244c95d364b52e0331ed4ed2/web/annotation_editor_layer_builder.css#L146-L174.
That said, it'd be helpful to have such a feature.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Calixte: why does outline-style: auto not work?

Comment 3

[Calixte Denizet (:calixte)]

In such a case, the outline is composed of 2 lines not 3 and I can't change the color.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

You can change the color with accent-color.

Comment 5

[Calixte Denizet (:calixte)]

In my case it was to change the white not the blue.