[css-text-decor-4] Added percentages to text-decoration-inset (#14282)

Resolution: #8403 (comment)

Author: SebastianZ

css-text-decor-4/Overview.bs

@@ -867,11 +867,12 @@ Trimming, Expanding, and Shifting Text Decoration Lines: the 'text-decoration-in
 
 	<pre class="propdef">
 	Name: text-decoration-inset
-	Value: <<length>>{1,2} | auto
+	Value: <<length-percentage>>{1,2} | auto
 	Initial: 0
 	Applies to: all elements
 	Inherited: no
-	Percentages: N/A
+	Percentages: Depending on the value of 'box-decoration-break',
+		either refer to the inline size of the [=decorating box=] or of each individual [=box fragment=]
 	Computed value: specified keyword or absolute length
 	Animation type: by computed value
 	</pre>
@@ -887,23 +888,51 @@ Trimming, Expanding, and Shifting Text Decoration Lines: the 'text-decoration-in
 	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for=text-decoration-inset>
-		<dt><dfn><<length>></dfn></dt>
+		<dt><dfn><<length-percentage>></dfn></dt>
 		<dd>
 			Adjusts the start or end endpoint of the affected line decorations.
 			Positive values move the endpoint inward (trimming),
 			negative values move it outward (extending).
 
+			Percentage values either refer to the total inline size of the [=decorating box=],
+			if 'box-decoration-break' is set to ''box-decoration-break/slice'',
+			or to the inline size of each individual [=box fragment=],
+			if it is set to ''box-decoration-break/clone''.
+
 			<div class="example">
 				<p>The following example offsets an extra thick underline
 				1em endwards with respect to the text
 				<pre>
 					h1 {
-						text-decoration: underline 0.3em rgba(36,148,187,0.25);
+						text-decoration: underline 0.3em rgb(36 148 187 / 0.25);
 						text-decoration-inset: 1em -1em;
 					}
 				</pre>
 			</div>
 
+			<div class="example">
+				<p>In this example, the underline is inset 10% of the inline size of the [=decorating box=]
+					from the start and end of it.
+				<pre>
+					h1 {
+						text-decoration: underline 0.3em rgb(36 148 187 / 0.25);
+						text-decoration-inset: 10%;
+					}
+				</pre>
+			</div>
+
+			<div class="example">
+				<p>In this example, the underline is inset 5% of the inline size of each [=box fragment=]
+					from the end of that fragment.
+				<pre>
+					h1 {
+						text-decoration: underline 0.3em rgb(36 148 187 / 0.25);
+						text-decoration-inset: 0 5%;
+						box-decoration-break: clone;
+					}
+				</pre>
+			</div>
+
 		<dt><dfn>auto</dfn></dt>
 		<dd>
 			The UA chooses an inset amount that ensures that