[css-properties-values-api] Describe font-relative unit cycles. (#777)

See #315.

Author: andruud

css-properties-values-api/Overview.bs

@@ -100,7 +100,7 @@ following members:
 ::  The initial value of this custom property.
 
 The {{registerProperty()}} function {#the-registerproperty-function}
---------------------------------------------------------------------------------------------------
+--------------------------------------------------------------------
 
 The <dfn method for=CSS>registerProperty(PropertyDescriptor descriptor)</dfn> method
 registers a custom property according to the configuration options provided in
@@ -458,7 +458,52 @@ but be automatically [=invalid at computed-value time=].
 As ''@supports'' tests parse behavior,
 it thus also accepts all values as valid regardless of the registered syntax.
 
+Dependency cycles via relative units
+------------------------------------
+
+Registered custom properties follow the same rules for dependency cycle
+resolution as unregistered custom properties, with the following additional
+constraints:
+
+For any registered custom property with a <<length>> or <<length-percentage>> syntax
+component:
+
+* If the property contains any of the following units:
+	''em'', ''ex'', ''cap'', ''ch'', ''ic'', ''lh'';
+	then add an edge between the property and the ''font-size'' of the current
+	element.
+* If the property contains the ''lh'' unit,
+	add an edge between the property and the ''line-height'' of the current
+	element.
+* If the property contains any of the following units: ''rem'', ''rlh'';
+	then add an edge between the property
+	and the 'font-size'' of the root element.
+* If the property contains the 'rlh' unit, add an edge between the property
+	and the 'line-height'' of the root element.
 
+<div class='example'>
+	For example, given this registration:
+
+	<pre class='lang-javascript'>
+	CSS.registerProperty({
+	  name: "--my-font-size",
+	  syntax: "&lt;length>",
+	  initialValue: "0px",
+	  inherits: false
+	});
+	</pre>
+
+	the following will produce a dependency cycle:
+
+	<pre class='lang-css'>
+	div {
+		--my-font-size: 10em;
+		font-size: var(--my-font-size);
+	}
+	</pre>
+
+	and ''font-size'' will behave as if the value ''unset'' was specified.
+</div>
 
 Behavior of Custom Properties {#behavior-of-custom-properties}
 ==============================================================