Skip to content

[css-typed-om] clarify how CSSUnparsedValues compute. #296

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
Sep 12, 2016
Merged

[css-typed-om] clarify how CSSUnparsedValues compute. #296

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
42 changes: 27 additions & 15 deletions css-typed-om/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1419,28 +1419,40 @@ appear as computed values (i.e. as a value stored on computed
Computed {{CSSUnparsedValue}} objects {#computed-unparsedvalue-objects}
-----------------------------------------------------------------------------

Custom property references are resolved as part of style computation. Accordingly,
computed {{CSSUnparsedValue}} objects will not contain {{CSSVariableReferenceValue}} objects.
As a result, only a single {{DOMString}} will appear in the sequence contained by
computed {{CSSUnparsedValue}} objects.

Furthermore, values that at specified value time contained custom property references
are renormalized after computation.
A property with a specified {{CSSUnparsedValue}} value will not
compute to a {{CSSUnparsedValue}}. Instead, after custom property references
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will not automatically compute

Because they can still compute to that, if they're custom properties without a syntax.

are resolved, the {{CSSStyleValue}} subclass appropriate to the property will be
used.

<div class='example'>
For example, a style rule containing:

Consider an element "e" with an inline style that specifies a width of <code>var(--baz)</code>.
<pre class='style'>
width: calc(var(--foo) + 10%);
</pre>

Assuming that the custom property --baz contains the value "42px", running the following code:
Will represent a specified width as an {{CSSUnparsedValue}}, but if this value
is the winning value during computation for a given element then that element's
computed width will be represented by a {{CSSLengthValue}} object (assuming
that --foo resolves to a valid substitution).
</div>

<pre class='lang-javascript'>
var a = e.styleMap.get('width');
var b = getComputedStyleMap(e).get('width');
</pre>
Often there will be no {{CSSStyleValue}} subclass appropriate - for example when a custom property
contains a reference to another custom property. In these cases, a {{CSSStyleValue}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just, like, a plain CSSStyleValue? Why not leave it as CSSUnparsedValue?

is used directly to represent a valud of unknown type.

Will result in "a" containing a {{CSSUnparsedValue}} with a single {{CSSVariableReferenceValue}}
in its sequence, and "b" containing a {{CSSSimpleLength}} representing 42px.
<div class='example'>

For example, a style rule containing:

<pre class='style'>
--foo: var(--bar) black;
</pre>

Will represent a specified value for --foo as a {{CSSUnparsedValue}}, and if
this value is the winning declaration for --foo during computation for a given
element, then that element's will have a computed value for --foo that is
represented by a {{CSSStyleValue}}.
</div>

Computed {{CSSKeywordValue}} objects {#computed-keywordvalue-objects}
Expand Down