From 60a08c9f2b0d14ed8f96a7c27d68acc9e2ec6797 Mon Sep 17 00:00:00 2001
From: Anders Hartvoll Ruud <andruud@gmail.com>
Date: Wed, 4 Jul 2018 14:44:28 +0200
Subject: [PATCH] [css-properties-values-api] Describe font-relative unit
 cycles.

See #315.
---
 css-properties-values-api/Overview.bs | 47 ++++++++++++++++++++++++++-
 1 file changed, 46 insertions(+), 1 deletion(-)

diff --git a/css-properties-values-api/Overview.bs b/css-properties-values-api/Overview.bs
index 0e946254..5dd3c86b 100644
--- a/css-properties-values-api/Overview.bs
+++ b/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}
 ==============================================================