[css-ui][css-background] should clarify outline drawing behavior for boxes with negative sizes

[dbaron]

https://twitter.com/Martijn_Cuppens/status/1015169981368225793 points out lack of interoperability with the following style:

div {
  margin: auto;
  width: 100px;
  height: 100px;
  outline: inset 100px green;
  outline-offset: -125px;
}

This is creating a 100px×100px box, and then offsetting its outline by -125px, which creates an outline whose inner edge is a box that's a -150px×-150px rectangle and whose outer edge is a 50px×50px rectangle.

Quoting the tweet's image:

The behavior of this case (outlines drawn over a rectangle that has negative sizes) should probably be better defined so that browsers can become more interoperable here.

[frivoal]

Right. At the moment, large negative offsets on outline are mostly a form of interpretive art, with the browser, not the author, doing the interpretation. As the picture from the tweet illustrates, it can be very pretty and highly creative, but interoperable it isn't.

The CSS-UI has some minimal "SHOULD" constraints to try and keep it vaguely sane (roughly, to prevent disappearing outlines with extremely large negative offsets), but even that isn't reliably followed yet. We have a test in the test suite that's almost as creative in rendering as that tweet:

http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/html/outline-016.htm

It should be a green square, but

(This test case needs the Ahem font to be installed)

[frivoal]

(note: this question of interop on outlines relates to #2846: even though we're considering different aspects of the outline, both raise the question of how much we should define)

[tomhodgins]

(these are unexpectedly beautiful)

[frivoal]

Just one more, because it's fun to let browsers go wild with lack of interop:
https://codepen.io/frivoal/pen/vroNqm

[tabatkins]

I'll note also that the paragraph applying the SHOULD here doesn't seem to read coherently to me:

Both the height and the width of outside of the shape drawn by the outline should not become smaller than twice the computed value of the outline-width property,

I can't quite parse this.

[tabatkins]

Can we just upgrade that to:

If the value is negative, its actual value must be clamped so that the absolute value of the offset is no more than half the width or height of the border box, as appropriate. The clamping should apply in both axises independently.

That way there's no self-intersecting outlines; at worst, the outline starts from the center of the element and grows outward from there.