[css-values-5] Handle attr() cycles (#11459)

Co-authored-by: Anders Hartvoll Ruud <andruud@google.com>

Author: andruud

css-values-5/Overview.bs

@@ -1791,6 +1791,69 @@ Security</h4>
 	''--foo: attr(foo type(&lt;number&gt;)); background-image: src(string(var(--foo)))''
 	needs to be invalid as well.
 
+<h4 id=attr-cycles>
+Cycles</h4>
+
+An attribute value may contain ''attr()'' functions,
+or other [=arbitrary substitution functions=],
+that are substituted during [=parse with a &lt;syntax>=].
+This can cause cyclic dependecies,
+either by an attribute referring to itself,
+through multiple attributes referring to each other,
+or through a combination of other [=arbitrary substitution functions=]
+(e.g. ''var()'').
+
+For each element, add a node for every attribute on that element
+to the graph described in [[css-variables-1#cycles]].
+Then, for each attribute <var>attrib</var>,
+add edges as follows:
+
+* From <var>attrib</var> to any attributes referenced by ''attr()''
+	within <var>attrib</var>'s value.
+* From <var>attrib</var> to any [=custom properties=] referenced by ''var()''
+	within <var>attrib</var>'s value.
+* From any [=custom property=] that references <var>attrib</var> using ''attr()''
+	to <var>attrib</var>.
+
+An ''attr()'' referencing an attribute
+which is part of a cycle
+makes the containing [=declaration=] [=invalid at computed-value time=].
+
+<div class='example'>
+	In the following,
+	<code>width</code> is [=invalid at computed-value time=],
+	because ''attr()'' tries to substitute a value which refers to itself:
+
+	<pre class='lang-css'>
+	div {
+	  width: attr(data-foo type(*));
+	}
+	</pre>
+	<pre class='lang-html'>
+	&lt;div data-foo="attr(data-foo type(*))">&lt;/div>
+	</pre>
+
+	Note: Even if one (or both) of the ''attr()'' functions had a fallback,
+	the result would be the same.
+</div>
+
+<div class='example'>
+	Cycles can occur through [=custom properties=];
+	in the following,
+	<code>--x</code> and <code>--y</code> are both [=invalid at computed-value time=]:
+
+	<pre class='lang-css'>
+	div {
+	  --x: var(--y);
+	  --y: attr(data-foo type(*));
+	}
+	</pre>
+	<pre class='lang-html'>
+	&lt;div data-foo="var(--x)">&lt;/div>
+	</pre>
+</div>
+
+
 <!-- Big Text: random
 
 ████▌   ███▌  █    █▌ ████▌   ███▌  █     █