[css-shapes] add additional corner-shapes options to inset() etc

https://drafts.csswg.org/css-shapes/#supported-basic-shapes

Currently inset(), xywh() and rect() allow an optional border-radius like syntax for rounding the corners of the rectangle. I'm proposing adding the other corner-shape options from https://drafts.csswg.org/css-backgrounds-4/#corner-shaping and their combination to this.

clip-path: inset(0 round 16px);
clip-path: inset(0 bevel 16px);
clip-path: inset(0 round bevel 16px);
clip-path: inset(0 round scoop 16px / 8px);

A common pattern to see for non-bordered angled corners right now is this:

clip-path: 
  polygon(
    16px 0, 
    calc(100% - 16px) 0, 
    100% 16px, 
    100% calc(100% - 16px), 
    calc(100% - 16px) 100%, 
    16px 100%, 
    0 calc(100% - 16px), 
    0 16px);

Which would get replaced with this:

clip-path: inset(0 bevel 16px);

Start by reading the CSS Shapes supported basic shapes section and the CSS Backgrounds corner-shaping section linked in the issue. Compare the proposed inset(), xywh(), and rect() examples with the existing syntax and determine the required specification changes. Done means the additional corner-shape options and their combinations are defined consistently for these functions.