@@ -1902,69 +1902,6 @@ Security</h4>
19021902 ''--foo: attr(foo type(<number>)); background-image: src(string(var(--foo)))''
19031903 needs to be invalid as well.
19041904
1905-
1906- <h4 id=attr-cycles>
1907- Cycles</h4>
1908-
1909- An attribute value may contain ''attr()'' functions,
1910- or other [=arbitrary substitution functions=] ,
1911- that are substituted during [=parse with a <syntax>=] .
1912- This can cause cyclic dependecies,
1913- either by an attribute referring to itself,
1914- through multiple attributes referring to each other,
1915- or through a combination of other [=arbitrary substitution functions=]
1916- (e.g. ''var()'' ).
1917-
1918- For each element, add a node for every attribute on that element
1919- to the graph described in [[css-variables-1#cycles]] .
1920- Then, for each attribute <var> attrib</var> ,
1921- add edges as follows:
1922-
1923- * From <var> attrib</var> to any attributes referenced by ''attr()''
1924- within <var> attrib</var> 's value.
1925- * From <var> attrib</var> to any [=custom properties=] referenced by ''var()''
1926- within <var> attrib</var> 's value.
1927- * From any [=custom property=] that references <var> attrib</var> using ''attr()''
1928- to <var> attrib</var> .
1929-
1930- An ''attr()'' referencing an attribute
1931- which is part of a cycle
1932- makes the containing [=declaration=] [=invalid at computed-value time=] .
1933-
1934- <div class='example'>
1935- In the following,
1936- <code> width</code> is [=invalid at computed-value time=] ,
1937- because ''attr()'' tries to substitute a value which refers to itself:
1938-
1939- <pre class='lang-css'>
1940- div {
1941- width: attr(data-foo type(*));
1942- }
1943- </pre>
1944- <pre class='lang-html'>
1945- <div data-foo="attr(data-foo type(*))"></div>
1946- </pre>
1947-
1948- Note: Even if one (or both) of the ''attr()'' functions had a fallback,
1949- the result would be the same.
1950- </div>
1951-
1952- <div class='example'>
1953- Cycles can occur through [=custom properties=] ;
1954- in the following,
1955- <code> --x</code> and <code> --y</code> are both [=invalid at computed-value time=] :
1956-
1957- <pre class='lang-css'>
1958- div {
1959- --x: var(--y);
1960- --y: attr(data-foo type(*));
1961- }
1962- </pre>
1963- <pre class='lang-html'>
1964- <div data-foo="var(--x)"></div>
1965- </pre>
1966- </div>
1967-
19681905<!-- Big Text: ident()
19691906
19701907████ ████▌ █████▌ █ █▌ █████▌ ██ ██
0 commit comments