Skip to content

[cssom-1] Ensure inline style and corresponding declaration block updates each other properly #2269

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 2 commits into from
Feb 11, 2018
Merged

[cssom-1] Ensure inline style and corresponding declaration block updates each other properly #2269

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
71f88df
[cssom-1] Ensure inline style and corresponding declaration block upd…
upsuper Feb 3, 2018
03cef6e
[cssom-1] Add updating flag to CSS declaration block to avoid seriali…
upsuper Feb 6, 2018
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
75 changes: 54 additions & 21 deletions cssom-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1952,6 +1952,10 @@ the DOM a <a>CSS declaration block</a> is a
<dt><dfn>owner node</dfn>
<dd>The {{Element}} that the <a>CSS declaration block</a> is associated with, if any, or
null otherwise.

<dt><dfn>updating flag</dfn>
<dd>Unset by default. Set when the <a>CSS declaration block</a> is updating
the <a for="CSSStyleDeclaration">owner node</a>'s <code>style</code> attribute.
</dl>

To <dfn>parse a CSS declaration block</dfn> from a string <var>string</var>, follow these steps:
Expand Down Expand Up @@ -2034,6 +2038,40 @@ Note: The serialization of an empty CSS declaration block is the empty string.
Note: The serialization of a non-empty CSS declaration block does not include any surrounding whitespace, i.e., no whitespace appears
before the first property name and no whitespace appears after the final semicolon delimiter that follows the last property value.

A <a>CSS declaration block</a> has these <a>attribute change steps</a> for its <a for="CSSStyleDeclaration">owner node</a>:

<ol>
<li>If the <a for="CSSStyleDeclaration">readonly flag</a> is set, terminate these steps.
<li>If the <a for="CSSStyleDeclaration">updating flag</a> is set, terminate these steps.
<li>If <var>localName</var> is not "<code>style</code>", or <var>namespace</var> is not null, terminate these steps.
<li>If <var>value</var> is null, empty the <a for="CSSStyleDeclaration">declarations</a>.
<li>Otherwise, let the <a for="CSSStyleDeclaration">declarations</a> be the result of <a>parse a CSS declaration block</a>
from a string <var>value</var>.
</ol>

When a <a>CSS declaration block</a> object is created, then:
Copy link

Choose a reason for hiding this comment

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

@upsuper Why is this timing correct? Especially since nothing specifies when these objects are actually created, last I checked...

Copy link
Member Author

Choose a reason for hiding this comment

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

As far as it is returned from Element.style, does it matter when the objects are actually created? Browser needs to create it at some point, but before script gets it somehow, whether it exists doesn't really matter, does it?

Copy link

Choose a reason for hiding this comment

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

It matters because the base URI is different at different points in time, depending on what the node document of the element is. So depending on exactly when the creation/parsing happen you will get different behavior for relative URIs in property values....

Maybe that doesn't affect what CSSOM sees, just the actual styling behavior.

Copy link
Member Author

Choose a reason for hiding this comment

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

Hmm... okay. Sounds like something worth raising for css-style-attr I guess... The interaction between the two specs would be fun...


<ol>
<li>Let <var>owner node</var> be the <a for="CSSStyleDeclaration">owner node</a>.
<li>If <var>owner node</var> is null, or the <a for="CSSStyleDeclaration">readonly flag</a> is set, terminate these steps.
<li>Let <var>value</var> be the result of <a lt="get an attribute by namespace and local name">getting an attribute</a>
given null, "<code>style</code>", and <var>owner node</var>.
<li>If <var>value</var> is not null, let the <a for="CSSStyleDeclaration">declarations</a> be the result of
Copy link

Choose a reason for hiding this comment

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

s/let the/let/ ?

Copy link
Member Author

Choose a reason for hiding this comment

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

It seems to me that there is a convention that we use "the" before associated properties, and no "the" before variables, so I add "the" here. Not sure if my understanding is correct.

Copy link
Member

Choose a reason for hiding this comment

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

Something like that, yeah, though probably not entirely consistent. But we should probably adopt Infra Standard conventions when we update things or write new material for CSSOM (like saying "then return" instead of "terminate these steps").

<a>parse a CSS declaration block</a> from a string <var>value</var>.
</ol>

To <dfn>update style attribute for</dfn> <var>declaration block</var> means to run the steps below:

<ol>
<li>Assert: <var>declaration block</var>'s <a for="CSSStyleDeclaration">readonly flag</a> is unset.
<li>Let <var>owner node</var> be <var>declaration block</var>'s <a for="CSSStyleDeclaration">owner node</a>.
<li>If <var>owner node</var> is null, terminate these steps.
<li>Set <var>declaration block</var>'s <a for="CSSStyleDeclaration">updating flag</a>.
<li><a>Set an attribute value</a> for <var>owner node</var> using "<code>style</code>" and the result of
Copy link

Choose a reason for hiding this comment

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

This doesn't handle mutation events right, but I guess neither does anything else....

<a lt="serialize a CSS declaration block">serializing</a> <var>declaration block</var>.
<li>Unset <var>declaration block</var>'s <a for="CSSStyleDeclaration">updating flag</a>.
</ol>

The <dfn id=concept-shorthands-preferred-order>preferred order</dfn> of a list of shorthand properties <var>shorthands</var> is as follows:

<ol>
Expand Down Expand Up @@ -2079,6 +2117,7 @@ Setting the {{CSSStyleDeclaration/cssText}} attribute must run these steps:
<li>Empty the <a for="CSSStyleDeclaration">declarations</a>.
<li><a lt="Parse a CSS declaration block">Parse</a> the given value and, if the return value is not the empty list, insert the items in the list
into the <a for="CSSStyleDeclaration">declarations</a>, in <a>specified order</a>.
<li><a>Update style attribute for</a> the <a>CSS declaration block</a>.
</ol>

