Move to CSS (#103)

Fixes #99

Author: majido

index.bs

@@ -169,11 +169,10 @@ animations. The worklet can be accessed via {{animationWorklet}} attribute.
 
 The {{animationWorklet}}'s <a>worklet global scope type</a> is {{AnimationWorkletGlobalScope}}.
 
-{{AnimationWorkletGlobalScope}} represents the global execution context of
-{{animationWorklet}}.
+{{AnimationWorkletGlobalScope}} represents the global execution context of {{animationWorklet}}.
 
 <xmp class='idl'>
-partial interface Window {
+partial namespace CSS {
     [SameObject] readonly attribute Worklet animationWorklet;
 };
 </xmp>
@@ -743,7 +742,7 @@ animates fully to close or open position depending on its current position.
 </div>
 
 <script>
-await animationWorklet.addModule('hidey-bar-animator.js');
+await CSS.animationWorklet.addModule('hidey-bar-animator.js');
 const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 1000});
 const documentTimeline = document.timeline;
 
@@ -817,7 +816,7 @@ sync with scroll offset.
 </div>
 
 <script>
-await animationWorklet.addModule('twitter-header-animator.js');
+await CSS.animationWorklet.addModule('twitter-header-animator.js');
 const animation = new WorkletAnimation(
     'twitter-header',
     [new KeyFrameEffect($avatar,  /* scales down as we scroll up */
@@ -876,7 +875,7 @@ A simple parallax background example.
 </div>
 
 <script>
-await animationWorklet.addModule('parallax-animator.js');
+await CSS.animationWorklet.addModule('parallax-animator.js');
 const scrollTimeline = new ScrollTimeline($scrollingContainer, {timeRange: 1000});
 const scrollRange = $scrollingContainer.scrollHeight - $scrollingContainer.clientHeight;
 

index.html

@@ -1214,7 +1214,7 @@
 </style>
   <meta content="Bikeshed version 0af8ece51a58310888d9da3e5b2ebda903d17c18" name="generator">
   <link href="https://wicg.github.io/animation-worklet/" rel="canonical">
-  <meta content="911385d5839c26ce4524e0a88bf7e12069934a3d" name="document-revision">
+  <meta content="9a1a8fb2a8e328a5a39cc6b57b0482e2935ef846" name="document-revision">
 <style>/* style-md-lists */
 
 /* This is a weird hack for me not yet following the commonmark spec
@@ -1617,11 +1617,11 @@ <h2 class="heading settled" data-level="2" id="threading-model"><span class="sec
    </figure>
    <h2 class="heading settled" data-level="3" id="animation-worklet-desc"><span class="secno">3. </span><span class="content">Animation Worklet</span><a class="self-link" href="#animation-worklet-desc"></a></h2>
     <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-worklet">Animation Worklet</dfn> is a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet">Worklet</a></code> responsible for all classes related to custom
-animations. The worklet can be accessed via <code class="idl"><a data-link-type="idl" href="#dom-window-animationworklet" id="ref-for-dom-window-animationworklet">animationWorklet</a></code> attribute. 
-   <p>The <code class="idl"><a data-link-type="idl" href="#dom-window-animationworklet" id="ref-for-dom-window-animationworklet①">animationWorklet</a></code>'s <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type" id="ref-for-worklet-global-scope-type">worklet global scope type</a> is <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope">AnimationWorkletGlobalScope</a></code>.</p>
-   <p><code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①">AnimationWorkletGlobalScope</a></code> represents the global execution context of <code class="idl"><a data-link-type="idl" href="#dom-window-animationworklet" id="ref-for-dom-window-animationworklet②">animationWorklet</a></code>.</p>
-<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window"><c- g>Window</c-></a> {
-    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①"><c- n>Worklet</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export data-readonly data-type="Worklet" id="dom-window-animationworklet"><code><c- g>animationWorklet</c-></code></dfn>;
+animations. The worklet can be accessed via <code class="idl"><a data-link-type="idl" href="#dom-css-animationworklet" id="ref-for-dom-css-animationworklet">animationWorklet</a></code> attribute. 
+   <p>The <code class="idl"><a data-link-type="idl" href="#dom-css-animationworklet" id="ref-for-dom-css-animationworklet①">animationWorklet</a></code>'s <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type" id="ref-for-worklet-global-scope-type">worklet global scope type</a> is <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope">AnimationWorkletGlobalScope</a></code>.</p>
+   <p><code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①">AnimationWorkletGlobalScope</a></code> represents the global execution context of <code class="idl"><a data-link-type="idl" href="#dom-css-animationworklet" id="ref-for-dom-css-animationworklet②">animationWorklet</a></code>.</p>
+<pre class="idl highlight def"><c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css"><c- g>CSS</c-></a> {
+    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①"><c- n>Worklet</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="attribute" data-export data-readonly data-type="Worklet" id="dom-css-animationworklet"><code><c- g>animationWorklet</c-></code></dfn>;
 };
 </pre>
 <pre class="idl highlight def"><c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-voidfunction"><code><c- g>VoidFunction</c-></code></dfn> = <c- b>void</c-> ();
@@ -1911,7 +1911,7 @@ <h3 class="heading settled" data-level="6.2" id="creating-worklet-animation"><sp
       <p>Let <var>workletAnimation</var> be a new <code class="idl"><a data-link-type="idl" href="#workletanimation" id="ref-for-workletanimation①">WorkletAnimation</a></code> object.</p>
      <li data-md>
       <p>Run the procedure to <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#set-the-timeline-of-an-animation" id="ref-for-set-the-timeline-of-an-animation">set the timeline of an animation</a> on <var>workletAnimation</var> passing <var>timeline</var> as the new timeline or, if a <var>timeline</var> argument is not provided,
-passing the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#the-documents-default-timeline" id="ref-for-the-documents-default-timeline">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> associated with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a>.</p>
+passing the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/#the-documents-default-timeline" id="ref-for-the-documents-default-timeline">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> associated with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a>.</p>
      <li data-md>
       <p>Let <var>effect</var> be the result corresponding to the first matching condition from below.</p>
       <dl>
@@ -2088,7 +2088,7 @@ <h3 class="heading settled" data-level="9.1" id="example-1"><span class="secno">
 <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
 
 <c- p>&lt;</c-><c- f>script</c-><c- p>></c->
-await animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'hidey-bar-animator.js'</c-><c- p>);</c->
+await CSS<c- p>.</c->animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'hidey-bar-animator.js'</c-><c- p>);</c->
 <c- kr>const</c-> scrollTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>(</c->$scrollingContainer<c- p>,</c-> <c- p>{</c->timeRange<c- o>:</c-> <c- mi>1000</c-><c- p>});</c->
 <c- kr>const</c-> documentTimeline <c- o>=</c-> document<c- p>.</c->timeline<c- p>;</c->
 
@@ -2151,7 +2151,7 @@ <h3 class="heading settled" data-level="9.2" id="example-2"><span class="secno">
 <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
 
 <c- p>&lt;</c-><c- f>script</c-><c- p>></c->
-await animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'twitter-header-animator.js'</c-><c- p>);</c->
+await CSS<c- p>.</c->animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'twitter-header-animator.js'</c-><c- p>);</c->
 <c- kr>const</c-> animation <c- o>=</c-> <c- k>new</c-> WorkletAnimation<c- p>(</c->
     <c- t>'twitter-header'</c-><c- p>,</c->
     <c- p>[</c-><c- k>new</c-> KeyFrameEffect<c- p>(</c->$avatar<c- p>,</c->  <c- d>/* scales down as we scroll up */</c->
@@ -2203,7 +2203,7 @@ <h3 class="heading settled" data-level="9.3" id="example-3"><span class="secno">
 <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
 
 <c- p>&lt;</c-><c- f>script</c-><c- p>></c->
-await animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'parallax-animator.js'</c-><c- p>);</c->
+await CSS<c- p>.</c->animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'parallax-animator.js'</c-><c- p>);</c->
 <c- kr>const</c-> scrollTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>(</c->$scrollingContainer<c- p>,</c-> <c- p>{</c->timeRange<c- o>:</c-> <c- mi>1000</c-><c- p>});</c->
 <c- kr>const</c-> scrollRange <c- o>=</c-> $scrollingContainer<c- p>.</c->scrollHeight <c- o>-</c-> $scrollingContainer<c- p>.</c->clientHeight<c- p>;</c->
 
@@ -2389,7 +2389,7 @@ <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="c
    <li><a href="#animation-animator-name">animation animator name</a><span>, in §6.1</span>
    <li><a href="#animation-requested-flag">animation requested flag</a><span>, in §5.5</span>
    <li><a href="#animation-worklet">Animation Worklet</a><span>, in §3</span>
-   <li><a href="#dom-window-animationworklet">animationWorklet</a><span>, in §3</span>
+   <li><a href="#dom-css-animationworklet">animationWorklet</a><span>, in §3</span>
    <li><a href="#animationworkletglobalscope">AnimationWorkletGlobalScope</a><span>, in §3</span>
    <li><a href="#animator-attached-timelines">animator attached timelines</a><span>, in §5</span>
    <li><a href="#animator-current-time">animator current time</a><span>, in §5</span>
@@ -2435,6 +2435,12 @@ <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="c
     <li><a href="#ref-for-typedef-ident①">4.1. Registering an Animator Definition</a>
    </ul>
   </aside>
+  <aside class="dfn-panel" data-for="term-for-namespacedef-css">
+   <a href="https://drafts.csswg.org/cssom-1/#namespacedef-css">https://drafts.csswg.org/cssom-1/#namespacedef-css</a><b>Referenced in:</b>
+   <ul>
+    <li><a href="#ref-for-namespacedef-css">3. Animation Worklet</a>
+   </ul>
+  </aside>
   <aside class="dfn-panel" data-for="term-for-document">
    <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
    <ul>
@@ -2444,8 +2450,7 @@ <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="c
   <aside class="dfn-panel" data-for="term-for-window">
    <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
    <ul>
-    <li><a href="#ref-for-window">3. Animation Worklet</a>
-    <li><a href="#ref-for-window①">6.2. Creating a Worklet Animation</a>
+    <li><a href="#ref-for-window">6.2. Creating a Worklet Animation</a>
    </ul>
   </aside>
   <aside class="dfn-panel" data-for="term-for-current-global-object">
@@ -2573,6 +2578,11 @@ <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span cla
     <ul>
      <li><span class="dfn-paneled" id="term-for-typedef-ident" style="color:initial">&lt;ident></span>
     </ul>
+   <li>
+    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
+    <ul>
+     <li><span class="dfn-paneled" id="term-for-namespacedef-css" style="color:initial">CSS</span>
+    </ul>
    <li>
     <a data-link-type="biblio">[DOM]</a> defines the following terms:
     <ul>
@@ -2624,6 +2634,8 @@ <h3 class="no-num no-ref heading settled" id="normative"><span class="content">N
    <dd>David Baron; Dean Jackson; Brian Birtles. <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a>. 30 November 2017. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a>
    <dt id="biblio-css-values-4">[CSS-VALUES-4]
    <dd>CSS Values and Units Module Level 4 URL: <a href="https://drafts.csswg.org/css-values-4/">https://drafts.csswg.org/css-values-4/</a>
+   <dt id="biblio-cssom-1">[CSSOM-1]
+   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
    <dt id="biblio-dom">[DOM]
    <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
    <dt id="biblio-html">[HTML]
@@ -2645,8 +2657,8 @@ <h3 class="no-num no-ref heading settled" id="informative"><span class="content"
    <dd><a href="https://github.com/WICG/animation-worklet/blob/gh-pages/README.md">Animation Worklet Explainer</a>. CR. URL: <a href="https://github.com/WICG/animation-worklet/blob/gh-pages/README.md">https://github.com/WICG/animation-worklet/blob/gh-pages/README.md</a>
   </dl>
   <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
-<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②"><c- g>Window</c-></a> {
-    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①①"><c- n>Worklet</c-></a> <a data-readonly data-type="Worklet" href="#dom-window-animationworklet"><code><c- g>animationWorklet</c-></code></a>;
+<pre class="idl highlight def"><c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①"><c- g>CSS</c-></a> {
+    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①①"><c- n>Worklet</c-></a> <a data-readonly data-type="Worklet" href="#dom-css-animationworklet"><code><c- g>animationWorklet</c-></code></a>;
 };
 
 <c- b>callback</c-> <a href="#callbackdef-voidfunction"><code><c- g>VoidFunction</c-></code></a> = <c- b>void</c-> ();
@@ -2702,10 +2714,10 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
     <li><a href="#ref-for-animation-worklet②">2. Threading Model</a>
    </ul>
   </aside>
-  <aside class="dfn-panel" data-for="dom-window-animationworklet">
-   <b><a href="#dom-window-animationworklet">#dom-window-animationworklet</a></b><b>Referenced in:</b>
+  <aside class="dfn-panel" data-for="dom-css-animationworklet">
+   <b><a href="#dom-css-animationworklet">#dom-css-animationworklet</a></b><b>Referenced in:</b>
    <ul>
-    <li><a href="#ref-for-dom-window-animationworklet">3. Animation Worklet</a> <a href="#ref-for-dom-window-animationworklet①">(2)</a> <a href="#ref-for-dom-window-animationworklet②">(3)</a>
+    <li><a href="#ref-for-dom-css-animationworklet">3. Animation Worklet</a> <a href="#ref-for-dom-css-animationworklet①">(2)</a> <a href="#ref-for-dom-css-animationworklet②">(3)</a>
    </ul>
   </aside>
   <aside class="dfn-panel" data-for="callbackdef-voidfunction">