Created
April 7, 2017 16:36
-
-
Save bfgeek/7925f35bb41afeb11faaec2d7c9f65a6 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html><html lang="en"> | |
| <head> | |
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> | |
| <title>Worklets Level 1</title> | |
| <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> | |
| <meta content="ED" name="w3c-status"> | |
| <link href="../default.css" rel="stylesheet" type="text/css"> | |
| <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon"> | |
| <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css"> | |
| <meta content="Bikeshed version 81c00a31d8c468599cf8337dd150a8be9a2b4e5d" name="generator"> | |
| <link href="https://drafts.css-houdini.org/worklets/" rel="canonical"> | |
| <style>/* style-md-lists */ | |
| /* This is a weird hack for me not yet following the commonmark spec | |
| regarding paragraph and lists. */ | |
| [data-md] > :first-child { | |
| margin-top: 0; | |
| } | |
| [data-md] > :last-child { | |
| margin-bottom: 0; | |
| }</style> | |
| <style>/* style-selflinks */ | |
| .heading, .issue, .note, .example, li, dt { | |
| position: relative; | |
| } | |
| a.self-link { | |
| position: absolute; | |
| top: 0; | |
| left: calc(-1 * (3.5rem - 26px)); | |
| width: calc(3.5rem - 26px); | |
| height: 2em; | |
| text-align: center; | |
| border: none; | |
| transition: opacity .2s; | |
| opacity: .5; | |
| } | |
| a.self-link:hover { | |
| opacity: 1; | |
| } | |
| .heading > a.self-link { | |
| font-size: 83%; | |
| } | |
| li > a.self-link { | |
| left: calc(-1 * (3.5rem - 26px) - 2em); | |
| } | |
| dfn > a.self-link { | |
| top: auto; | |
| left: auto; | |
| opacity: 0; | |
| width: 1.5em; | |
| height: 1.5em; | |
| background: gray; | |
| color: white; | |
| font-style: normal; | |
| transition: opacity .2s, background-color .2s, color .2s; | |
| } | |
| dfn:hover > a.self-link { | |
| opacity: 1; | |
| } | |
| dfn > a.self-link:hover { | |
| color: black; | |
| } | |
| a.self-link::before { content: "¶"; } | |
| .heading > a.self-link::before { content: "§"; } | |
| dfn > a.self-link::before { content: "#"; }</style> | |
| <style>/* style-counters */ | |
| body { | |
| counter-reset: example figure issue; | |
| } | |
| .issue { | |
| counter-increment: issue; | |
| } | |
| .issue:not(.no-marker)::before { | |
| content: "Issue " counter(issue); | |
| } | |
| .example { | |
| counter-increment: example; | |
| } | |
| .example:not(.no-marker)::before { | |
| content: "Example " counter(example); | |
| } | |
| .invalid.example:not(.no-marker)::before, | |
| .illegal.example:not(.no-marker)::before { | |
| content: "Invalid Example" counter(example); | |
| } | |
| figcaption { | |
| counter-increment: figure; | |
| } | |
| figcaption:not(.no-marker)::before { | |
| content: "Figure " counter(figure) " "; | |
| }</style> | |
| <style>/* style-autolinks */ | |
| .css.css, .property.property, .descriptor.descriptor { | |
| color: #005a9c; | |
| font-size: inherit; | |
| font-family: inherit; | |
| } | |
| .css::before, .property::before, .descriptor::before { | |
| content: "‘"; | |
| } | |
| .css::after, .property::after, .descriptor::after { | |
| content: "’"; | |
| } | |
| .property, .descriptor { | |
| /* Don't wrap property and descriptor names */ | |
| white-space: nowrap; | |
| } | |
| .type { /* CSS value <type> */ | |
| font-style: italic; | |
| } | |
| pre .property::before, pre .property::after { | |
| content: ""; | |
| } | |
| [data-link-type="property"]::before, | |
| [data-link-type="propdesc"]::before, | |
| [data-link-type="descriptor"]::before, | |
| [data-link-type="value"]::before, | |
| [data-link-type="function"]::before, | |
| [data-link-type="at-rule"]::before, | |
| [data-link-type="selector"]::before, | |
| [data-link-type="maybe"]::before { | |
| content: "‘"; | |
| } | |
| [data-link-type="property"]::after, | |
| [data-link-type="propdesc"]::after, | |
| [data-link-type="descriptor"]::after, | |
| [data-link-type="value"]::after, | |
| [data-link-type="function"]::after, | |
| [data-link-type="at-rule"]::after, | |
| [data-link-type="selector"]::after, | |
| [data-link-type="maybe"]::after { | |
| content: "’"; | |
| } | |
| [data-link-type].production::before, | |
| [data-link-type].production::after, | |
| .prod [data-link-type]::before, | |
| .prod [data-link-type]::after { | |
| content: ""; | |
| } | |
| [data-link-type=element], | |
| [data-link-type=element-attr] { | |
| font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace; | |
| font-size: .9em; | |
| } | |
| [data-link-type=element]::before { content: "<" } | |
| [data-link-type=element]::after { content: ">" } | |
| [data-link-type=biblio] { | |
| white-space: pre; | |
| }</style> | |
| <style>/* style-dfn-panel */ | |
| .dfn-panel { | |
| position: absolute; | |
| z-index: 35; | |
| height: auto; | |
| width: -webkit-fit-content; | |
| width: fit-content; | |
| max-width: 300px; | |
| max-height: 500px; | |
| overflow: auto; | |
| padding: 0.5em 0.75em; | |
| font: small Helvetica Neue, sans-serif, Droid Sans Fallback; | |
| background: #DDDDDD; | |
| color: black; | |
| border: outset 0.2em; | |
| } | |
| .dfn-panel:not(.on) { display: none; } | |
| .dfn-panel * { margin: 0; padding: 0; text-indent: 0; } | |
| .dfn-panel > b { display: block; } | |
| .dfn-panel a { color: black; } | |
| .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; } | |
| .dfn-panel > b + b { margin-top: 0.25em; } | |
| .dfn-panel ul { padding: 0; } | |
| .dfn-panel li { list-style: inside; } | |
| .dfn-panel.activated { | |
| display: inline-block; | |
| position: fixed; | |
| left: .5em; | |
| bottom: 2em; | |
| margin: 0 auto; | |
| max-width: calc(100vw - 1.5em - .4em - .5em); | |
| max-height: 30vh; | |
| } | |
| .dfn-paneled { cursor: pointer; } | |
| </style> | |
| <style>/* style-syntax-highlighting */ | |
| pre.idl.highlight { color: #708090; } | |
| .highlight:not(.idl) { background: hsl(24, 20%, 95%); } | |
| code.highlight { padding: .1em; border-radius: .3em; } | |
| pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; } | |
| .highlight .c { color: #708090 } /* Comment */ | |
| .highlight .k { color: #990055 } /* Keyword */ | |
| .highlight .l { color: #000000 } /* Literal */ | |
| .highlight .n { color: #0077aa } /* Name */ | |
| .highlight .o { color: #999999 } /* Operator */ | |
| .highlight .p { color: #999999 } /* Punctuation */ | |
| .highlight .cm { color: #708090 } /* Comment.Multiline */ | |
| .highlight .cp { color: #708090 } /* Comment.Preproc */ | |
| .highlight .c1 { color: #708090 } /* Comment.Single */ | |
| .highlight .cs { color: #708090 } /* Comment.Special */ | |
| .highlight .kc { color: #990055 } /* Keyword.Constant */ | |
| .highlight .kd { color: #990055 } /* Keyword.Declaration */ | |
| .highlight .kn { color: #990055 } /* Keyword.Namespace */ | |
| .highlight .kp { color: #990055 } /* Keyword.Pseudo */ | |
| .highlight .kr { color: #990055 } /* Keyword.Reserved */ | |
| .highlight .kt { color: #990055 } /* Keyword.Type */ | |
| .highlight .ld { color: #000000 } /* Literal.Date */ | |
| .highlight .m { color: #000000 } /* Literal.Number */ | |
| .highlight .s { color: #a67f59 } /* Literal.String */ | |
| .highlight .na { color: #0077aa } /* Name.Attribute */ | |
| .highlight .nc { color: #0077aa } /* Name.Class */ | |
| .highlight .no { color: #0077aa } /* Name.Constant */ | |
| .highlight .nd { color: #0077aa } /* Name.Decorator */ | |
| .highlight .ni { color: #0077aa } /* Name.Entity */ | |
| .highlight .ne { color: #0077aa } /* Name.Exception */ | |
| .highlight .nf { color: #0077aa } /* Name.Function */ | |
| .highlight .nl { color: #0077aa } /* Name.Label */ | |
| .highlight .nn { color: #0077aa } /* Name.Namespace */ | |
| .highlight .py { color: #0077aa } /* Name.Property */ | |
| .highlight .nt { color: #669900 } /* Name.Tag */ | |
| .highlight .nv { color: #222222 } /* Name.Variable */ | |
| .highlight .ow { color: #999999 } /* Operator.Word */ | |
| .highlight .mb { color: #000000 } /* Literal.Number.Bin */ | |
| .highlight .mf { color: #000000 } /* Literal.Number.Float */ | |
| .highlight .mh { color: #000000 } /* Literal.Number.Hex */ | |
| .highlight .mi { color: #000000 } /* Literal.Number.Integer */ | |
| .highlight .mo { color: #000000 } /* Literal.Number.Oct */ | |
| .highlight .sb { color: #a67f59 } /* Literal.String.Backtick */ | |
| .highlight .sc { color: #a67f59 } /* Literal.String.Char */ | |
| .highlight .sd { color: #a67f59 } /* Literal.String.Doc */ | |
| .highlight .s2 { color: #a67f59 } /* Literal.String.Double */ | |
| .highlight .se { color: #a67f59 } /* Literal.String.Escape */ | |
| .highlight .sh { color: #a67f59 } /* Literal.String.Heredoc */ | |
| .highlight .si { color: #a67f59 } /* Literal.String.Interpol */ | |
| .highlight .sx { color: #a67f59 } /* Literal.String.Other */ | |
| .highlight .sr { color: #a67f59 } /* Literal.String.Regex */ | |
| .highlight .s1 { color: #a67f59 } /* Literal.String.Single */ | |
| .highlight .ss { color: #a67f59 } /* Literal.String.Symbol */ | |
| .highlight .vc { color: #0077aa } /* Name.Variable.Class */ | |
| .highlight .vg { color: #0077aa } /* Name.Variable.Global */ | |
| .highlight .vi { color: #0077aa } /* Name.Variable.Instance */ | |
| .highlight .il { color: #000000 } /* Literal.Number.Integer.Long */ | |
| </style> | |
| <body class="h-entry"> | |
| <div class="head"> | |
| <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p> | |
| <h1 class="p-name no-ref" id="title">Worklets Level 1</h1> | |
| <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2017-04-07">7 April 2017</time></span></h2> | |
| <div data-fill-with="spec-metadata"> | |
| <dl> | |
| <dt>This version: | |
| <dd><a class="u-url" href="https://drafts.css-houdini.org/worklets/">https://drafts.css-houdini.org/worklets/</a> | |
| <dt>Previous Versions: | |
| <dd><a href="http://www.w3.org/TR/2016/WD-worklets-1-20160607/" rel="previous">http://www.w3.org/TR/2016/WD-worklets-1-20160607/</a> | |
| <dt>Feedback: | |
| <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bworklets%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[worklets] <i data-lt="">… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span> | |
| <dt>Issue Tracking: | |
| <dd><a href="https://github.com/w3c/css-houdini-drafts/issues/">GitHub</a> | |
| <dd><a href="#issues-index">Inline In Spec</a> | |
| <dt class="editor">Editor: | |
| <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ikilpatrick@chromium.org">Ian Kilpatrick</a> | |
| </dl> | |
| </div> | |
| <div data-fill-with="warning"></div> | |
| <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2017 <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p> | |
| <hr title="Separator for header"> | |
| </div> | |
| <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2> | |
| <div class="p-summary" data-fill-with="abstract"> | |
| <p>This specification defines an API for running scripts in stages of the rendering pipeline independent of the main javascript execution environment.</p> | |
| </div> | |
| <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2> | |
| <div data-fill-with="status"> | |
| <p> This is a public copy of the editors’ draft. | |
| It is provided for discussion only and may change at any moment. | |
| Its publication here does not imply endorsement of its contents by W3C. | |
| Don’t cite this document other than as work in progress. </p> | |
| <p> <a href="https://github.com/w3c/css-houdini-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification. | |
| When filing an issue, please put the text “worklets” in the title, | |
| preferably like this: | |
| “[worklets] <i>…summary of comment…</i>”. | |
| All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-houdini-archive/">archived</a>. </p> | |
| <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of the <a href="http://www.w3.org/Style/">Style Activity</a>). </p> | |
| <p> This document was produced by a group operating under | |
| the <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent Policy</a>. | |
| W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; | |
| that page also includes instructions for disclosing a patent. | |
| An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p> | |
| <p> This document is governed by the <a href="https://www.w3.org/2017/Process-20170301/" id="w3c_process_revision">1 March 2017 W3C Process Document</a>. </p> | |
| <p></p> | |
| </div> | |
| <div data-fill-with="at-risk"></div> | |
| <nav data-fill-with="table-of-contents" id="toc"> | |
| <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2> | |
| <ol class="toc" role="directory"> | |
| <li> | |
| <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a> | |
| <ol class="toc"> | |
| <li><a href="#motivations"><span class="secno">1.1</span> <span class="content">Motivations</span></a> | |
| <li><a href="#code-idempotency"><span class="secno">1.2</span> <span class="content">Code Idempotency</span></a> | |
| </ol> | |
| <li> | |
| <a href="#infrastructure"><span class="secno">2</span> <span class="content">Infrastructure</span></a> | |
| <ol class="toc"> | |
| <li> | |
| <a href="#the-global-scope"><span class="secno">2.1</span> <span class="content">The Global Scope</span></a> | |
| <ol class="toc"> | |
| <li><a href="#the-event-loop"><span class="secno">2.1.1</span> <span class="content">The event loop</span></a> | |
| <li><a href="#creating-a-workletglobalscope"><span class="secno">2.1.2</span> <span class="content">Creating a WorkletGlobalScope</span></a> | |
| <li><a href="#script-settings-for-worklets"><span class="secno">2.1.3</span> <span class="content">Script settings for worklets</span></a> | |
| </ol> | |
| <li><a href="#worklet-section"><span class="secno">2.2</span> <span class="content">Worklet</span></a> | |
| <li><a href="#lifetime-of-the-worklet"><span class="secno">2.3</span> <span class="content">Lifetime of the Worklet</span></a> | |
| </ol> | |
| <li><a href="#security-considerations"><span class="secno">3</span> <span class="content">Security Considerations</span></a> | |
| <li> | |
| <a href="#examples"><span class="secno">4</span> <span class="content">Examples</span></a> | |
| <ol class="toc"> | |
| <li><a href="#example-single"><span class="secno">4.1</span> <span class="content">Loading scripts into a worklet.</span></a> | |
| <li><a href="#example-multiple"><span class="secno">4.2</span> <span class="content">Loading scripts into multiple worklets.</span></a> | |
| <li><a href="#example-class"><span class="secno">4.3</span> <span class="content">Create a registered class and invoke a method.</span></a> | |
| </ol> | |
| <li> | |
| <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a> | |
| <ol class="toc"> | |
| <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a> | |
| <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a> | |
| <li> | |
| <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a> | |
| <ol class="toc"> | |
| <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a> | |
| </ol> | |
| <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a> | |
| </ol> | |
| <li> | |
| <a href="#index"><span class="secno"></span> <span class="content">Index</span></a> | |
| <ol class="toc"> | |
| <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a> | |
| <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a> | |
| </ol> | |
| <li> | |
| <a href="#references"><span class="secno"></span> <span class="content">References</span></a> | |
| <ol class="toc"> | |
| <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a> | |
| <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a> | |
| </ol> | |
| <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a> | |
| <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a> | |
| </ol> | |
| </nav> | |
| <main> | |
| <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2> | |
| <h3 class="heading settled" data-level="1.1" id="motivations"><span class="secno">1.1. </span><span class="content">Motivations</span><a class="self-link" href="#motivations"></a></h3> | |
| <p><em>This section is not normative.</em></p> | |
| <p>Allowing extension points defined in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment">document environment</a> is difficult, as rendering | |
| engines would need to abandon previously held assumptions for what could happen in the middle of a | |
| phase.</p> | |
| <p>For example, during the layout phase the rendering engine assumes that no DOM will be modified.</p> | |
| <p>Additionally defining extension points in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment">document environment</a> would restrict rendering | |
| engines to performing work in the same thread as the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment">document environment</a>. (Unless rendering | |
| engines added complex, high-overhead infrastructure to allow thread-safe APIs in addition to thread | |
| joining guarantees).</p> | |
| <p>The worklet is designed to allow such extension points in rendering engines, while keeping | |
| guarantees which rendering engines rely currently on.</p> | |
| <p>Worklets are similar to <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/workers.html#web-workers">web workers</a> however they:</p> | |
| <ul> | |
| <li data-md=""> | |
| <p>Are thread-agnostic. That is, they are not defined to run on a particular thread. Rendering | |
| engines may run them wherever they choose.</p> | |
| <li data-md=""> | |
| <p>Are able to have multiple duplicate instances of the global scope created for the purpose of | |
| parallelism.</p> | |
| <li data-md=""> | |
| <p>Are not event API based. Instead classes are registered on the global scope, whose methods are to | |
| be invoked by the user agent.</p> | |
| <li data-md=""> | |
| <p>Have a reduced API surface on the global scope.</p> | |
| <li data-md=""> | |
| <p>Have a lifetime for the global scope which is defined by subsequent specifications or user | |
| agents. They aren’t tied to the lifetime of the document.</p> | |
| </ul> | |
| <p>As worklets have a relatively high overhead, they should be used sparingly. Due to this worklets are | |
| expected to be shared between separate scripts. This is similar to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#document-environment">document environment</a>.</p> | |
| <h3 class="heading settled" data-level="1.2" id="code-idempotency"><span class="secno">1.2. </span><span class="content">Code Idempotency</span><a class="self-link" href="#code-idempotency"></a></h3> | |
| <p><em>This section is not normative.</em></p> | |
| <p>Multiple instances of <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-1">WorkletGlobalScope</a></code> can be created for each <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-1">Worklet</a></code> that they belong | |
| to. User agents may choose to do this in order to parallelize work over multiple threads, or to move | |
| work between threads as required.</p> | |
| <p>Additionally different user agents may invoke a method on a class in a different order to other user | |
| agents.</p> | |
| <p>As a result of this, to prevent this compatibility risk between user agents, authors who register | |
| classes on the global scope should make their code idempotent. That is, a method or set of methods | |
| on a class should produce the same output given a particular input.</p> | |
| <p>The following techniques should be used in order to encourage authors to write code in an idempotent | |
| way:</p> | |
| <ul> | |
| <li data-md=""> | |
| <p>No reference to the global object, e.g. <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/workers.html#dom-workerglobalscope-self">self</a> on a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope">DedicatedWorkerGlobalScope</a></code>.</p> | |
| <li data-md=""> | |
| <p>Code is loaded as a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#module-script">module script</a> which resulting in the code being executed in <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-code">strict | |
| mode code</a> without a shared this. This prevents two different module scripts sharing | |
| state be referencing shared objects on the global scope.</p> | |
| <li data-md=""> | |
| <p>User agents may choose to always have at least two <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-2">WorkletGlobalScope</a></code>s per <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-2">Worklet</a></code> and | |
| randomly assign a method or set of methods on a class to a particular global scope.</p> | |
| <li data-md=""> | |
| <p>User agents may create and destroy <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-3">WorkletGlobalScope</a></code>s at any time.</p> | |
| </ul> | |
| <h2 class="heading settled" data-level="2" id="infrastructure"><span class="secno">2. </span><span class="content">Infrastructure</span><a class="self-link" href="#infrastructure"></a></h2> | |
| <h3 class="heading settled" data-level="2.1" id="the-global-scope"><span class="secno">2.1. </span><span class="content">The Global Scope</span><a class="self-link" href="#the-global-scope"></a></h3> | |
| <p>The <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-4">WorkletGlobalScope</a></code> object provides a <dfn data-dfn-type="dfn" data-noexport="" id="worklet-global-scope">worklet global scope<a class="self-link" href="#worklet-global-scope"></a></dfn> which represents the | |
| global execution context of a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-3">Worklet</a></code>.</p> | |
| <pre class="idl highlight def">[<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed">Exposed</a>=<span class="n">Worklet</span>] | |
| <span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="interface" data-export="" id="workletglobalscope">WorkletGlobalScope</dfn> { | |
| }; | |
| </pre> | |
| <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-5">WorkletGlobalScope</a></code> has an associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object">environment settings object</a>.</p> | |
| <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-6">WorkletGlobalScope</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="worklet-global-scope-execution-environment">worklet global scope execution environment</dfn>. This | |
| execution environment may be parallel (i.e. it may be on a separate thread, process, or other | |
| equivalent construct), or it may live on the same thread or process as the <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-4">Worklet</a></code> object it | |
| belongs to. Which thread or process it lives on is decided by the user agent.</p> | |
| <p class="note" role="note"><span>Note:</span> The <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-7">WorkletGlobalScope</a></code> has a limited global scope when compared to a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope">DedicatedWorkerGlobalScope</a></code>. It is expected that other specifications will extend <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-8">WorkletGlobalScope</a></code> with <code class="lang-javascript highlight">registerAClass</code> methods which | |
| will allow authors to register classes for the user agent create and invoke methods on.</p> | |
| <h4 class="heading settled" data-level="2.1.1" id="the-event-loop"><span class="secno">2.1.1. </span><span class="content">The event loop</span><a class="self-link" href="#the-event-loop"></a></h4> | |
| <p>Each <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-9">WorkletGlobalScope</a></code> object has a distinct <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">event loop</a>. This <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">event loop</a> has no | |
| associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#browsing-context">browsing context</a>. The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">event loop</a> is created by the <a data-link-type="dfn" href="#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope-1">create a | |
| WorkletGlobalScope</a> algorithm.</p> | |
| <p>The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">event loop</a> is run on the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment-1">worklet global scope execution environment</a> defined above.</p> | |
| <p>It is expected that only tasks associated <code class="idl"><a data-link-type="idl" href="#dom-worklet-import" id="ref-for-dom-worklet-import-1">import()</a></code>, the user agent invoking author | |
| defined callbacks, and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask">microtasks</a> will use this <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">event loop</a>.</p> | |
| <p class="note" role="note"><span>Note:</span> Even through the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">event loop processing model</a> specifies that it loops continually, | |
| practically implementations aren’t expected to do this. The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask-queue">microtask queue</a> is emptied | |
| while <a data-link-type="dfn" href="http://heycam.github.io/webidl/#es-invoking-callback-functions">invoking callback functions</a> provided by the author.</p> | |
| <h4 class="heading settled" data-level="2.1.2" id="creating-a-workletglobalscope"><span class="secno">2.1.2. </span><span class="content">Creating a WorkletGlobalScope</span><a class="self-link" href="#creating-a-workletglobalscope"></a></h4> | |
| <p>When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="create-a-workletglobalscope">create a WorkletGlobalScope</dfn>, given <var>workletGlobalScopeType</var>, <var>moduleResponsesMap</var>, and <var>outsideSettings</var>, it <em>must</em> run the following steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Create the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment-2">worklet global scope execution environment</a> and run the rest of these steps | |
| in that context.</p> | |
| <li data-md=""> | |
| <p>Call the JavaScript <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-initializehostdefinedrealm">InitializeHostDefinedRealm</a> abstract operation with the following | |
| customizations:</p> | |
| <ul> | |
| <li data-md=""> | |
| <p>For the global object, create a new <var>workletGlobalScopeType</var> object. Let <var>workletGlobalScope</var> be the created object.</p> | |
| <li data-md=""> | |
| <p>Let <var>realmExecutionContext</var> be the created JavaScript execution context.</p> | |
| <li data-md=""> | |
| <p>Do not obtain any source texts for scripts or modules.</p> | |
| </ul> | |
| <li data-md=""> | |
| <p>Let <var>insideSettings</var> be the result of <a data-link-type="dfn" href="#set-up-a-worklet-environment-settings-object" id="ref-for-set-up-a-worklet-environment-settings-object-1">set up a worklet environment settings object</a> with <var>realmExecutionContext</var>.</p> | |
| <li data-md=""> | |
| <p>Associate the <var>insideSettings</var> with <var>workletGlobalScope</var>.</p> | |
| <li data-md=""> | |
| <p>For each <var>entry</var> in the given <var>moduleResponsesMap</var> (in insertion order), run the following | |
| substeps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Let <var>moduleURLRecord</var> be <var>entry</var>’s key.</p> | |
| <li data-md=""> | |
| <p>Let <var>script</var> be the result of <a data-link-type="dfn" href="#fetch-a-worklet-script" id="ref-for-fetch-a-worklet-script-1">fetch a worklet script</a> given <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>outsideSettings</var>, and <var>insideSettings</var> when | |
| it asynchronously completes.</p> | |
| <li data-md=""> | |
| <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#run-a-module-script">Run a module script</a> given <var>script</var>.</p> | |
| </ol> | |
| <p class="note" role="note"><span>Note:</span> <a data-link-type="dfn" href="#fetch-a-worklet-script" id="ref-for-fetch-a-worklet-script-2">Fetch a worklet script</a> won’t actually perform a network request as it will hit | |
| the worklet’s <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map-1">module responses map</a>. It also won’t have a parsing error as at this | |
| point it should have successfully been parsed by another worklet global scope. I.e. <var>script</var> should never be <em>null</em> here.</p> | |
| <li data-md=""> | |
| <p>Run the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop">responsible event loop</a> specified by <var>insideSettings</var>.</p> | |
| </ol> | |
| <h4 class="heading settled" data-level="2.1.3" id="script-settings-for-worklets"><span class="secno">2.1.3. </span><span class="content">Script settings for worklets</span><a class="self-link" href="#script-settings-for-worklets"></a></h4> | |
| <p>When a user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="set-up-a-worklet-environment-settings-object">set up a worklet environment settings object</dfn>, given a <var>executionContext</var>, it must run the following steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Let <var>inheritedResponsibleBrowsingContext</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context">responsible browsing context</a> specified by the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#incumbent-settings-object">incumbent settings object</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>inheritedOrigin</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#origin-2">origin</a> specified by the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#incumbent-settings-object">incumbent settings object</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>inheritedAPIBaseURL</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url">API base URL</a> specified by the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#incumbent-settings-object">incumbent settings object</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>workletEventLoop</var> be a newly created <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">event loop</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>workletGlobalScope</var> be <var>executionContext</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#global-object">global object</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>settingsObject</var> be a new <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object">environment settings object</a> whose algorithms are | |
| defined as follows:</p> | |
| <dl> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#realm-execution-context">realm execution context</a> | |
| <dd data-md=""> | |
| <p>Return <var>executionContext</var>.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#global-object">global object</a> | |
| <dd data-md=""> | |
| <p>Return <var>workletGlobalScope</var>.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context">responsible browsing context</a> | |
| <dd data-md=""> | |
| <p>Return <var>inheritedResponsibleBrowsingContext</var>.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop">responsible event loop</a> | |
| <dd data-md=""> | |
| <p>Return <var>workletEventLoop</var>.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-document">responsible document</a> | |
| <dd data-md=""> | |
| <p>Not applicable (the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop">responsible event loop</a> is not a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#browsing-context">browsing context</a> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">event loop</a>).</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-url-character-encoding">API URL character encoding</a> | |
| <dd data-md=""> | |
| <p>Return UTF-8.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#api-base-url">API base URL</a> | |
| <dd data-md=""> | |
| <p>Return <var>inheritedAPIBaseURL</var>.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#origin-2">origin</a> and <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#effective-script-origin">effective script origin</a> | |
| <dd data-md=""> | |
| <p>Return <var>inheritedOrigin</var>.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#creation-url">creation URL</a> | |
| <dd data-md=""> | |
| <p>Not applicable.</p> | |
| <dt data-md="">The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#https-state">HTTPS state</a> | |
| <dd data-md=""> | |
| <p>Return <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#https-state">HTTPS state</a>.</p> | |
| </dl> | |
| <li data-md=""> | |
| <p>Return <var>settingsObject</var>.</p> | |
| </ol> | |
| <p class="issue" id="issue-a1972cc8"><a class="self-link" href="#issue-a1972cc8"></a> Merge this with https://html.spec.whatwg.org/multipage/workers.html#set-up-a-worker-environment-settings-object</p> | |
| <h3 class="heading settled" data-level="2.2" id="worklet-section"><span class="secno">2.2. </span><span class="content">Worklet</span><a class="self-link" href="#worklet-section"></a></h3> | |
| <p>The <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-5">Worklet</a></code> object provides the capability to import module scripts into its associated <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-10">WorkletGlobalScope</a></code>s. The user agent can then create classes registered on the <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-11">WorkletGlobalScope</a></code>s and invoke their methods.</p> | |
| <pre class="idl highlight def"><span class="kt">interface</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="interface" data-export="" id="worklet">Worklet</dfn> { | |
| [<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject">NewObject</a>] <span class="kt">Promise</span><<span class="kt">void</span>> <a class="nv idl-code" data-link-type="method" href="#dom-worklet-import" id="ref-for-dom-worklet-import-2">import</a>(<a class="n idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString"><span class="kt">USVString</span></a> <dfn class="nv idl-code" data-dfn-for="Worklet/import(moduleURL)" data-dfn-type="argument" data-export="" id="dom-worklet-import-moduleurl-moduleurl">moduleURL<a class="self-link" href="#dom-worklet-import-moduleurl-moduleurl"></a></dfn>); | |
| }; | |
| </pre> | |
| <p>A <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-6">Worklet</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="worklet-global-scope-type">worklet global scope type</dfn>. This is used for creating new <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-12">WorkletGlobalScope</a></code> and the type must <a data-link-type="dfn" href="http://heycam.github.io/webidl/#dfn-inherit">inherit</a> from <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-13">WorkletGlobalScope</a></code>.</p> | |
| <p class="note" role="note"><span>Note:</span> As an example the <a data-link-type="dfn" href="#worklet-global-scope-type" id="ref-for-worklet-global-scope-type-1">worklet global scope type</a> might be a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/css-paint-api-1/#paintworkletglobalscope">PaintWorkletGlobalScope</a></code>.</p> | |
| <p>A <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-7">Worklet</a></code> has a list of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export="" id="worklets-workletglobalscopes">worklet’s WorkletGlobalScopes</dfn>. Initially this list | |
| is empty; it is populated when the user agent chooses to create its <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-14">WorkletGlobalScope</a></code>.</p> | |
| <p>A <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-8">Worklet</a></code> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="module-responses-map">module responses map</dfn>. This is a ordered map of module URLs to values | |
| that are a <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch">fetch</a> responses. The map’s entries are ordered based on their insertion order. | |
| Access to this map should be thread-safe.</p> | |
| <p>The <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map-2">module responses map</a> exists to ensure that <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-15">WorkletGlobalScope</a></code>s created at different | |
| times contain the same set of script source text and have the same behaviour. The creation of | |
| additional <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-16">WorkletGlobalScope</a></code>s should be transparent to the author.</p> | |
| <div class="note" role="note"> | |
| Practically user agents aren’t expected to implement the following algorithm using a | |
| thread-safe map. Instead when <code class="idl"><a data-link-type="idl" href="#dom-worklet-import" id="ref-for-dom-worklet-import-3">import()</a></code> is called user agents can fetch the module | |
| graph on the main thread, and send the fetched sources (the data contained in the <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map-3">module | |
| responses map</a>) to each thread which has a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-17">WorkletGlobalScope</a></code>. | |
| <p>If the user agent wishes to create a new <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-18">WorkletGlobalScope</a></code> it can simply sent the list of | |
| all fetched sources from the main thread to the thread which owns the <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-19">WorkletGlobalScope</a></code>.</p> | |
| </div> | |
| <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="pending-tasks-struct">pending tasks struct</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct">struct</a> consiting of:</p> | |
| <ul> | |
| <li data-md=""> | |
| <p>A <dfn class="dfn-paneled" data-dfn-for="pending-tasks-struct" data-dfn-type="dfn" data-noexport="" id="pending-tasks-struct-counter">counter</dfn>.</p> | |
| </ul> | |
| This is used by the algorithms below. | |
| <hr> | |
| <p>When the <dfn class="dfn-paneled idl-code" data-dfn-for="Worklet" data-dfn-type="method" data-export="" id="dom-worklet-import">import(<var>moduleURL</var>)</dfn> method is called on a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-9">Worklet</a></code> object, | |
| the user agent <em>must</em> run the following steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Let <var>promise</var> be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide#a-new-promise">a new promise</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>worklet</var> be the current <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-10">Worklet</a></code>.</p> | |
| <li data-md=""> | |
| <p>Let <var>moduleURLRecord</var> be the result of <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar">parsing</a> the <var>moduleURL</var> argument relative to | |
| the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object">relevant settings object</a> of <b>this</b>.</p> | |
| <li data-md=""> | |
| <p>If <var>moduleURLRecord</var> is failure, then reject promise with a "<a data-link-type="dfn" href="http://heycam.github.io/webidl/#syntaxerror">SyntaxError</a>" <a data-link-type="dfn" href="http://heycam.github.io/webidl/#idl-domexception">DOMException</a> and return <var>promise</var>.</p> | |
| <li data-md=""> | |
| <p>Return <var>promise</var>, and then continue running this algorithm <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">in parallel</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>outsideSettings</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object">relevant settings object</a> of <b>this</b>.</p> | |
| <li data-md=""> | |
| <p>Let <var>moduleResponsesMap</var> be <var>worklet</var>’s <a data-link-type="dfn" href="#module-responses-map" id="ref-for-module-responses-map-4">module responses map</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>workletGlobalScopeType</var> be <var>worklet</var>’s <a data-link-type="dfn" href="#worklet-global-scope-type" id="ref-for-worklet-global-scope-type-2">worklet global scope type</a>.</p> | |
| <li data-md=""> | |
| <p>If the <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes-1">worklet’s WorkletGlobalScopes</a> is empty, run the following steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p><a data-link-type="dfn" href="#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope-2">Create a WorkletGlobalScope</a> given <var>workletGlobalScopeType</var>, <var>moduleResponsesMap</var>, | |
| and <var>outsideSettings</var>.</p> | |
| <li data-md=""> | |
| <p>Add the <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-20">WorkletGlobalScope</a></code> to <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes-2">worklet’s WorkletGlobalScopes</a>.</p> | |
| </ol> | |
| <p>The user agent may also create additional <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-21">WorkletGlobalScope</a></code>s at this time.</p> | |
| <p>Wait for this step to complete before continuing.</p> | |
| <li data-md=""> | |
| <p>Let <var>pendingTaskStruct</var> be a new <a data-link-type="dfn" href="#pending-tasks-struct" id="ref-for-pending-tasks-struct-1">pending tasks struct</a> with <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter-1">counter</a> initialized to the length of <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes-3">worklet’s | |
| WorkletGlobalScopes</a>.</p> | |
| <li data-md=""> | |
| <p>For each <var>workletGlobalScope</var> in the <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes-4">worklet’s WorkletGlobalScopes</a>, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">queue a | |
| task</a> on the <var>workletGlobalScope</var> to <a data-link-type="dfn" href="#fetch-and-invoke-a-worklet-script" id="ref-for-fetch-and-invoke-a-worklet-script-1">fetch and invoke a worklet script</a> given <var>workletGlobalScope</var>, <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>outsideSettings</var>, <var>pendingTaskStruct</var>, and <var>promise</var>.</p> | |
| </ol> | |
| <p class="note" role="note"><span>Note:</span> The rejecting and resolving of the <var>promise</var> occurs within the <a data-link-type="dfn" href="#fetch-and-invoke-a-worklet-script" id="ref-for-fetch-and-invoke-a-worklet-script-2">fetch and invoke a | |
| worklet script</a> algorithm.</p> | |
| <hr> | |
| <p>When the user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="fetch-and-invoke-a-worklet-script">fetch and invoke a worklet script</dfn> given <var>workletGlobalScope</var>, <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>outsideSettings</var>, <var>pendingTaskStruct</var>, and <var>promise</var>, the | |
| user agent <em>must</em> run the following steps:</p> | |
| <p class="note" role="note"><span>Note:</span> This algorithm is to be run within the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment-3">worklet global scope execution environment</a>.</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Let <var>insideSettings</var> be the <var>workletGlobalScope</var>’s associated <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object">environment settings object</a>.</p> | |
| <li data-md=""> | |
| <p>Let <var>script</var> by the result of <a data-link-type="dfn" href="#fetch-a-worklet-script" id="ref-for-fetch-a-worklet-script-3">fetch a worklet script</a> given <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>outsideSettings</var>, and <var>insideSettings</var> when it asynchronously completes.</p> | |
| <li data-md=""> | |
| <p>If <var>script</var> is <em>null</em>, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">queue a task</a> on <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop">responsible | |
| event loop</a> to run these steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>If <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter-2">counter</a> is not <b>-1</b>, then | |
| run these steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Set <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter-3">counter</a> to <b>-1</b>.</p> | |
| <li data-md=""> | |
| <p>Reject <var>promise</var> with an "<a data-link-type="dfn" href="http://heycam.github.io/webidl/#aborterror">AbortError</a>" <a data-link-type="dfn" href="http://heycam.github.io/webidl/#idl-domexception">DOMException</a>.</p> | |
| </ol> | |
| </ol> | |
| <li data-md=""> | |
| <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#run-a-module-script">Run a module script</a> given <var>script</var>.</p> | |
| <li data-md=""> | |
| <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">Queue a task</a> on <var>outsideSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-event-loop">responsible event loop</a> to run these steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>If <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter-4">counter</a> is not <b>-1</b>, then run | |
| these steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Decrement <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter-5">counter</a> by <b>1</b>.</p> | |
| <li data-md=""> | |
| <p>If <var>pendingTaskStruct</var>’s <a data-link-type="dfn" href="#pending-tasks-struct-counter" id="ref-for-pending-tasks-struct-counter-6">counter</a> is <b>0</b>, then | |
| resolve <var>promise</var>.</p> | |
| </ol> | |
| </ol> | |
| </ol> | |
| <hr> | |
| <p>When the user agent is to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="fetch-a-worklet-script">fetch a worklet script</dfn> given <var>moduleURLRecord</var>, <var>moduleResponsesMap</var>, <var>outsideSettings</var>, and <var>insideSettings</var>, the user agent <em>must</em> run the following steps:</p> | |
| <p class="note" role="note"><span>Note:</span> This algorithm is to be run within the <a data-link-type="dfn" href="#worklet-global-scope-execution-environment" id="ref-for-worklet-global-scope-execution-environment-4">worklet global scope execution environment</a>.</p> | |
| <ol> | |
| <li data-md=""> | |
| <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-module-worker-script-tree">Fetch a module worker script graph</a> given <var>moduleURLRecord</var>, <var>outsideSettings</var>, "script", | |
| "omit", and <var>insideSettings</var>.</p> | |
| <p>To <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#perform-the-request">perform the request</a> given <var>request</var>, perform the following steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Let <var>cache</var> be the <var>moduleResponsesMap</var>.</p> | |
| <li data-md=""> | |
| <p>Let <var>url</var> be <var>request</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-url">url</a>.</p> | |
| <li data-md=""> | |
| <p>If <var>cache</var> contains an entry with key <var>url</var> whose value is "fetching", wait until that | |
| entry’s value changes, then proceed to the next step.</p> | |
| <li data-md=""> | |
| <p>If <var>cache</var> contains an entry with key <var>url</var>, asynchronously complete this algorithm with | |
| that entry’s value, and abort these steps.</p> | |
| <li data-md=""> | |
| <p>Create an entry in <var>cache</var> with key <var>url</var> and value "fetching".</p> | |
| <li data-md=""> | |
| <p><a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch">Fetch</a> <var>request</var>.</p> | |
| <li data-md=""> | |
| <p>Let <var>response</var> be the result of <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch">fetch</a> when it asynchronously completes.</p> | |
| <li data-md=""> | |
| <p>Set the value of the entry in <var>cache</var> whose key is <var>url</var> to <var>response</var>, and | |
| asynchronously complete this algorithm with <var>response</var>.</p> | |
| </ol> | |
| <li data-md=""> | |
| <p>Return the result of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-module-worker-script-tree">fetch a module worker script graph</a> when it asynchronously completes.</p> | |
| </ol> | |
| <p class="note" role="note"><span>Note:</span> Specifically, if a script fails to parse or fails to load over the network, it will reject the | |
| promise. If the script throws an error while first evaluating the promise it will resolve as a | |
| classes may have been registered correctly.</p> | |
| <div class="example" id="example-b01b46c4"> | |
| <a class="self-link" href="#example-b01b46c4"></a> When an author imports code into a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-11">Worklet</a></code> the code may run against multiple <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-22">WorkletGlobalScope</a></code>s, for example: | |
| <pre class="lang-javascript highlight"><span class="c1">// script.js | |
| </span>console<span class="p">.</span>log<span class="p">(</span><span class="s1">'Hello from a WorkletGlobalScope!'</span><span class="p">)</span><span class="p">;</span> | |
| </pre> | |
| <pre class="lang-javascript highlight"><span class="c1">// main.js | |
| </span>await CSS<span class="p">.</span>paintWorklet<span class="p">.</span><span class="kr">import</span><span class="p">(</span><span class="s1">'script.js'</span><span class="p">)</span><span class="p">;</span> | |
| </pre> | |
| <p>Behind the scenes the user agent may load the <code class="lang-javascript highlight">script<span class="p">.</span>js</code> into 4 global scopes, in which case the debugging tools for the user agent would print:</p> | |
| <pre class="lang-javascript highlight"><span class="p">[</span>paintWorklet#<span class="mi">1</span><span class="p">]</span> Hello from a WorkletGlobalScope<span class="o">!</span> | |
| <span class="p">[</span>paintWorklet#<span class="mi">4</span><span class="p">]</span> Hello from a WorkletGlobalScope<span class="o">!</span> | |
| <span class="p">[</span>paintWorklet#<span class="mi">2</span><span class="p">]</span> Hello from a WorkletGlobalScope<span class="o">!</span> | |
| <span class="p">[</span>paintWorklet#<span class="mi">3</span><span class="p">]</span> Hello from a WorkletGlobalScope<span class="o">!</span> | |
| </pre> | |
| <p>If the user agent decided to kill and restart a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-23">WorkletGlobalScope</a></code> number 3 in this example, | |
| it would print <code class="lang-javascript highlight"><span class="p">[</span>paintWorklet#<span class="mi">3</span><span class="p">]</span> Hello from a | |
| WorkletGlobalScope<span class="o">!</span></code> again in the debugging tools when this occurs.</p> | |
| </div> | |
| <p class="issue" id="issue-71a0efbc"><a class="self-link" href="#issue-71a0efbc"></a> Need ability to load code into a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-24">WorkletGlobalScope</a></code> declaratively. <a href="https://github.com/w3c/css-houdini-drafts/issues/47"><https://github.com/w3c/css-houdini-drafts/issues/47></a></p> | |
| <h3 class="heading settled" data-level="2.3" id="lifetime-of-the-worklet"><span class="secno">2.3. </span><span class="content">Lifetime of the Worklet</span><a class="self-link" href="#lifetime-of-the-worklet"></a></h3> | |
| <p>The lifetime of a <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-12">Worklet</a></code> is tied to the object it belongs to, for example the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a></code>.</p> | |
| <p>The lifetime of a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-25">WorkletGlobalScope</a></code> should be defined by subsequent specifications which | |
| inherit from <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-26">WorkletGlobalScope</a></code>.</p> | |
| <p>Subsequent specifications <em>may</em> define that a <code class="idl"><a data-link-type="idl" href="#workletglobalscope" id="ref-for-workletglobalscope-27">WorkletGlobalScope</a></code> can be terminated at any | |
| time particularly if there are no pending operations, or detects abnormal operation such as infinite | |
| loops and callbacks exceeding imposed time limits.</p> | |
| <h2 class="heading settled" data-level="3" id="security-considerations"><span class="secno">3. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2> | |
| <p class="issue" id="issue-94eacd79"><a class="self-link" href="#issue-94eacd79"></a> Need to decide if to allow worklets for unsecure context, etc. <a href="https://github.com/w3c/css-houdini-drafts/issues/92"><https://github.com/w3c/css-houdini-drafts/issues/92></a></p> | |
| <h2 class="heading settled" data-level="4" id="examples"><span class="secno">4. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2> | |
| <p><em>This section is not normative.</em></p> | |
| <p>For these examples we’ll use a fake worklet on window.</p> | |
| <div class="example" id="example-be2002ab"> | |
| <a class="self-link" href="#example-be2002ab"></a> | |
| <pre class="idl highlight def"><span class="kt">partial</span> <span class="kt">interface</span> <span class="nv">Window</span> { | |
| [<span class="nv">SameObject</span>] <span class="kt">readonly</span> <span class="kt">attribute</span> <span class="n">Worklet</span> <span class="nv">fakeWorklet1</span>; | |
| [<span class="nv">SameObject</span>] <span class="kt">readonly</span> <span class="kt">attribute</span> <span class="n">Worklet</span> <span class="nv">fakeWorklet2</span>; | |
| }; | |
| </pre> | |
| <pre class="idl highlight def"><span class="kt">callback</span> <span class="nv">Function</span> = <span class="kt">any</span> (<span class="kt">any</span>... <span class="nv">arguments</span>); | |
| [<span class="nv">Global</span>=(<span class="n">Worklet</span>,<span class="n">FakeWorklet</span>),<span class="nv">Exposed</span>=<span class="n">FakeWorklet</span>] | |
| <span class="kt">interface</span> <span class="nv">FakeWorkletGlobalScope</span> : <span class="n">WorkletGlobalScope</span> { | |
| <span class="kt">void</span> <span class="nv">registerAnArbitaryClass</span>(<span class="kt">DOMString</span> <span class="nv">type</span>, <span class="n">Function</span> <span class="nv">classConstructor</span>); | |
| }; | |
| </pre> | |
| <p>Each <code class="idl"><a data-link-type="idl">FakeWorkletGlobalScope</a></code> has a map of the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport="" id="registered-class-constructors-map">registered class constructors map</dfn>.</p> | |
| <p>When the <dfn class="idl-code" data-dfn-for="FakeWorkletGlobalScope" data-dfn-type="method" data-export="" data-lt="registerAnArbitaryClass(type, classConstructor)" id="dom-fakeworkletglobalscope-registeranarbitaryclass"> registerAnArbitaryClass(<var>type</var>, <var>classConstructor</var>)<a class="self-link" href="#dom-fakeworkletglobalscope-registeranarbitaryclass"></a></dfn> method is called, the user agent will add | |
| the <var>classConstructor</var> of <var>type</var> to the map of <a data-link-type="dfn" href="#registered-class-constructors-map" id="ref-for-registered-class-constructors-map-1">registered class constructors map</a>.</p> | |
| </div> | |
| <h3 class="heading settled" data-level="4.1" id="example-single"><span class="secno">4.1. </span><span class="content">Loading scripts into a worklet.</span><a class="self-link" href="#example-single"></a></h3> | |
| <pre class="lang-javascript highlight">window<span class="p">.</span>fakeWorklet1<span class="p">.</span><span class="kr">import</span><span class="p">(</span><span class="s1">'script1.js'</span><span class="p">)</span><span class="p">;</span> | |
| window<span class="p">.</span>fakeWorklet1<span class="p">.</span><span class="kr">import</span><span class="p">(</span><span class="s1">'script2.js'</span><span class="p">)</span><span class="p">;</span> | |
| <span class="c1">// Assuming no other calls to fakeWorklet1 valid script loading orderings are: | |
| </span><span class="c1">// 1. 'script1.js', 'script2.js' | |
| </span><span class="c1">// 2. 'script2.js', 'script1.js' | |
| </span></pre> | |
| <h3 class="heading settled" data-level="4.2" id="example-multiple"><span class="secno">4.2. </span><span class="content">Loading scripts into multiple worklets.</span><a class="self-link" href="#example-multiple"></a></h3> | |
| <pre class="lang-javascript highlight">Promise<span class="p">.</span>all<span class="p">(</span><span class="p">[</span> | |
| window<span class="p">.</span>fakeWorklet1<span class="p">.</span><span class="kr">import</span><span class="p">(</span><span class="s1">'script1.js'</span><span class="p">)</span><span class="p">,</span> | |
| window<span class="p">.</span>fakeWorklet2<span class="p">.</span><span class="kr">import</span><span class="p">(</span><span class="s1">'script2.js'</span><span class="p">)</span> | |
| <span class="p">]</span><span class="p">)</span><span class="p">.</span>then<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="p">)</span> <span class="p">{</span> | |
| <span class="c1">// Both scripts now have loaded code, can do a task which relies on this. | |
| </span><span class="p">}</span><span class="p">)</span><span class="p">;</span> | |
| </pre> | |
| <h3 class="heading settled" data-level="4.3" id="example-class"><span class="secno">4.3. </span><span class="content">Create a registered class and invoke a method.</span><a class="self-link" href="#example-class"></a></h3> | |
| <pre class="lang-javascript highlight"><span class="c1">// Inside FakeWorkletGlobalScope | |
| </span>registerAnArbitaryClass<span class="p">(</span><span class="s1">'key'</span><span class="p">,</span> <span class="kr">class</span> FooClass <span class="p">{</span> | |
| process<span class="p">(</span>arg<span class="p">)</span> <span class="p">{</span> | |
| <span class="k">return</span> <span class="o">!</span>arg<span class="p">;</span> | |
| <span class="p">}</span> | |
| <span class="p">}</span><span class="p">)</span><span class="p">;</span> | |
| </pre> | |
| <p>As an example, if the user agent wants to invoke "process" on a new class instance, the user agent | |
| could follow the following steps:</p> | |
| <ol> | |
| <li data-md=""> | |
| <p>Let <var>workletGlobalScope</var> be a <code class="idl"><a data-link-type="idl">FakeWorkletGlobalScope</a></code> from the list of <a data-link-type="dfn" href="#worklets-workletglobalscopes" id="ref-for-worklets-workletglobalscopes-5">worklet’s | |
| WorkletGlobalScopes</a> from the fake <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-13">Worklet</a></code>.</p> | |
| <p>The user agent <em>may</em> also <a data-link-type="dfn" href="#create-a-workletglobalscope" id="ref-for-create-a-workletglobalscope-3">create a WorkletGlobalScope</a> given the fake <code class="idl"><a data-link-type="idl" href="#worklet" id="ref-for-worklet-14">Worklet</a></code> and use that.</p> | |
| <li data-md=""> | |
| <p>Let <var>classCtor</var> be the result of performing a lookup in <a data-link-type="dfn" href="#registered-class-constructors-map" id="ref-for-registered-class-constructors-map-2">registered class constructors | |
| map</a> with "key" as the key.</p> | |
| <li data-md=""> | |
| <p>Let <var>classInstance</var> be the result of <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-construct">Construct</a>(<var>classCtor</var>).</p> | |
| <li data-md=""> | |
| <p>Let <var>result</var> be the result of <a data-link-type="dfn" href="http://www.ecma-international.org/ecma-262/6.0/#sec-invoke">Invoke</a>(O=<var>classInstance</var>, P="process", | |
| Arguments=["true"]).</p> | |
| <li data-md=""> | |
| <p>Return <var>result</var>.</p> | |
| </ol> | |
| </main> | |
| <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2> | |
| <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3> | |
| <p>Conformance requirements are expressed with a combination of | |
| descriptive assertions and RFC 2119 terminology. The key words “MUST”, | |
| “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, | |
| “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this | |
| document are to be interpreted as described in RFC 2119. | |
| However, for readability, these words do not appear in all uppercase | |
| letters in this specification. </p> | |
| <p>All of the text of this specification is normative except sections | |
| explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p> | |
| <p>Examples in this specification are introduced with the words “for example” | |
| or are set apart from the normative text with <code>class="example"</code>, | |
| like this: </p> | |
| <div class="example" id="example-f839f6c8"> | |
| <a class="self-link" href="#example-f839f6c8"></a> | |
| <p>This is an example of an informative example.</p> | |
| </div> | |
| <p>Informative notes begin with the word “Note” and are set apart from the | |
| normative text with <code>class="note"</code>, like this: </p> | |
| <p class="note" role="note">Note, this is an informative note.</p> | |
| <p>Advisements are normative sections styled to evoke special attention and are | |
| set apart from other normative text with <code><strong class="advisement"></code>, like | |
| this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p> | |
| <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3> | |
| <p>Conformance to this specification | |
| is defined for three conformance classes: </p> | |
| <dl> | |
| <dt>style sheet | |
| <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS | |
| style sheet</a>. | |
| <dt>renderer | |
| <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders | |
| documents that use them. | |
| <dt>authoring tool | |
| <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. | |
| </dl> | |
| <p>A style sheet is conformant to this specification | |
| if all of its statements that use syntax defined in this module are valid | |
| according to the generic CSS grammar and the individual grammars of each | |
| feature defined in this module. </p> | |
| <p>A renderer is conformant to this specification | |
| if, in addition to interpreting the style sheet as defined by the | |
| appropriate specifications, it supports all the features defined | |
| by this specification by parsing them correctly | |
| and rendering the document accordingly. However, the inability of a | |
| UA to correctly render a document due to limitations of the device | |
| does not make the UA non-conformant. (For example, a UA is not | |
| required to render color on a monochrome monitor.) </p> | |
| <p>An authoring tool is conformant to this specification | |
| if it writes style sheets that are syntactically correct according to the | |
| generic CSS grammar and the individual grammars of each feature in | |
| this module, and meet all other conformance requirements of style sheets | |
| as described in this module. </p> | |
| <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3> | |
| <p>So that authors can exploit the forward-compatible parsing rules to | |
| assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore | |
| as appropriate</a>) any at-rules, properties, property values, keywords, | |
| and other syntactic constructs for which they have no usable level of | |
| support. In particular, user agents <strong>must not</strong> selectively | |
| ignore unsupported component values and honor supported values in a single | |
| multi-value property declaration: if any value is considered invalid | |
| (as unsupported values must be), CSS requires that the entire declaration | |
| be ignored.</p> | |
| <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4> | |
| <p>To avoid clashes with future stable CSS features, | |
| the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p> | |
| <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3> | |
| <p>Once a specification reaches the Candidate Recommendation stage, | |
| non-experimental implementations are possible, and implementors should | |
| release an unprefixed implementation of any CR-level feature they | |
| can demonstrate to be correctly implemented according to spec. </p> | |
| <p>To establish and maintain the interoperability of CSS across | |
| implementations, the CSS Working Group requests that non-experimental | |
| CSS renderers submit an implementation report (and, if necessary, the | |
| testcases used for that implementation report) to the W3C before | |
| releasing an unprefixed implementation of any CSS features. Testcases | |
| submitted to W3C are subject to review and correction by the CSS | |
| Working Group. </p> | |
| <p> | |
| Further information on submitting testcases and implementation reports | |
| can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. | |
| Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. | |
| <script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script> | |
| </p> | |
| <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2> | |
| <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3> | |
| <ul class="index"> | |
| <li><a href="#pending-tasks-struct-counter">counter</a><span>, in §2.2</span> | |
| <li><a href="#create-a-workletglobalscope">create a WorkletGlobalScope</a><span>, in §2.1.2</span> | |
| <li><a href="#fetch-and-invoke-a-worklet-script">fetch and invoke a worklet script</a><span>, in §2.2</span> | |
| <li><a href="#fetch-a-worklet-script">fetch a worklet script</a><span>, in §2.2</span> | |
| <li><a href="#dom-worklet-import">import(moduleURL)</a><span>, in §2.2</span> | |
| <li><a href="#module-responses-map">module responses map</a><span>, in §2.2</span> | |
| <li><a href="#pending-tasks-struct">pending tasks struct</a><span>, in §2.2</span> | |
| <li><a href="#dom-fakeworkletglobalscope-registeranarbitaryclass">registerAnArbitaryClass(type, classConstructor)</a><span>, in §4</span> | |
| <li><a href="#registered-class-constructors-map">registered class constructors map</a><span>, in §4</span> | |
| <li><a href="#set-up-a-worklet-environment-settings-object">set up a worklet environment settings object</a><span>, in §2.1.3</span> | |
| <li><a href="#worklet">Worklet</a><span>, in §2.2</span> | |
| <li><a href="#workletglobalscope">WorkletGlobalScope</a><span>, in §2.1</span> | |
| <li><a href="#worklet-global-scope">worklet global scope</a><span>, in §2.1</span> | |
| <li><a href="#worklet-global-scope-execution-environment">worklet global scope execution environment</a><span>, in §2.1</span> | |
| <li><a href="#worklet-global-scope-type">worklet global scope type</a><span>, in §2.2</span> | |
| <li><a href="#worklets-workletglobalscopes">worklet’s WorkletGlobalScopes</a><span>, in §2.2</span> | |
| </ul> | |
| <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3> | |
| <ul class="index"> | |
| <li> | |
| <a data-link-type="biblio">[css-paint-api-1]</a> defines the following terms: | |
| <ul> | |
| <li><a href="https://drafts.css-houdini.org/css-paint-api-1/#paintworkletglobalscope">PaintWorkletGlobalScope</a> | |
| </ul> | |
| <li> | |
| <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms: | |
| <ul> | |
| <li><a href="https://drafts.csswg.org/css-syntax-3/#css-parse-something-according-to-a-css-grammar">parse</a> | |
| </ul> | |
| <li> | |
| <a data-link-type="biblio">[FETCH]</a> defines the following terms: | |
| <ul> | |
| <li><a href="https://fetch.spec.whatwg.org/#concept-request-url">url</a> | |
| </ul> | |
| <li> | |
| <a data-link-type="biblio">[HTML]</a> defines the following terms: | |
| <ul> | |
| <li><a href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope">DedicatedWorkerGlobalScope</a> | |
| <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a> | |
| <li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-module-worker-script-tree">fetch a module worker script graph</a> | |
| <li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#microtask">microtask</a> | |
| <li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">queue a task</a> | |
| </ul> | |
| <li> | |
| <a data-link-type="biblio">[INFRA]</a> defines the following terms: | |
| <ul> | |
| <li><a href="https://infra.spec.whatwg.org/#struct">struct</a> | |
| </ul> | |
| <li> | |
| <a data-link-type="biblio">[WebIDL]</a> defines the following terms: | |
| <ul> | |
| <li><a href="https://heycam.github.io/webidl/#Exposed">Exposed</a> | |
| <li><a href="https://heycam.github.io/webidl/#NewObject">NewObject</a> | |
| <li><a href="https://heycam.github.io/webidl/#idl-USVString">USVString</a> | |
| </ul> | |
| </ul> | |
| <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2> | |
| <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3> | |
| <dl> | |
| <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3] | |
| <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a> | |
| <dt id="biblio-fetch">[FETCH] | |
| <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a> | |
| <dt id="biblio-html">[HTML] | |
| <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a> | |
| <dt id="biblio-infra">[INFRA] | |
| <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a> | |
| <dt id="biblio-rfc2119">[RFC2119] | |
| <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a> | |
| <dt id="biblio-webidl">[WebIDL] | |
| <dd>Cameron McCormack; Boris Zbarsky; Tobie Langel. <a href="https://www.w3.org/TR/WebIDL-1/">Web IDL</a>. URL: <a href="https://www.w3.org/TR/WebIDL-1/">https://www.w3.org/TR/WebIDL-1/</a> | |
| </dl> | |
| <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3> | |
| <dl> | |
| <dt id="biblio-css-paint-api-1">[CSS-PAINT-API-1] | |
| <dd>Shane Stephens; Ian Kilpatrick; Dean Jackson. <a href="https://www.w3.org/TR/css-paint-api-1/">CSS Painting API Level 1</a>. URL: <a href="https://www.w3.org/TR/css-paint-api-1/">https://www.w3.org/TR/css-paint-api-1/</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 def">[<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed">Exposed</a>=<span class="n">Worklet</span>] | |
| <span class="kt">interface</span> <a class="nv" href="#workletglobalscope">WorkletGlobalScope</a> { | |
| }; | |
| <span class="kt">interface</span> <a class="nv" href="#worklet">Worklet</a> { | |
| [<a class="nv idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject">NewObject</a>] <span class="kt">Promise</span><<span class="kt">void</span>> <a class="nv idl-code" data-link-type="method" href="#dom-worklet-import">import</a>(<a class="n idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString"><span class="kt">USVString</span></a> <a class="nv" href="#dom-worklet-import-moduleurl-moduleurl">moduleURL</a>); | |
| }; | |
| </pre> | |
| <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2> | |
| <div style="counter-reset:issue"> | |
| <div class="issue"> Merge this with https://html.spec.whatwg.org/multipage/workers.html#set-up-a-worker-environment-settings-object<a href="#issue-a1972cc8"> ↵ </a></div> | |
| <div class="issue"> Need ability to load code into a <code class="idl"><a data-link-type="idl" href="#workletglobalscope">WorkletGlobalScope</a></code> declaratively. <a href="https://github.com/w3c/css-houdini-drafts/issues/47"><https://github.com/w3c/css-houdini-drafts/issues/47></a><a href="#issue-71a0efbc"> ↵ </a></div> | |
| <div class="issue"> Need to decide if to allow worklets for unsecure context, etc. <a href="https://github.com/w3c/css-houdini-drafts/issues/92"><https://github.com/w3c/css-houdini-drafts/issues/92></a><a href="#issue-94eacd79"> ↵ </a></div> | |
| </div> | |
| <aside class="dfn-panel" data-for="workletglobalscope"> | |
| <b><a href="#workletglobalscope">#workletglobalscope</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-workletglobalscope-1">1.2. Code Idempotency</a> <a href="#ref-for-workletglobalscope-2">(2)</a> <a href="#ref-for-workletglobalscope-3">(3)</a> | |
| <li><a href="#ref-for-workletglobalscope-4">2.1. The Global Scope</a> <a href="#ref-for-workletglobalscope-5">(2)</a> <a href="#ref-for-workletglobalscope-6">(3)</a> <a href="#ref-for-workletglobalscope-7">(4)</a> <a href="#ref-for-workletglobalscope-8">(5)</a> | |
| <li><a href="#ref-for-workletglobalscope-9">2.1.1. The event loop</a> | |
| <li><a href="#ref-for-workletglobalscope-10">2.2. Worklet</a> <a href="#ref-for-workletglobalscope-11">(2)</a> <a href="#ref-for-workletglobalscope-12">(3)</a> <a href="#ref-for-workletglobalscope-13">(4)</a> <a href="#ref-for-workletglobalscope-14">(5)</a> <a href="#ref-for-workletglobalscope-15">(6)</a> <a href="#ref-for-workletglobalscope-16">(7)</a> <a href="#ref-for-workletglobalscope-17">(8)</a> <a href="#ref-for-workletglobalscope-18">(9)</a> <a href="#ref-for-workletglobalscope-19">(10)</a> <a href="#ref-for-workletglobalscope-20">(11)</a> <a href="#ref-for-workletglobalscope-21">(12)</a> <a href="#ref-for-workletglobalscope-22">(13)</a> <a href="#ref-for-workletglobalscope-23">(14)</a> <a href="#ref-for-workletglobalscope-24">(15)</a> | |
| <li><a href="#ref-for-workletglobalscope-25">2.3. Lifetime of the Worklet</a> <a href="#ref-for-workletglobalscope-26">(2)</a> <a href="#ref-for-workletglobalscope-27">(3)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="worklet-global-scope-execution-environment"> | |
| <b><a href="#worklet-global-scope-execution-environment">#worklet-global-scope-execution-environment</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-worklet-global-scope-execution-environment-1">2.1.1. The event loop</a> | |
| <li><a href="#ref-for-worklet-global-scope-execution-environment-2">2.1.2. Creating a WorkletGlobalScope</a> | |
| <li><a href="#ref-for-worklet-global-scope-execution-environment-3">2.2. Worklet</a> <a href="#ref-for-worklet-global-scope-execution-environment-4">(2)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="create-a-workletglobalscope"> | |
| <b><a href="#create-a-workletglobalscope">#create-a-workletglobalscope</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-create-a-workletglobalscope-1">2.1.1. The event loop</a> | |
| <li><a href="#ref-for-create-a-workletglobalscope-2">2.2. Worklet</a> | |
| <li><a href="#ref-for-create-a-workletglobalscope-3">4.3. Create a registered class and invoke a method.</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="set-up-a-worklet-environment-settings-object"> | |
| <b><a href="#set-up-a-worklet-environment-settings-object">#set-up-a-worklet-environment-settings-object</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-set-up-a-worklet-environment-settings-object-1">2.1.2. Creating a WorkletGlobalScope</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="worklet"> | |
| <b><a href="#worklet">#worklet</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-worklet-1">1.2. Code Idempotency</a> <a href="#ref-for-worklet-2">(2)</a> | |
| <li><a href="#ref-for-worklet-3">2.1. The Global Scope</a> <a href="#ref-for-worklet-4">(2)</a> | |
| <li><a href="#ref-for-worklet-5">2.2. Worklet</a> <a href="#ref-for-worklet-6">(2)</a> <a href="#ref-for-worklet-7">(3)</a> <a href="#ref-for-worklet-8">(4)</a> <a href="#ref-for-worklet-9">(5)</a> <a href="#ref-for-worklet-10">(6)</a> <a href="#ref-for-worklet-11">(7)</a> | |
| <li><a href="#ref-for-worklet-12">2.3. Lifetime of the Worklet</a> | |
| <li><a href="#ref-for-worklet-13">4.3. Create a registered class and invoke a method.</a> <a href="#ref-for-worklet-14">(2)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="worklet-global-scope-type"> | |
| <b><a href="#worklet-global-scope-type">#worklet-global-scope-type</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-worklet-global-scope-type-1">2.2. Worklet</a> <a href="#ref-for-worklet-global-scope-type-2">(2)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="worklets-workletglobalscopes"> | |
| <b><a href="#worklets-workletglobalscopes">#worklets-workletglobalscopes</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-worklets-workletglobalscopes-1">2.2. Worklet</a> <a href="#ref-for-worklets-workletglobalscopes-2">(2)</a> <a href="#ref-for-worklets-workletglobalscopes-3">(3)</a> <a href="#ref-for-worklets-workletglobalscopes-4">(4)</a> | |
| <li><a href="#ref-for-worklets-workletglobalscopes-5">4.3. Create a registered class and invoke a method.</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="module-responses-map"> | |
| <b><a href="#module-responses-map">#module-responses-map</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-module-responses-map-1">2.1.2. Creating a WorkletGlobalScope</a> | |
| <li><a href="#ref-for-module-responses-map-2">2.2. Worklet</a> <a href="#ref-for-module-responses-map-3">(2)</a> <a href="#ref-for-module-responses-map-4">(3)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="pending-tasks-struct"> | |
| <b><a href="#pending-tasks-struct">#pending-tasks-struct</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-pending-tasks-struct-1">2.2. Worklet</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="pending-tasks-struct-counter"> | |
| <b><a href="#pending-tasks-struct-counter">#pending-tasks-struct-counter</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-pending-tasks-struct-counter-1">2.2. Worklet</a> <a href="#ref-for-pending-tasks-struct-counter-2">(2)</a> <a href="#ref-for-pending-tasks-struct-counter-3">(3)</a> <a href="#ref-for-pending-tasks-struct-counter-4">(4)</a> <a href="#ref-for-pending-tasks-struct-counter-5">(5)</a> <a href="#ref-for-pending-tasks-struct-counter-6">(6)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="dom-worklet-import"> | |
| <b><a href="#dom-worklet-import">#dom-worklet-import</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-dom-worklet-import-1">2.1.1. The event loop</a> | |
| <li><a href="#ref-for-dom-worklet-import-2">2.2. Worklet</a> <a href="#ref-for-dom-worklet-import-3">(2)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="fetch-and-invoke-a-worklet-script"> | |
| <b><a href="#fetch-and-invoke-a-worklet-script">#fetch-and-invoke-a-worklet-script</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-fetch-and-invoke-a-worklet-script-1">2.2. Worklet</a> <a href="#ref-for-fetch-and-invoke-a-worklet-script-2">(2)</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="fetch-a-worklet-script"> | |
| <b><a href="#fetch-a-worklet-script">#fetch-a-worklet-script</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-fetch-a-worklet-script-1">2.1.2. Creating a WorkletGlobalScope</a> <a href="#ref-for-fetch-a-worklet-script-2">(2)</a> | |
| <li><a href="#ref-for-fetch-a-worklet-script-3">2.2. Worklet</a> | |
| </ul> | |
| </aside> | |
| <aside class="dfn-panel" data-for="registered-class-constructors-map"> | |
| <b><a href="#registered-class-constructors-map">#registered-class-constructors-map</a></b><b>Referenced in:</b> | |
| <ul> | |
| <li><a href="#ref-for-registered-class-constructors-map-1">4. Examples</a> | |
| <li><a href="#ref-for-registered-class-constructors-map-2">4.3. Create a registered class and invoke a method.</a> | |
| </ul> | |
| </aside> | |
| <script>/* script-dfn-panel */ | |
| document.body.addEventListener("click", function(e) { | |
| var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); } | |
| // Find the dfn element or panel, if any, that was clicked on. | |
| var el = e.target; | |
| var target; | |
| var hitALink = false; | |
| while(el.parentElement) { | |
| if(el.tagName == "A") { | |
| // Clicking on a link in a <dfn> shouldn't summon the panel | |
| hitALink = true; | |
| } | |
| if(el.classList.contains("dfn-paneled")) { | |
| target = "dfn"; | |
| break; | |
| } | |
| if(el.classList.contains("dfn-panel")) { | |
| target = "dfn-panel"; | |
| break; | |
| } | |
| el = el.parentElement; | |
| } | |
| if(target != "dfn-panel") { | |
| // Turn off any currently "on" or "activated" panels. | |
| queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){ | |
| el.classList.remove("on"); | |
| el.classList.remove("activated"); | |
| }); | |
| } | |
| if(target == "dfn" && !hitALink) { | |
| // open the panel | |
| var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']"); | |
| if(dfnPanel) { | |
| console.log(dfnPanel); | |
| dfnPanel.classList.add("on"); | |
| var rect = el.getBoundingClientRect(); | |
| dfnPanel.style.left = window.scrollX + rect.right + 5 + "px"; | |
| dfnPanel.style.top = window.scrollY + rect.top + "px"; | |
| var panelRect = dfnPanel.getBoundingClientRect(); | |
| var panelWidth = panelRect.right - panelRect.left; | |
| if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) { | |
| // Reposition, because the panel is overflowing | |
| dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px"; | |
| } | |
| } else { | |
| console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']"); | |
| } | |
| } else if(target == "dfn-panel") { | |
| // Switch it to "activated" state, which pins it. | |
| el.classList.add("activated"); | |
| el.style.left = null; | |
| el.style.top = null; | |
| } | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment