Skip to content

Instantly share code, notes, and snippets.

@bfgeek

bfgeek/Overview.html

Created August 28, 2015 07:21
Show Gist options
  • Save bfgeek/41e7e4d1b00bef03e672 to your computer and use it in GitHub Desktop.
Save bfgeek/41e7e4d1b00bef03e672 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Overview.html
<!doctype html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Script API Level 1</title>
<style data-fill-with="stylesheet"> body {
color: black;
font-family: sans-serif;
margin: 0 auto;
max-width: 50em;
padding: 2em 1em 2em 70px;
}
:link { color: #00C; background: transparent }
:visited { color: #609; background: transparent }
a[href]:active { color: #C00; background: transparent }
a[href]:hover { background: #ffa }
a[href] img { border-style: none }
h1, h2, h3, h4, h5, h6 { text-align: left }
h1, h2, h3 { color: #005A9C; }
h1 { font: 170% sans-serif }
h2 { font: 140% sans-serif }
h3 { font: 120% sans-serif }
h4 { font: bold 100% sans-serif }
h5 { font: italic 100% sans-serif }
h6 { font: small-caps 100% sans-serif }
.hide { display: none }
div.head { margin-bottom: 1em }
div.head h1 { margin-top: 2em; clear: both }
div.head table { margin-left: 2em; margin-top: 2em }
p.copyright { font-size: small }
p.copyright small { font-size: small }
pre { margin-left: 2em }
dt { font-weight: bold }
ul.toc, ol.toc {
list-style: none;
}
body {
counter-reset: exampleno figure issue;
max-width: 50em;
margin: 0 auto !important;
line-height: 1.5;
}
/******************************************************************************/
/* Sectioning */
/******************************************************************************/
/** Headings ******************************************************************/
h1, h2, h3, h4, h5, h6, dt {
page-break-after: avoid;
}
h2, h3, h5, h6 {
margin-top: 3em;
}
h4 {
margin-top: 4em;
}
/** Subheadings ***************************************************************/
h1 + h2,
#subtitle + h2 {
/* #subtitle is a subtitle in an H2 under the H1 */
margin-top: 0;
}
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
margin-top: 1.2em; /* = 1 x line-height */
}
/** Section divider ***********************************************************/
/* <hr> used to separate TMI into the second half of a section */
hr:not([title]) {
font-size: 1.5em;
text-align: center;
margin: 1em auto;
height: auto;
border: transparent solid 0;
background: transparent;
}
hr:not([title])::before {
content: "\1F411\2003\2003\1F411\2003\2003\1F411";
}
/* note: <hr> with title separates document header from contents */
/******************************************************************************/
/* Paragraphs and Lists */
/******************************************************************************/
p {
margin: 1em 0;
}
dd > p:first-child,
li > p:first-child {
margin-top: 0;
}
ul, ol {
margin-left: 0;
padding-left: 2em;
}
li {
margin: 0.25em 2em 0.5em 0;
padding-left: 0;
}
dl dd {
margin: 0 0 1em 2em;
}
.head dd {
margin-bottom: 0;
}
/* Style for algorithms */
ol.algorithm ol {
border-left: 1px solid #90b8de;
margin-left: 1em;
}
ol.algorithm ol.algorithm {
border-left: none;
margin-left: 0;
}
/* Style for switch/case <dl>s */
dl.switch > dd > ol.only {
margin-left: 0;
}
dl.switch > dd > ol.algorithm {
margin-left: -2em;
}
dl.switch {
padding-left: 2em;
}
dl.switch > dt {
text-indent: -1.5em;
margin-top: 1em;
}
dl.switch > dt + dt {
margin-top: 0;
}
dl.switch > dt:before {
content: '\21AA';
padding: 0 0.5em 0 0;
display: inline-block;
width: 1em;
text-align: right;
line-height: 0.5em;
}
/* Style for paragraphs I know are in MD-genned lists */
[data-md] > :first-child {
margin-top: 0;
}
[data-md] > :last-child {
margin-bottom: 0;
}
/** Inline Lists **************************************************************/
/* This is mostly to make the list inside the CR exit criteria more compact. */
ol.inline, ol.inline li {
display: inline;
padding: 0; margin: 0;
}
ol.inline {
counter-reset: list-item;
}
ol.inline li {
counter-increment: list-item;
}
ol.inline li:before {
content: "(" counter(list-item) ") ";
font-weight: bold;
}
/** Terminology Markup ********************************************************/
/******************************************************************************/
/* Inline Markup */
/******************************************************************************/
/** Terminology Markup ********************************************************/
dfn { /* Defining instance */
font-weight: bolder;
}
a > i { /* Instance of term */
font-style: normal;
}
dt dfn code, code.idl {
font-size: inherit;
}
dfn var {
font-style: normal;
}
/** Change Marking ************************************************************/
del { color: red; text-decoration: line-through; }
ins { color: #080; text-decoration: underline; }
/** Miscellaneous improvements to inline formatting ***************************/
sup {
vertical-align: super;
font-size: 80%
}
/******************************************************************************/
/* Code */
/******************************************************************************/
/** General monospace/pre rules ***********************************************/
pre, code {
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
font-size: .9em;
page-break-inside: avoid;
}
pre {
margin-top: 1em;
margin-bottom: 1em;
overflow: auto;
}
/** Syntax-Highlighted Code ***************************************************/
.example pre[class*="language-"],
.example [class*="language-"] pre,
.example pre[class*="lang-"],
.example [class*="lang-"] pre {
background: transparent; /* Prism applies a gray background that doesn't work well in the template. */
}
/** Example Code **************************************************************/
div.html, div.xml,
pre.html, pre.xml {
padding: 0.5em;
margin: 1em 0;
position: relative;
clear: both;
color: #600;
}
pre.example,
pre.html,
pre.xml {
padding-top: 1.5em;
}
pre.illegal, .illegal pre
pre.deprecated, .deprecated pre {
color: red;
}
/** IDL fragments *************************************************************/
pre.idl {
/* Match blue propdef boxes */
padding: .5em 1em;
background: #DEF;
margin: 1.2em 0;
border-left: 0.5em solid #8CCBF2;
}
pre.idl :link, pre.idl :visited {
color:inherit;
background:transparent;
}
/** Inline CSS fragments ******************************************************/
.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: "";
}
/** Inline markup fragments ***************************************************/
code.html, code.xml {
color: #660000;
}
/** Autolinks produced using Bikeshed *****************************************/
[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] { font-family: monospace; }
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }
[data-link-type=biblio] {
white-space: pre;
}
/******************************************************************************/
/* Links */
/******************************************************************************/
/** General Hyperlinks ********************************************************/
/* We hyperlink a lot, so make it less intrusive */
a:link, a:visited {
color: inherit;
text-decoration: none;
border-bottom: 1px solid silver;
}
@supports (text-decoration-color: silver) {
a:link, a:visited {
border-bottom: none;
text-decoration: underline;
text-decoration-color: silver;
}
a:visited {
text-decoration-style: dotted;
}
}
a.logo:link, a.logo:visited { /* backout above styling for W3C logo */
padding: 0;
border: none;
text-decoration: none;
}
/** Self-Links ****************************************************************/
/* Auto-generated links from an element to its own anchor, for usability */
.heading, .issue, .note, .example, li, dt {
position: relative;
}
a.self-link {
position: absolute;
top: 0;
left: -2.5em;
width: 2em;
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: -3.5em;
}
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: "#"; }
/******************************************************************************/
/* Images */
/******************************************************************************/
img {
border-style: none;
color: white;
}
figure, div.figure, div.sidefigure {
page-break-inside: avoid;
}
div.figure, p.figure, div.sidefigure, figure {
text-align: center;
margin: 2.5em 0;
}
div.figure pre, div.sidefigure pre, figure pre {
text-align: left;
display: table;
margin: 1em auto;
}
.figure table, figure table {
margin: auto;
}
div.sidefigure, figure.sidefigure {
float: right;
width: 50%;
margin: 0 0 0.5em 0.5em
}
div.figure img, div.sidefigure img, figure img,
div.figure object, div.sidefigure object, figure object {
display: block;
margin: auto;
max-width: 100%
}
p.caption, figcaption, caption {
text-align: center;
font-style: italic;
font-size: 90%;
}
p.caption:before, figcaption:before {
content: "Figure " counter(figure) ". ";
font-weight: bold;
}
p.caption, figcaption {
counter-increment: figure;
}
/* DL list is indented 2em, but figure inside it is not */
dd > div.figure, dd > figure { margin-left: -2em }
pre.ascii-art {
display: table; /* shrinkwrap */
margin: 1em auto;
}
/* Displaying the output of text layout, particularly when
line-breaking is being invoked, and thus having a
visible width is good. */
pre.output {
margin: 1em;
border: solid thin silver;
padding: 0.25em;
display: table;
}
/******************************************************************************/
/* Colored Boxes */
/******************************************************************************/
.issue, .note, .example, .why, .advisement, blockquote {
padding: .5em;
border: .5em;
border-left-style: solid;
page-break-inside: avoid;
}
span.issue, span.note {
padding: .1em .5em .15em;
border-right-style: solid;
}
div.issue,
div.note,
div.example,
details.why,
blockquote {
margin: 1em auto;
}
.note > p:first-child,
.issue > p:first-child,
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
/** Blockquotes ***************************************************************/
blockquote {
border-color: silver;
}
/** Open issue ****************************************************************/
/* not intended for CR+ publication */
.issue {
border-color: #E05252;
background: #FBE9E9;
counter-increment: issue;
overflow: auto;
}
.issue:before {
content: "Issue " counter(issue);
padding-right: 1em;
text-transform: uppercase;
color: #E05252;
}
/** Example *******************************************************************/
.example {
border-color: #E0CB52;
background: #FCFAEE;
counter-increment: exampleno;
overflow: auto;
clear: both;
}
.example:before {
color: #B9AB2D;
font-family: sans-serif;
}
.example:before {
content: "Example";
content: "Example " counter(exampleno);
min-width: 7.5em;
text-transform: uppercase;
display: block;
}
.illegal.example:before,
.illegal.example:before {
content: "Invalid Example";
content: "Invalid Example" counter(exampleno);
color: red;
}
/** Non-normative Note ********************************************************/
.note, .why {
border-color: #52E052;
background: #E9FBE9;
overflow: auto;
}
/** Advisement Box ************************************************************/
/* for attention-grabbing normative statements */
.advisement {
border-color: orange;
border-style: none solid;
background: #FFEECC;
text-align: center;
}
strong.advisement {
display: block;
}
/*.advisement:before { color: #FF8800; } */
/** ??? ***********************************************************************/
details.why {
border-color: #52E052;
background: #E9FBE9;
display: block;
}
details.why > summary {
font-style: italic;
display: block;
}
details.why[open] > summary {
border-bottom: 1px silver solid;
}
/** Spec Obsoletion Notice ****************************************************/
/* obnoxious obsoletion notice for older/abandoned specs. */
details.annoying-warning {
display: block;
}
details.annoying-warning[open] {
background: #fdd;
color: red;
font-weight: bold;
text-align: center;
padding: .5em;
border: thick solid red;
border-radius: 1em;
}
@media not print {
details.annoying-warning[open] {
position: fixed;
left: 1em;
right: 1em;
bottom: 1em;
z-index: 1000;
}
}
details.annoying-warning:not([open]) > summary {
background: #fdd;
color: red;
font-weight: bold;
text-align: center;
padding: .5em;
}
/******************************************************************************/
/* Tables */
/******************************************************************************/
/** Property/Descriptor Definition Tables *************************************/
table.propdef, table.propdef-extra,
table.descdef, table.definition-table {
page-break-inside: avoid;
width: 100%;
margin: 1.2em 0;
border-left: 0.5em solid #8CCBF2;
padding: 0.5em 1em;
background: #DEF;
border-spacing: 0;
}
table.propdef td, table.propdef-extra td,
table.descdef td, table.definition-table td,
table.propdef th, table.propdef-extra th,
table.descdef th, table.definition-table th {
padding: 0.5em;
vertical-align: baseline;
border-bottom: 1px solid #bbd7e9;
}
table.propdef > tbody > tr:last-child th,
table.propdef-extra > tbody > tr:last-child th,
table.descdef > tbody > tr:last-child th,
table.definition-table > tbody > tr:last-child th,
table.propdef > tbody > tr:last-child td,
table.propdef-extra > tbody > tr:last-child td,
table.descdef > tbody > tr:last-child td,
table.definition-table > tbody > tr:last-child td {
border-bottom: 0;
}
table.propdef th,
table.propdef-extra th,
table.descdef th,
table.definition-table th {
font-style: italic;
font-weight: normal;
width: 8.3em;
padding-left: 1em;
}
/* For when values are extra-complex and need formatting for readability */
table td.pre {
white-space: pre-wrap;
}
/* A footnote at the bottom of a propdef */
table.propdef td.footnote,
table.propdef-extra td.footnote,
table.descdef td.footnote,
table.definition-table td.footnote {
padding-top: 0.6em;
}
table.propdef td.footnote:before,
table.propdef-extra td.footnote:before,
table.descdef td.footnote:before,
table.definition-table td.footnote:before {
content: " ";
display: block;
height: 0.6em;
width: 4em;
border-top: thin solid;
}
/** Profile Tables ************************************************************/
/* table of required features in a CSS profile */
table.features th {
background: #00589f;
color: #fff;
text-align: left;
padding: 0.2em 0.2em 0.2em 0.5em;
}
table.features td {
vertical-align: top;
border-bottom: 1px solid #ccc;
padding: 0.3em 0.3em 0.3em 0.7em;
}
/** Data tables (and properly marked-up proptables) ***************************/
/*
<table class="data"> highlights structural relationships in a table
when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)
Use class="complex data" for particularly complicated tables --
(This will draw more lines: busier, but clearer.)
Use class="long" on table cells with paragraph-like contents
(This will adjust text alignment accordingly.)
*/
.data, .proptable {
margin: 1em auto;
border-collapse: collapse;
width: 100%;
border: hidden;
}
.data {
text-align: center;
width: auto;
}
.data caption {
width: 100%;
}
.data td, .data th,
.proptable td, .proptable th {
padding: 0.5em;
border-width: 1px;
border-color: silver;
border-top-style: solid;
}
.data thead td:empty {
padding: 0;
border: 0;
}
.data thead th[scope="row"],
.proptable thead th[scope="row"] {
text-align: right;
color: inherit;
}
.data thead,
.proptable thead,
.data tbody,
.proptable tbody {
color: inherit;
border-bottom: 2px solid;
}
.data colgroup {
border-left: 2px solid;
}
.data tbody th:first-child,
.proptable tbody th:first-child ,
.data tbody td[scope="row"]:first-child,
.proptable tbody td[scope="row"]:first-child {
text-align: right;
color: inherit;
border-right: 2px solid;
border-top: 1px solid silver;
padding-right: 1em;
}
.data.define td:last-child {
text-align: left;
}
.data tbody th[rowspan],
.proptable tbody th[rowspan],
.data tbody td[rowspan],
.proptable tbody td[rowspan]{
border-left: 1px solid silver;
border-right: 1px solid silver;
}
.complex.data th,
.complex.data td {
border: 1px solid silver;
}
.data td.long {
vertical-align: baseline;
text-align: left;
}
.data img {
vertical-align: middle;
}
/******************************************************************************/
/* Indices */
/******************************************************************************/
/** Table of Contents *********************************************************/
/* ToC not indented, but font style shows hierarchy */
ul.toc { margin: 1em 0; font-weight: bold; /*text-transform: uppercase;*/ }
ul.toc ul { margin: 0; font-weight: normal; text-transform: none; }
ul.toc ul ul { margin: 0 0 0 2em; font-style: italic; }
ul.toc ul ul ul { margin: 0; }
ul.toc > li { margin: 1.5em 0; }
ul.toc ul.toc li { margin: 0.3em 0 0 0; }
ul.toc, ul.toc ul, ul.toc li { padding: 0; line-height: 1.3; }
ul.toc a { text-decoration: none; border-bottom-style: none; }
ul.toc a:hover, ul.toc a:focus { border-bottom-style: solid; }
@supports (text-decoration-style: solid) {
ul.toc a:hover, ul.toc a:focus {
border-bottom-style: none;
text-decoration-style: solid;
}
}
/*
ul.toc li li li, ul.toc li li li ul {margin-left: 0; display: inline}
ul.toc li li li ul, ul.toc li li li ul li {margin-left: 0; display: inline}
*/
/* Section numbers in a column of their own */
ul.toc {
margin-left: 5em
}
ul.toc span.secno {
float: left;
width: 4em;
margin-left: -5em;
}
ul.toc ul ul span.secno {
margin-left: -7em;
}
/*ul.toc span.secno {text-align: right}*/
ul.toc li {
clear: both;
}
/* If we had 'tab', floats would not be needed here:
ul.toc span.secno {tab: 5em right; margin-right: 1em}
ul.toc li {text-indent: 5em hanging}
The second line in case items wrap
*/
/** At-risk List **************************************************************/
/* Style for At Risk features (intended as editorial aid, not intended for publishing) */
.atrisk::before {
float: right;
margin-top: -0.25em;
padding: 0.5em 1em 0.5em 0;
text-indent: -0.9em;
border: 1px solid;
content: '\25C0 Not yet widely implemented';
white-space: pre;
font-size: small;
background-color: white;
color: gray;
text-align: center;
}
.toc .atrisk::before { content:none }
/** Index *********************************************************************/
/* Index Lists: Layout */
ul.indexlist { margin-left: 0; columns: 13em; }
ul.indexlist li { margin-left: 0; list-style: none }
ul.indexlist li li { margin-left: 1em }
ul.indexlist dl { margin-top: 0; }
ul.indexlist dt { margin: .2em 0 .2em 20px;}
ul.indexlist dd { margin: .2em 0 .2em 40px;}
/* Index Lists: Typography */
ul.indexlist ul,
ul.indexlist dl { font-size: smaller; }
ul.indexlist a { font-weight: bold; }
/** Property Index Tables *****************************************************/
/* See also the data table styling section, which this effectively subclasses */
table.proptable {
font-size: small;
border-collapse: collapse;
border-spacing: 0;
text-align: left;
margin: 1em 0;
}
table.proptable td,
table.proptable th {
padding: 0.4em;
text-align: center;
}
table.proptable tr:hover td {
background: #DEF;
}
.propdef th {
font-style: italic;
font-weight: normal;
text-align: left;
width: 3em;
}
/* The link in the first column in the property table (formerly a TD) */
table.proptable td .property,
table.proptable th .property {
display: block;
text-align: left;
font-weight: bold;
}
/******************************************************************************/
/* Print */
/******************************************************************************/
@media print {
html {
margin: 0 !important; }
body {
font-family: serif; }
th, td {
font-family: inherit; }
a {
color: inherit !important; }
a:link, a:visited {
text-decoration: none !important }
a:link:after, a:visited:after { /* create a cross-ref "see..." */ }
.example:before {
font-family: serif !important; }
}
@page {
margin: 1.5cm 1.1cm;
}
</style>
<meta content="Bikeshed 1.0.0" name="generator">
<style>.highlight .hll { background-color: #ffffcc }
.highlight { background: #ffffff; }
.highlight .c { color: #708090 } /* Comment */
.highlight .k { color: #990055 } /* Keyword */
.highlight .l { color: #669900 } /* 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: #669900 } /* Literal.Date */
.highlight .m { color: #990055 } /* Literal.Number */
.highlight .s { color: #669900 } /* 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: #0077aa } /* Name.Tag */
.highlight .nv { color: #0077aa } /* Name.Variable */
.highlight .ow { color: #999999 } /* Operator.Word */
.highlight .mb { color: #990055 } /* Literal.Number.Bin */
.highlight .mf { color: #990055 } /* Literal.Number.Float */
.highlight .mh { color: #990055 } /* Literal.Number.Hex */
.highlight .mi { color: #990055 } /* Literal.Number.Integer */
.highlight .mo { color: #990055 } /* Literal.Number.Oct */
.highlight .sb { color: #669900 } /* Literal.String.Backtick */
.highlight .sc { color: #669900 } /* Literal.String.Char */
.highlight .sd { color: #669900 } /* Literal.String.Doc */
.highlight .s2 { color: #669900 } /* Literal.String.Double */
.highlight .se { color: #669900 } /* Literal.String.Escape */
.highlight .sh { color: #669900 } /* Literal.String.Heredoc */
.highlight .si { color: #669900 } /* Literal.String.Interpol */
.highlight .sx { color: #669900 } /* Literal.String.Other */
.highlight .sr { color: #669900 } /* Literal.String.Regex */
.highlight .s1 { color: #669900 } /* Literal.String.Single */
.highlight .ss { color: #669900 } /* 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: #990055 } /* Literal.Number.Integer.Long */
.highlight { background: hsl(24, 20%, 95%); }
pre.highlight { padding: 1em; margin: .5em 0; overflow: auto; }
:not(pre).highlight { padding: .1em; border-radius: .3em; }
</style>
</head>
<body class="h-entry">
<div class="head">
<p data-fill-with="logo"></p>
<h1 class="p-name no-ref" id="title">CSS Script API Level 1</h1>
<h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">A Collection of Interesting Ideas,
<time class="dt-updated" datetime="2015-07-19">19 July 2015</time></span></h2>
<div data-fill-with="spec-metadata">
<dl>
<dt>This version:
<dd><a class="u-url" href="http://dev.w3.org/houdini/css-script-api/">http://dev.w3.org/houdini/css-script-api/</a>
<dt>Issue Tracking:
<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://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" src="https://licensebuttons.net/p/zero/1.0/80x15.png"></a>
To the extent possible under law, the editors have waived all copyright
and related or neighboring rights to this work.
In addition, as of 19 July 2015,
the editors have made this specification available under the
<a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
Parts of this work may be from another specification document. If so, those parts are instead covered by the license of that specification document.
</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"></div>
<div data-fill-with="at-risk"></div>
<h2 class="no-num no-toc no-ref heading settled" id="contents"><span class="content">Table of Contents</span></h2>
<div data-fill-with="table-of-contents" role="navigation">
<ul class="toc" role="directory">
<li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
<li><a href="#apis-available-to-workers"><span class="secno">2</span> <span class="content">APIs available to workers</span></a>
<ul class="toc">
<li><a href="#the-event-loop"><span class="secno">2.1</span> <span class="content">The event loop</span></a>
</ul>
<li><a href="#using-workers"><span class="secno">3</span> <span class="content">Using workers</span></a>
<li><a href="#available-workers"><span class="secno">4</span> <span class="content">Available workers</span></a>
<li><a href="#examples"><span class="secno">5</span> <span class="content">Examples</span></a>
<li><a href="#conformance"><span class="secno"></span> <span class="content">
Conformance</span></a>
<li><a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
<ul 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>
</ul>
<li><a href="#references"><span class="secno"></span> <span class="content">References</span></a>
<ul class="toc">
<li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
</ul>
<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>
</ul></div>
<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>
<p>This specification defines an API for running scripts in stages of the rendering pipeline independent of the main execution environment.</p>
<p>This allows other APIs such as Style/Layout/Paint which effect different parts of the rendering pipeline to be exposed to the author safely, without major changes to the main execution environment APIs.</p>
<p class="note" role="note">Note: There are issues with allowing the DOM APIs as they are today to the Style/Layout/Paint APIs. For example if you are performing layout, and you remove a node from the tree, what happens?
Is performing a synchronous XHR in the middle of Paint valid?
These separate execution contexts allow developers to reason about the world in isolation and provide guarantees about the world.</p>
<p class="issue" id="issue-fafd2335"><a class="self-link" href="#issue-fafd2335"></a> Link to relevant specs this will be used in.</p>
<h2 class="heading settled" data-level="2" id="apis-available-to-workers"><span class="secno">2. </span><span class="content">APIs available to workers</span><a class="self-link" href="#apis-available-to-workers"></a></h2>
<p>The CSSWorker has a limited global scope compared with regular workers. Things which could impact the execution of the worker have been left out.
Notably:</p>
<ul>
<li data-md="">
<p>fetch API</p>
<li data-md="">
<p>WindowTimers API (setInterval, setTimeout)</p>
<li data-md="">
<p>indexedDb, FileSystem APIs</p>
</ul>
<p class="note" role="note">Note: We envision most of the Houdini APIs to be "hook" based. That is you register a function, which the rendering engine can call at any time to perform layout, paint, etc.
Because of this "hook" based approach things which are asynchronous in nature don’t make sense.</p>
<pre class="idl">interface <dfn class="idl-code" data-dfn-type="interface" data-export="" id="cssworkerglobalscope">CSSWorkerGlobalScope<a class="self-link" href="#cssworkerglobalscope"></a></dfn> : <a data-link-type="idl-name" href="http://dom.spec.whatwg.org/#eventtarget">EventTarget</a> {
readonly attribute <a data-link-type="idl-name" href="#cssworkerglobalscope">CSSWorkerGlobalScope</a> <a class="idl-code" data-link-type="attribute" data-readonly="" data-type="CSSWorkerGlobalScope " href="#dom-cssworkerglobalscope-self">self</a>;
void <a class="idl-code" data-link-type="method" href="#dom-cssworkerglobalscope-importscripts">importScripts</a>(DOMString... <dfn class="idl-code" data-dfn-for="CSSWorkerGlobalScope/importScripts(urls...), CSSWorkerGlobalScope/importScripts(urls)" data-dfn-type="argument" data-export="" id="dom-cssworkerglobalscope-importscripts-urls-urls">urls<a class="self-link" href="#dom-cssworkerglobalscope-importscripts-urls-urls"></a></dfn>);
attribute <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">EventHandler</a> <dfn class="idl-code" data-dfn-for="CSSWorkerGlobalScope" data-dfn-type="attribute" data-export="" data-type="EventHandler " id="dom-cssworkerglobalscope-onerror">onerror<a class="self-link" href="#dom-cssworkerglobalscope-onerror"></a></dfn>;
};
<a data-link-type="idl-name" href="#cssworkerglobalscope">CSSWorkerGlobalScope</a> implements <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#windowbase64">WindowBase64</a>;
</pre>
<p>The CSSWorkerGlobalScope interface object represents the global execution context of a CSSWorker.</p>
<dl>
<dt data-md="">
<p><dfn class="idl-code" data-dfn-for="CSSWorkerGlobalScope" data-dfn-type="attribute" data-export="" id="dom-cssworkerglobalscope-self">self<a class="self-link" href="#dom-cssworkerglobalscope-self"></a></dfn>, <span> of type <a data-link-type="idl-name" href="#cssworkerglobalscope">CSSWorkerGlobalScope</a>, readonly</span></p>
<dd data-md="">
<p>Must return the CSSWorkerGlobalScope object itself.</p>
<dt data-md="">
<p><dfn class="idl-code" data-dfn-for="CSSWorkerGlobalScope" data-dfn-type="method" data-export="" id="dom-cssworkerglobalscope-importscripts">importScripts(<var>urls</var>)<a class="self-link" href="#dom-cssworkerglobalscope-importscripts"></a></dfn></p>
<dd data-md="">
<p>The same as WorkerGlobalScope importScripts.</p>
</dl>
<p class="issue" id="issue-e82d4d33"><a class="self-link" href="#issue-e82d4d33"></a> importScripts might be a bad idea.
It allows a Houdini callback to perform a network request in the middle of style/layout/paint.
It allows a communication channel to the outside world.</p>
<h3 class="heading settled" data-level="2.1" id="the-event-loop"><span class="secno">2.1. </span><span class="content">The event loop</span><a class="self-link" href="#the-event-loop"></a></h3>
<p class="issue" id="issue-426a7a5f"><a class="self-link" href="#issue-426a7a5f"></a> What happens here?
Most things here have been stripped out. For example setTimeout, setInterval, etc.
What happens with Promises?</p>
<h2 class="heading settled" data-level="3" id="using-workers"><span class="secno">3. </span><span class="content">Using workers</span><a class="self-link" href="#using-workers"></a></h2>
<p>There is a single worker object per phase of the pipeline where an author wants to run code.</p>
<p>However there may be multiple instances of the CSSWorkerGlobalScope executing code on behalf of the author.
They also may run on the same thread as the main execution environment or different.</p>
<p>Additionally the CSSWorkerGlobalScope may be destroyed / created at anytime. This is not examinable from the main javascript world.</p>
<pre class="idl">[Exposed=(Window,Worker)]
interface <dfn class="idl-code" data-dfn-type="interface" data-export="" id="cssworker">CSSWorker<a class="self-link" href="#cssworker"></a></dfn> : <a data-link-type="idl-name" href="http://dom.spec.whatwg.org/#eventtarget">EventTarget</a> {
[NewObject] Promise&lt;boolean> <a class="idl-code" data-link-type="method" href="#dom-cssworker-importscripts">importScripts</a>(DOMString... <dfn class="idl-code" data-dfn-for="CSSWorker/importScripts(urls...), CSSWorker/importScripts(urls)" data-dfn-type="argument" data-export="" id="dom-cssworker-importscripts-urls-urls">urls<a class="self-link" href="#dom-cssworker-importscripts-urls-urls"></a></dfn>);
readonly attribute sequence&lt;DOMString> <a class="idl-code" data-link-type="attribute" data-readonly="" data-type="sequence<DOMString> " href="#dom-cssworker-scripturls">scriptURLs</a>;
};
<a data-link-type="idl-name" href="#cssworker">CSSWorker</a> implements <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/workers.html#abstractworker">AbstractWorker</a>; // just has onerror.
</pre>
<dl>
<dt data-md="">
<p><dfn class="idl-code" data-dfn-for="CSSWorker" data-dfn-type="method" data-export="" id="dom-cssworker-importscripts">importScripts(<var>urls</var>)<a class="self-link" href="#dom-cssworker-importscripts"></a></dfn></p>
<dd data-md="">
<p>Similar to the global scope importScripts method. However returns a promise to notify authors when the CSSWorker will change rendering behaviour.
Similar to other asynchronous loading APIs the call ordering of importScripts doesn’t influence the completion ordering.
The order of the arguments however does matter, this determines the order in which the scripts loaded from the arguments are evaluated in the execution context.</p>
<dt data-md="">
<p><dfn class="idl-code" data-dfn-for="CSSWorker" data-dfn-type="attribute" data-export="" id="dom-cssworker-scripturls">scriptURLs<a class="self-link" href="#dom-cssworker-scripturls"></a></dfn>, <span> of type sequence&lt;<a data-link-type="idl-name" href="http://heycam.github.io/webidl/#idl-DOMString">DOMString</a>>, readonly</span></p>
<dd data-md="">
<p>The list of loaded scripts in the execution context.</p>
</dl>
<p class="issue" id="issue-0e5d4ba9"><a class="self-link" href="#issue-0e5d4ba9"></a> Do we actually need scriptURLs?</p>
<p class="issue" id="issue-73c46388"><a class="self-link" href="#issue-73c46388"></a> Do we need an initialization phase for the worker?</p>
<p class="issue" id="issue-10abb40f"><a class="self-link" href="#issue-10abb40f"></a> Should this be moved to the CSS object? Or stay on window?</p>
<p class="issue" id="issue-9915bd86"><a class="self-link" href="#issue-9915bd86"></a> Are you able to reset the worker completely? (Create a new CSSWorkerGlobalScope).</p>
<h2 class="heading settled" data-level="4" id="available-workers"><span class="secno">4. </span><span class="content">Available workers</span><a class="self-link" href="#available-workers"></a></h2>
<pre class="idl">partial interface <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a> {
[SameObject] readonly attribute <a data-link-type="idl-name" href="#cssworker">CSSWorker</a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export="" data-readonly="" data-type="CSSWorker " id="dom-window-styleworker">styleWorker<a class="self-link" href="#dom-window-styleworker"></a></dfn>;
[SameObject] readonly attribute <a data-link-type="idl-name" href="#cssworker">CSSWorker</a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export="" data-readonly="" data-type="CSSWorker " id="dom-window-layoutworker">layoutWorker<a class="self-link" href="#dom-window-layoutworker"></a></dfn>;
[SameObject] readonly attribute <a data-link-type="idl-name" href="#cssworker">CSSWorker</a> <dfn class="idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export="" data-readonly="" data-type="CSSWorker " id="dom-window-paintworker">paintWorker<a class="self-link" href="#dom-window-paintworker"></a></dfn>;
};
</pre>
<p class="issue" id="issue-bef36d6d"><a class="self-link" href="#issue-bef36d6d"></a> Move these to their respective specs.</p>
<h2 class="heading settled" data-level="5" id="examples"><span class="secno">5. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
<pre class="lang-javascript highlight"><span class="nb">window</span><span class="p">.</span><span class="nx">paintWorker</span><span class="p">.</span><span class="nx">importScripts</span><span class="p">(</span><span class="s1">'paint.js'</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">justABool</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">// May want to notify UI that this is ready. Actually display the content.</span>
<span class="p">});</span></pre>
<pre class="lang-javascript highlight"><span class="nx">Promise</span><span class="p">.</span><span class="nx">all</span><span class="p">([</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">styleWorker</span><span class="p">.</span><span class="nx">importScripts</span><span class="p">(</span><span class="s1">'style.js'</span><span class="p">),</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">layoutWorker</span><span class="p">.</span><span class="nx">importScripts</span><span class="p">(</span><span class="s1">'layout.js'</span><span class="p">)</span>
<span class="p">]).</span><span class="nx">then</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="c1">// Display content, relies on two scripts properly loading.</span>
<span class="p">});</span></pre>
</main>
<h2 class="no-ref no-num heading settled" id="conformance"><span class="content">
Conformance</span><a class="self-link" href="#conformance"></a></h2>
<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-ae2b6bc0"><a class="self-link" href="#example-ae2b6bc0"></a>
This is an example of an informative example.
</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>
<h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
<h3 class="no-num 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="indexlist">
<li>CSSWorker, <a href="#cssworker">3</a>
<li>CSSWorkerGlobalScope, <a href="#cssworkerglobalscope">2</a>
<li>importScripts(urls)
<ul>
<li>method for CSSWorkerGlobalScope, <a href="#dom-cssworkerglobalscope-importscripts">2</a>
<li>method for CSSWorker, <a href="#dom-cssworker-importscripts">3</a>
</ul>
<li>layoutWorker, <a href="#dom-window-layoutworker">4</a>
<li>onerror, <a href="#dom-cssworkerglobalscope-onerror">2</a>
<li>paintWorker, <a href="#dom-window-paintworker">4</a>
<li>scriptURLs, <a href="#dom-cssworker-scripturls">3</a>
<li>self, <a href="#dom-cssworkerglobalscope-self">2</a>
<li>styleWorker, <a href="#dom-window-styleworker">4</a>
<li>urls
<ul>
<li>argument for CSSWorkerGlobalScope/importScripts(urls...), CSSWorkerGlobalScope/importScripts(urls), <a href="#dom-cssworkerglobalscope-importscripts-urls-urls">2</a>
<li>argument for CSSWorker/importScripts(urls...), CSSWorker/importScripts(urls), <a href="#dom-cssworker-importscripts-urls-urls">3</a>
</ul>
</ul>
<h3 class="no-num 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="indexlist">
<li><a data-link-type="biblio" href="#biblio-dom-ls">[dom-ls]</a> defines the following terms:
<ul>
<li><a href="http://dom.spec.whatwg.org/#eventtarget">EventTarget</a>
</ul>
<li><a data-link-type="biblio" href="#biblio-html">[HTML]</a> defines the following terms:
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/workers.html#abstractworker">AbstractWorker</a>
<li><a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">EventHandler</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#windowbase64">WindowBase64</a>
</ul>
<li><a data-link-type="biblio" href="#biblio-webidl">[WebIDL]</a> defines the following terms:
<ul>
<li><a href="http://heycam.github.io/webidl/#idl-DOMString">DOMString</a>
</ul>
</ul>
<h2 class="no-num heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
<h3 class="no-num heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
<dl>
<dt id="biblio-html"><a class="self-link" href="#biblio-html"></a>[HTML]
<dd>Ian Hickson. <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-webidl"><a class="self-link" href="#biblio-webidl"></a>[WebIDL]
<dd>Cameron McCormack. <a href="http://www.w3.org/TR/WebIDL/">Web IDL</a>. 19 April 2012. CR. URL: <a href="http://www.w3.org/TR/WebIDL/">http://www.w3.org/TR/WebIDL/</a>
<dt id="biblio-dom-ls"><a class="self-link" href="#biblio-dom-ls"></a>[DOM-LS]
<dd>Document Object Model URL: <a href="http://dom.spec.whatwg.org/">http://dom.spec.whatwg.org/</a>
<dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[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>
</dl>
<h2 class="no-num heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl">interface <a href="#cssworkerglobalscope">CSSWorkerGlobalScope</a> : <a data-link-type="idl-name" href="http://dom.spec.whatwg.org/#eventtarget">EventTarget</a> {
readonly attribute <a data-link-type="idl-name" href="#cssworkerglobalscope">CSSWorkerGlobalScope</a> <a class="idl-code" data-link-type="attribute" data-readonly="" data-type="CSSWorkerGlobalScope " href="#dom-cssworkerglobalscope-self">self</a>;
void <a class="idl-code" data-link-type="method" href="#dom-cssworkerglobalscope-importscripts">importScripts</a>(DOMString... <a href="#dom-cssworkerglobalscope-importscripts-urls-urls">urls</a>);
attribute <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">EventHandler</a> <a data-type="EventHandler " href="#dom-cssworkerglobalscope-onerror">onerror</a>;
};
<a data-link-type="idl-name" href="#cssworkerglobalscope">CSSWorkerGlobalScope</a> implements <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#windowbase64">WindowBase64</a>;
[Exposed=(Window,Worker)]
interface <a href="#cssworker">CSSWorker</a> : <a data-link-type="idl-name" href="http://dom.spec.whatwg.org/#eventtarget">EventTarget</a> {
[NewObject] Promise&lt;boolean> <a class="idl-code" data-link-type="method" href="#dom-cssworker-importscripts">importScripts</a>(DOMString... <a href="#dom-cssworker-importscripts-urls-urls">urls</a>);
readonly attribute sequence&lt;DOMString> <a class="idl-code" data-link-type="attribute" data-readonly="" data-type="sequence<DOMString> " href="#dom-cssworker-scripturls">scriptURLs</a>;
};
<a data-link-type="idl-name" href="#cssworker">CSSWorker</a> implements <a data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/workers.html#abstractworker">AbstractWorker</a>; // just has onerror.
partial interface <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/browsers.html#window">Window</a> {
[SameObject] readonly attribute <a data-link-type="idl-name" href="#cssworker">CSSWorker</a> <a data-readonly="" data-type="CSSWorker " href="#dom-window-styleworker">styleWorker</a>;
[SameObject] readonly attribute <a data-link-type="idl-name" href="#cssworker">CSSWorker</a> <a data-readonly="" data-type="CSSWorker " href="#dom-window-layoutworker">layoutWorker</a>;
[SameObject] readonly attribute <a data-link-type="idl-name" href="#cssworker">CSSWorker</a> <a data-readonly="" data-type="CSSWorker " href="#dom-window-paintworker">paintWorker</a>;
};
</pre>
<h2 class="no-num 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"> Link to relevant specs this will be used in.<a href="#issue-fafd2335"> ↵ </a></div>
<div class="issue"> importScripts might be a bad idea.
It allows a Houdini callback to perform a network request in the middle of style/layout/paint.
It allows a communication channel to the outside world.<a href="#issue-e82d4d33"> ↵ </a></div>
<div class="issue"> What happens here?
Most things here have been stripped out. For example setTimeout, setInterval, etc.
What happens with Promises?<a href="#issue-426a7a5f"> ↵ </a></div>
<div class="issue"> Do we actually need scriptURLs?<a href="#issue-0e5d4ba9"> ↵ </a></div>
<div class="issue"> Do we need an initialization phase for the worker?<a href="#issue-73c46388"> ↵ </a></div>
<div class="issue"> Should this be moved to the CSS object? Or stay on window?<a href="#issue-10abb40f"> ↵ </a></div>
<div class="issue"> Are you able to reset the worker completely? (Create a new CSSWorkerGlobalScope).<a href="#issue-9915bd86"> ↵ </a></div>
<div class="issue"> Move these to their respective specs.<a href="#issue-bef36d6d"> ↵ </a></div>
</div></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment