[css-backgrounds-4] Drop notch/scoop, rename bevel to angle. #3457

Author: fantasai

css-backgrounds-4/Overview.bs

@@ -253,7 +253,7 @@ Corner Shaping: the 'corner-shape' property</h3>
 
 	<pre class="propdef">
 		Name:            corner-shape
-		Value:           [ round | bevel | scoop | notch ]{1,4}
+		Value:           [ round | angle ]{1,4}
 		Initial:         round
 		Applies to:      all elements, except table element when 'border-collapse' is ''collapse''
 		Inherited:       no
@@ -268,30 +268,21 @@ Corner Shaping: the 'corner-shape' property</h3>
 	<dl dfn-type="value" dfn-for="corner-shape">
 		<dt><dfn>''round''</dfn>
 		<dd>Border radii define a convex elliptical curve at the corner.
-		<dt><dfn>''bevel''</dfn>
-		<dd>Border radii define a diagonal slice at the corner.
-		<dt><dfn>''scoop''</dfn>
-		<dd>Border radii define a concave elliptical curve at the corner.
-		<dt><dfn>''notch''</dfn>
-		<dd>Border radii define a concave rectangular notch at the corner.
+		<dt><dfn>''angle''</dfn>
 	</dl>
 
 	<div class="example">
 		For example, the following declarations create a right-pointing next button.
 		<pre>
 			a {
 				border-radius: 0 2em 2em 0;
-				corner-shape: bevel;
+				corner-shape: angle;
 				padding: 0.5em 2em 0.5em 0.5em;
 		</pre>
 		As a fallback in UAs that don't support 'border-radius',
 		the right side would be rounded rather than pointy.
 	</div>
 
-	<p class="issue">
-		For ''scoop'' and ''notch'', how do the color/style/width transitions work?
-		Do they transition once in the middle, or alternate to match the topness/sideness of that segment of the border?
-
 	<p class="issue">
 		Add a ''cubic-bezier()'' function for random other shapes?
 		Or some other functions?
@@ -309,7 +300,7 @@ Corner Shape and Size: the 'corners' shorthand</h3>
 
 	<div class="example">
 		For example, the following declaration creates a diamond shape.
-		<pre>corners: bevel 50%;</pre>
+		<pre>corners: angle 50%;</pre>
 		In UAs that don't support 'corner-shape', the declaration is ignored
 		(falls back to a rectangle).
 	</div>
@@ -319,7 +310,7 @@ Corner Shape and Size: the 'corners' shorthand</h3>
 		while the second example makes them trapezoid-shaped in UAs that support 'corners'.
 		<pre>
 			border-radius: 0.25em 0.25em 0 0;
-			corners: bevel 0.25em 0.25em 0 0 / 50% 50% 0 0;
+			corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;
 		</pre>
 	</div>
 
@@ -386,11 +377,11 @@ Partial Borders: the 'border-limit' property</h3>
 		<p>The following example draws only the first 10px of each corner:</p>
 		<pre>box { border: solid; border-parts: corners 10px; }</pre>
 		<p>The following example draws the curved part of the corner plus 5px
-		along ths sides:</p>
-		<pre>box { border: solid; border-radius: 5px; border-shape: scoop; border-parts: corners 5px; }</pre>
+		along the sides:</p>
+		<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 5px; }</pre>
 		<p>The following example draws the curved part of the corner and all of
 		the side except the middle 40%.</p>
-		<pre>box { border: solid; border-radius: 5px; border-shape: scoope; border-parts: corners 30%; }</pre>
+		<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 30%; }</pre>
 	</div>
 
 <h3 id="border-clip">