The <dfn attribute for=CSSStyleDeclaration>length</dfn> attribute must return the number of <a lt="CSS declaration">CSS
Expand Down Expand Up @@ -2164,6 +2203,7 @@ The <dfn method for=CSSStyleDeclaration>setProperty(<var>property</var>, <var>va
<li>Otherwise, <a lt="set a CSS declaration">set the CSS declaration</a> <var>property</var> with value <var>component value list</var>, with
the <i>important</i> flag set if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the
<a for="CSSStyleDeclaration">declarations</a>.
<li><a>Update style attribute for</a> the <a>CSS declaration block</a>.
</ol>

To <dfn>set a CSS declaration</dfn> <var>property</var> with a value <var>component value list</var> and optionally with an <i>important</i> flag set, in
Expand Down Expand Up @@ -2202,6 +2242,7 @@ steps:
value list</var>, and with the list of declarations being the <a for="CSSStyleDeclaration">declarations</a>.
<li>Otherwise, <a lt="set a CSS declaration value">set the CSS declaration value</a> <var>property</var> to the value <var>component value
list</var>, and with the list of declarations being the <a for="CSSStyleDeclaration">declarations</a>.
<li><a>Update style attribute for</a> the <a>CSS declaration block</a>.
</ol>

To <dfn>set a CSS declaration value</dfn> to a value <var>component value list</var> in a list of declarations <var>declarations</var>, follow these steps:
Expand Down Expand Up @@ -2234,6 +2275,7 @@ these steps:
<li>Otherwise, <a lt="set a CSS declaration priority">set the CSS declaration priority</a> <var>property</var> with the <i>important</i> flag set
if <var>priority</var> is not the empty string, and unset otherwise, and with the list of declarations being the
<a for="CSSStyleDeclaration">declarations</a>.
<li><a>Update style attribute for</a> the <a>CSS declaration block</a>.
</ol>

To <dfn>set a CSS declaration priority</dfn> <var>property</var> optionally with an <i>important</i> flag set, in a list of declarations
Expand All @@ -2255,11 +2297,17 @@ The <dfn method for=CSSStyleDeclaration>removeProperty(<var>property</var>)</dfn
let <var>property</var> be <var>property</var> <a lt="ASCII lowercase">converted to ASCII lowercase</a>.
<li>Let <var>value</var> be the return value of invoking {{CSSStyleDeclaration/getPropertyValue()}}
with <var>property</var> as argument.
<li>If <var>property</var> is a shorthand property, for each longhand property <var>longhand</var> that <var>property</var> maps to, invoke
{{CSSStyleDeclaration/removeProperty()}} with <var>longhand</var> as argument.
<li>Let <var>removed</var> be false.
<li>If <var>property</var> is a shorthand property, for each longhand property <var>longhand</var> that <var>property</var> maps to:
<ol>
<li>If <var>longhand</var> is not a <a for="CSS declaration">property name</a> of a <a>CSS declaration</a>
in the <a for="CSSStyleDeclaration">declarations</a>, <a for=iteration>continue</a>.
<li>Remove that <a>CSS declaration</a> and let <var>removed</var> be true.
</ol>
<li>Otherwise, if <var>property</var> is a <a>case-sensitive</a> match for a
<a for="CSS declaration">property name</a> of a <a>CSS declaration</a> in the
<a for="CSSStyleDeclaration">declarations</a>, remove that <a>CSS declaration</a>.
<a for="CSSStyleDeclaration">declarations</a>, remove that <a>CSS declaration</a> and let <var>removed</var> be true.
<li>If <var>removed</var> is true, <a>Update style attribute for</a> the <a>CSS declaration block</a>.
<li>Return <var>value</var>.
</ol>

Expand Down Expand Up @@ -2678,24 +2726,9 @@ interface ElementCSSInlineStyle {
};
</pre>

The <dfn attribute for=ElementCSSInlineStyle>style</dfn> attribute must return a live <a>CSS declaration block</a> with the following
properties:
<dl>
<dt><a for="CSSStyleDeclaration">readonly flag</a>
<dd>Unset.
<dt><a for="CSSStyleDeclaration">declarations</a>
<dd>The result of <a lt="Parse a CSS declaration block">parsing</a> the <code>style</code> content attribute, in
<a>specified order</a>. If the <code>style</code> content attribute is absent, the object represents an
empty list of <a>CSS declarations</a>. Mutating the <a for="CSSStyleDeclaration">declarations</a>
must set the <code>style</code> content attribute on the <a>context object</a> to the
<a lt="serialize a CSS declaration block">serialization</a> of the <a for="CSSStyleDeclaration">declarations</a>. If the
<code>style</code> content attribute is set, changed or removed, the <a for="CSSStyleDeclaration">declarations</a> must be
updated as appropriate.
<dt><a for="CSSStyleDeclaration">parent CSS rule</a>
<dd>Null.
<dt><a for="CSSStyleDeclaration">owner node</a>
<dd>The <a>context object</a>.
</dl>
The <dfn attribute for=ElementCSSInlineStyle>style</dfn> attribute must return a <a>CSS declaration block</a> object whose
<a for="CSSStyleDeclaration">readonly flag</a> is unset, whose <a for="CSSStyleDeclaration">parent CSS rule</a> is null, and
whose <a for="CSSStyleDeclaration">owner node</a> is the <a>context object</a>.

If the user agent supports HTML, the following IDL applies: [[HTML]]

Expand Down