[css-borders-4] Concave corner-shape and inset box-shadow

[noamr]

The default implementation of inset box-shadow reduces the radius by the spread. This creates situations with concave corners might look "technically" like something that resembles a shadow but doesn't match the "strokey" concept of box-shadow.

For example, this is the current spec-compliant result of the following CSS:

#target {
  width: 200px;
  height: 200px;
  border-radius: 70px;
  corner-shape: scoop bevel notch squircle;
  background: lightgreen;
  border: 10px solid orange;
  box-shadow: 0 0 0 10px inset; 
}

The black shadow does look like something that could be a shadow, but could also feel strange given the behavior of normal (outset) box-shadow spread.

Alternatives I can think of:

1. Leave as is
2. Render inset shadows as strokes, and apply the inverse of the corner-smoothing algorithm. This would make inset shadows look like the inverse of the equivalent outset shadows.

[noamr]

cc @Loirooriol @fantasai @smfr @tabatkins

[smfr]

Can't we use the same math that we used to inset the inner path edge to inset the box-shadow?

[noamr]

Can't we use the same math that we used to inset the inner path edge to inset the box-shadow?

Sure, I guess that would be like an additional border of the same width as the spread (with offset applied etc).

[noamr]

I think there might be consensus about this as it matches inset shadow with regular (round) corner shapes.
@astearns let's make this an async resolution proposal?

Proposed: inset box-shadow spread renders like an inner border.

[Loirooriol]

Worth noting that Webkit handles the inner border curve different than other browsers: servo/servo#39540

But whatever the browser does for borders, doing the same for inset shadows makes sense.