Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 4, 2018
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 46 additions & 1 deletion css-properties-values-api/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
==============================================================
Expand Down