Skip to content

Instantly share code, notes, and snippets.

@shans

shans/css-paint-api.html

Created April 20, 2015 04:37
Show Gist options
  • Save shans/cdabcb3bb45e5368afdd to your computer and use it in GitHub Desktop.
Save shans/cdabcb3bb45e5368afdd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-paint-api.html
<!doctype html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>CSS Painting API Level 1</title>
<style>
@media print {
html { margin: 0 !important; }
body { font-family: serif; }
th, td { font-family: inherit; }
a { color: inherit !important; }
.example:before { font-family: serif !important; }
a:link, a:visited { text-decoration: none !important; }
a:link:after, a:visited:after { /* create a cross-ref "see..." */; }
}
@page {
margin: 1.5cm 1.1cm;
}
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
figure, div.figure, div.sidefigure, pre, table.propdef, table.propdef-extra,
.example { page-break-inside: avoid; }
dt { page-break-after: avoid; }
body {
background: white;
/* background-image: floating-margin-image-goes-here; */
background-position: top left;
background-attachment: fixed;
background-repeat: no-repeat;
color: black;
counter-reset: exampleno figure issue;
font-family: sans-serif;
line-height: 1.5;
margin: 0 auto;
max-width: 50em;
padding: 2em 1em 2em 70px;
}
/* General structural markup */
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; }
h2, h3, h4, h5, h6 { margin-top: 3em; }
h1 + h2 { margin-top: 0em; }
h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 1.2em; }
.head { margin-bottom: 1em; }
.head h1 { margin-top: 2em; clear: both; }
.head table { margin-left: 2em; margin-top: 2em; }
.head dd { margin-bottom: 0; }
p.copyright { font-size: small; }
p.copyright small { font-size: small; }
pre { margin: 1em 0 1em 2em; overflow: auto; }
pre, code, .idl-code {
font-size: .9em;
font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
dt dfn code { font-size: inherit; }
dfn { font-weight: bolder; }
dfn var { font-style: normal; }
s, del {text-decoration: line-through; color: red; }
u, ins {text-decoration: underline; background: #bfa; }
sup {
vertical-align: super;
font-size: 80%
}
details { display: block; }
dt { font-weight: bold; }
dd { margin: 0 0 1em 2em; }
ul, ol { margin-left: 0; padding-left: 2em; }
li { margin: 0.25em 2em 0.5em 0; padding-left: 0; }
[data-md] > :first-child { margin-top: 0; }
[data-md] > :last-child { margin-bottom: 0; }
td.pre {
white-space: pre-wrap;
}
.css, .property { color: #005a9c; }
.property { white-space: nowrap; }
/* Boilerplate sections */
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 a { font-weight: bold; }
ul.indexlist ul, ul.indexlist dl { font-size: smaller; }
ul.indexlist dl { margin-top: 0; }
ul.indexlist dt { margin: .2em 0 .2em 20px; }
ul.indexlist dd { margin: .2em 0 .2em 40px; }
.toc {
font-weight: bold;
line-height: 1.3;
list-style: none;
margin: 1em 0 0 5em;
padding: 0;
}
.toc ul { margin: 0; padding: 0; font-weight: normal; }
.toc ul ul { margin: 0 0 0 2em; font-style: italic; }
.toc ul ul ul { margin: 0}
.toc > li { margin: 1.5em 0; padding: 0; }
.toc li { clear: both; }
.toc ul.toc li { margin: 0.3em 0 0 0; }
.toc a { border-bottom-style: none; }
.toc a:hover, ul.toc a:focus { border-bottom-style: solid; }
/* Section numbers in a column of their own */
.toc span.secno {float: left; width: 4em; margin-left: -5em}
.toc ul ul span.secno { margin-left: -7em; }
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; }
/* Links */
a[href] { color: inherit; border-bottom: 1px solid silver; text-decoration: none; }
a[href]:hover { background: #ffa; }
a[href]:active { color: #C00; background: transparent; }
img, a.logo { border-style: none; }
.heading, .issue, .note, .example, li, dt { position: relative; }
/* CSS-ish link types */
[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: ""; }
/* Element-type link styling */
[data-link-type=element] { font-family: monospace; }
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after { content: ">" }
/* Self-links */
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: "#"; }
/* Figures */
figure {
display: block;
text-align: center;
margin: 2.5em 0;
}
figure.sidefigure {
float: right;
width: 50%;
margin: 0 0 0.5em 0.5em
}
figure pre {
text-align: left;
display: table;
margin: 1em auto;
}
figure table {
margin: auto;
}
figure img, figure object {
display: block;
margin: auto;
max-width: 100%
}
figcaption {
counter-increment: figure;
font-size: 90%;
font-style: italic;
text-align: center;
}
figcaption::before {
content: "Figure " counter(figure) ". ";
font-weight: bold;
}
dd figure { margin-left: -2em; }
/* Definition tables */
table.definition {
border-spacing: 0;
padding: 0 1em 0.5em;
width: 100%;
table-layout: fixed;
margin: 1.2em 0;
}
table.definition td, table.definition th {
padding: 0.5em;
vertical-align: baseline;
border-bottom: 1px solid #bbd7e9;
}
table.definition th:first-child {
font-style: italic;
font-weight: normal;
text-align: left;
width: 8.3em;
padding-left: 1em;
}
table.definition > tbody > tr:last-child > th,
table.definition > tbody > tr:last-child > td {
border-bottom: none;
}
table.definition tr:first-child > th,
table.definition tr:first-child > td {
padding-top: 1em;
}
/* Footnotes at the bottom of a definition table */
table.definition td.footnote {
font-style: normal;
padding-top: .6em;
width: auto;
}
table.definition td.footnote::before {
content: " ";
display: block;
height: 0.6em;
width: 4em;
border-top: thin solid;
}
/* IDL fragments */
pre.idl {
padding: .5em 1em;
margin: 1.2em 0;
}
pre.idl :link, pre.idl :visited {
color:inherit;
background:transparent;
}
/* Data tables */
/* Comes in plain, long, complex, or define varieties */
.data {
margin: 1em auto;
border-collapse: collapse;
width: 100%;
border: hidden;
}
.data {
text-align: center;
width: auto;
}
.data caption {
width: 100%;
}
.data td, .data 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"] {
text-align: right;
color: inherit;
}
.data thead,
.data tbody {
color: inherit;
border-bottom: 2px solid;
}
.data colgroup {
border-left: 2px solid;
}
.data tbody th:first-child,
.data 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],
.data tbody td[rowspan] {
border-left: 1px solid silver;
}
.data tbody th[rowspan]:first-child,
.data tbody td[rowspan]:first-child {
border-left: 0;
border-right: 1px solid silver;
}
.data.complex th,
.data.complex td {
border: 1px solid silver;
}
.data td.long {
vertical-align: baseline;
text-align: left;
}
.data img {
vertical-align: middle;
}
/* Switch/case <dl>s */
dl.switch {
padding-left: 2em;
}
dl.switch > dt {
text-indent: -1.5em;
}
dl.switch > dt:before {
content: '↪';
padding: 0 0.5em 0 0;
display: inline-block;
width: 1em;
text-align: right;
line-height: 0.5em;
}
/* Style for At Risk features (intended as editorial aid, not intended for publishing) */
.atrisk::before {
position: absolute;
margin-left: -5em;
margin-top: -2px;
padding: 4px;
border: 1px solid;
content: 'At risk';
font-size: small;
background-color: white;
color: gray;
border-radius: 1em;
text-align: center;
}
/* Obsoletion notice */
details.annoying-warning[open] {
background: #fdd;
color: red;
font-weight: bold;
text-align: center;
padding: .5em;
border: thick solid red;
border-radius: 1em;
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;
}
/* Examples */
.example {
counter-increment: exampleno;
}
.example::before {
content: "Example";
content: "Example " counter(exampleno);
min-width: 7.5em;
text-transform: uppercase;
display: block;
}
.illegal-example::before {
content: "Invalid Example";
content: "Invalid Example" counter(exampleno);
}
.example, .illegal-example, .html, .illegal-html, .xml, .illegal-xml {
padding: 0.5em;
margin: 1em 0;
position: relative;
clear: both;
}
pre.example, pre.illegal-example, pre.html,
pre.illegal-html, pre.xml, pre.illegal-xml {
padding-top: 1.5em;
}
.illegal-example { color: red; }
.illegal-example p { color: black; }
.html { color: #600; }
.illegal-html { color: red; }
.illegal-html p { color: black; }
.xml { color: #600; }
.illegal-xml { color: red; }
.illegal-xml p { color: black; }
code.css { font-family: inherit; font-size: 100% }
code.html { color: #600 } /* inline HTML */
code.xml { color: #600 } /* inline XML */
/* Issues */
.issue {
border-color: #E05252;
background: #FBE9E9;
counter-increment: issue;
}
.issue:before {
content: "Issue " counter(issue);
padding-right: 1em;
text-transform: uppercase;
color: #E05252;
}
/* Whys */
details.why > summary {
font-style: italic;
}
details.why[open] > summary {
border-bottom: 1px silver solid;
}
/* All the blocks get similarly styled */
table.definition, pre.idl, .example, .note, details.why, .issue {
border: none;
border-left: .5em solid black;
border-left: .5rem solid black;
}
.issue, .note, .example, .why {
padding: .5em;
margin-top: 1em;
margin-bottom: 1em;
}
table.definition, pre.idl {
background: hsl(210, 70%, 95%);
border-color: hsl(210, 80%, 75%);
}
.example {
background: hsl(50, 70%, 95%);
border-color: hsl(50, 70%, 60%);
}
.example::before {
color: hsl(50, 70%, 60%);
}
.note, details.why {
background: hsl(120, 70%, 95%);
border-color: hsl(120, 70%, 60%);
}
.note::before {
color: hsl(120, 70%, 60%);
}
.issue {
background: hsl(0, 70%, 95%);
border-color: hsl(0, 70%, 60%);
}
.issue::before {
color: hsl(0, 70%, 60%);
}
span.issue, span.note {
padding: .1em .5em .15em;
border-right-width: .5em;
border-right-style: solid;
}
</style>
<meta content="Bikeshed 1.0.0" name="generator">
</head>
<body class="h-entry">
<div class="head">
<p data-fill-with="logo"></p>
<h1 class="p-name no-ref" id="title">CSS Painting 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-04-19">19 April 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-paint-api/">http://dev.w3.org/houdini/css-paint-api/</a>
<dt>Issue Tracking:
<dd><a href="#issues-index">Inline In Spec</a>
<dt class="editor">Editors:
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:shanestephens@google.com">Shane Stephens</a>
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:ikilpatrick@chromium.org">Ian Kilpatrick</a>
<dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:dino@apple.com">Dean Jackson</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 April 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">
<p>Elements that are styled by CSS respond to changes in laid out size and CSS property values by repainting their contents and background. This API allows the default paint algorithm for CSS-styled elements to be replaced by custom JavaScript code.</p>
</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="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
<li><a href="#the-paint-callback-lifecycle"><span class="secno">2</span> <span class="content">The Paint Callback Lifecycle</span></a>
<ul class="toc">
<li><a href="#Invalidation"><span class="secno">2.1</span> <span class="content">Invalidation</span></a>
</ul>
<li><a href="#registering-a-paint-callback"><span class="secno">3</span> <span class="content">Registering a Paint Callback</span></a>
<ul class="toc">
<li><a href="#the-paint-callback-table"><span class="secno">3.1</span> <span class="content">The Paint Callback Table</span></a>
</ul>
<li><a href="#isolated-javascript-execution"><span class="secno">4</span> <span class="content">Isolated JavaScript Execution</span></a>
<li><a href="#paint-callbacks"><span class="secno">5</span> <span class="content">Paint Callbacks</span></a>
<li><a href="#overriding-clipping-transform-and-opacity"><span class="secno">6</span> <span class="content">Overriding clipping, transform and opacity</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="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
<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="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
<p>The paint stage of CSS is responsible for painting the background, content and
highlight of an element based on that element’s geometry (as generated by the
layout stage) and computed style.</p>
<p>This specification describes an API that allows developers to replace the
default paint algorithm for CSS-styled elements with a custom JavaScript
implementation.</p>
<p class="issue" id="issue-4e9411ea"><a class="self-link" href="#issue-4e9411ea"></a>where in the elaborate description of stacking contexts should this
insert? Do we need 2 insertion points (background and content)? 3 (highlight)?
Should we therefore have multiple versions of the <a class="property" data-link-type="propdesc" href="#propdef-paint">paint</a> property? HALP</p>
<h2 class="heading settled" data-level="2" id="the-paint-callback-lifecycle"><span class="secno">2. </span><span class="content">The Paint Callback Lifecycle</span><a class="self-link" href="#the-paint-callback-lifecycle"></a></h2>
<p>Elements with paint callbacks have style computed and are laid out in
the normal way. The act of performing layout generates geometry information
which is fed into the paint callback as an input argument. Paint callbacks
also identify properties to which they are sensitive as part of registration.
The computed value of these properties are also provide to the paint callback
on invocation.</p>
<h3 class="heading settled" data-level="2.1" id="Invalidation"><span class="secno">2.1. </span><span class="content">Invalidation</span><a class="self-link" href="#Invalidation"></a></h3>
<p>At any given point in time, elements with paint callbacks are either
<dfn data-dfn-type="dfn" data-noexport="" id="paint_valid">paint-valid<a class="self-link" href="#paint_valid"></a></dfn> or <dfn data-dfn-type="dfn" data-noexport="" id="paint_invalid">paint-invalid<a class="self-link" href="#paint_invalid"></a></dfn>. Paint-invalid elements are
guaranteed to have their associated paint callback invoked before any region of
the rendered output of the page that overlaps the element is updated.</p>
<p class="issue" id="issue-4922d694"><a class="self-link" href="#issue-4922d694"></a>ew. Can we come up with a nicer description of this guarantee?</p>
<p>Invoking an element’s paint callback causes that element to become paint-valid.</p>
<p>Paint-valid elements become paint-invalid when one of the following occurs:</p>
<ul>
<li data-md="">
<p>the geometry of the element (as determined by a layout) changes</p>
<li data-md="">
<p>the computed style of a property that the paint callback has registered a
dependency on changes</p>
</ul>
<p>Paint-invalid elements' paint callbacks are not necessarily invoked on the
current frame (for example, elements outside of the current visual viewport may
not repaint even if dirty).</p>
<p>Paint-validity does not guarantee that an element’s paint callback is not
invoked. Browsers may choose to call paint-valid elements' paint callbacks for
simplicity. Thus to ensure cross-browser interoperability, registered paint
callbacks should be idempotent.</p>
<h2 class="heading settled" data-level="3" id="registering-a-paint-callback"><span class="secno">3. </span><span class="content">Registering a Paint Callback</span><a class="self-link" href="#registering-a-paint-callback"></a></h2>
<p>Elements are associated with a paint callback via the use of the <a class="property" data-link-type="propdesc" href="#propdef-paint">paint</a> property.</p>
<table class="definition propdef" data-link-for-hint="paint">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-paint">paint<a class="self-link" href="#propdef-paint"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod">none <a data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> &lt;IDENT>
<tr>
<th>Initial:
<td>none
<tr>
<th>Applies to:
<td>all elements and pseudo-elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>n/a
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>As specified
<tr>
<th>Animatable:
<td>no</table>
<p class="issue" id="issue-2b0187c3"><a class="self-link" href="#issue-2b0187c3"></a>should paint apply to more media than just visual? Or should we just
rely on the accessibility APIs here?</p>
<p class="issue" id="issue-b6a436b9"><a class="self-link" href="#issue-b6a436b9"></a>should it be possible to support multiple paint callbacks?</p>
<p>When a value other than none is specified, then this value represents a
lookup into the <a data-link-type="dfn" href="#paint-callback-table">paint callback table</a>.</p>
<h3 class="heading settled" data-level="3.1" id="the-paint-callback-table"><span class="secno">3.1. </span><span class="content">The Paint Callback Table</span><a class="self-link" href="#the-paint-callback-table"></a></h3>
<p>The <dfn data-dfn-type="dfn" data-noexport="" id="paint-callback-table">paint callback table<a class="self-link" href="#paint-callback-table"></a></dfn> is a dictionary of <a data-link-type="dfn" href="#paint-callback">paint callbacks</a>,
initialized and maintained by JavaScript. A single method is available to
configure this table:</p>
<pre class="idl">partial interface <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/#dom-document">Document</a> {
void <dfn class="idl-code" data-dfn-for="Document" data-dfn-type="method" data-export="" data-global-name="Document<interface>/registerCustomPaint(callbackName, paintCallback)<method>" data-lt="registerCustomPaint(callbackName, paintCallback)" id="dom-document-registercustompaintcallbackname-paintcallback">registerCustomPaint<a class="self-link" href="#dom-document-registercustompaintcallbackname-paintcallback"></a></dfn>(DOMString <dfn class="idl-code" data-dfn-for="Document/registerCustomPaint" data-dfn-type="argument" data-export="" data-global-name="Document/registerCustomPaint/callbackName<argument>" id="dom-document-registercustompaint-callbackname">callbackName<a class="self-link" href="#dom-document-registercustompaint-callbackname"></a></dfn>, <a data-link-type="idl-name" href="#paintcallback">PaintCallback</a> <dfn class="idl-code" data-dfn-for="Document/registerCustomPaint" data-dfn-type="argument" data-export="" data-global-name="Document/registerCustomPaint/paintCallback<argument>" id="dom-document-registercustompaint-paintcallback">paintCallback<a class="self-link" href="#dom-document-registercustompaint-paintcallback"></a></dfn>);
};
</pre>
<p>Multiple calls to <code class="idl"><a data-link-type="idl" href="#dom-document-registercustompaintcallbackname-paintcallback">registerCustomPaint()</a></code> override previous registrations. A
name can be dissociated from a callback by calling <code class="idl"><a data-link-type="idl" href="#dom-document-registercustompaintcallbackname-paintcallback">registerCustomPaint()</a></code>
with a null <a data-link-type="dfn" href="#paint-callback">paint callback</a>.</p>
<h2 class="heading settled" data-level="4" id="isolated-javascript-execution"><span class="secno">4. </span><span class="content">Isolated JavaScript Execution</span><a class="self-link" href="#isolated-javascript-execution"></a></h2>
<p class="issue" id="issue-e9ac6c3d"><a class="self-link" href="#issue-e9ac6c3d"></a>everything here needs to be defined. This might use realms, or a special
worker. It’s important that the thread affinity here is implementor-definable.</p>
<h2 class="heading settled" data-level="5" id="paint-callbacks"><span class="secno">5. </span><span class="content">Paint Callbacks</span><a class="self-link" href="#paint-callbacks"></a></h2>
<p><dfn data-dfn-type="dfn" data-noexport="" id="paint-callback">paint callback<a class="self-link" href="#paint-callback"></a></dfn></p>
<pre class="idl">dictionary <dfn class="idl-code" data-dfn-type="dictionary" data-export="" data-global-name="" id="dictdef-propertydictionary">PropertyDictionary<a class="self-link" href="#dictdef-propertydictionary"></a></dfn> {
// key-value pairs...
};
interface <dfn class="idl-code" data-dfn-type="interface" data-export="" data-global-name="" id="geometryinfo">GeometryInfo<a class="self-link" href="#geometryinfo"></a></dfn> {
readonly attribute double <dfn class="idl-code" data-dfn-for="GeometryInfo" data-dfn-type="attribute" data-export="" data-global-name="GeometryInfo<interface>/width<attribute>" data-readonly="" data-type="double " id="dom-geometryinfo-width">width<a class="self-link" href="#dom-geometryinfo-width"></a></dfn>;
readonly attribute double <dfn class="idl-code" data-dfn-for="GeometryInfo" data-dfn-type="attribute" data-export="" data-global-name="GeometryInfo<interface>/height<attribute>" data-readonly="" data-type="double " id="dom-geometryinfo-height">height<a class="self-link" href="#dom-geometryinfo-height"></a></dfn>;
// TODO: Fragment information
};
interface <dfn class="idl-code" data-dfn-type="interface" data-export="" data-global-name="" id="writeonlycanvas">WriteOnlyCanvas<a class="self-link" href="#writeonlycanvas"></a></dfn> {
};
callback <dfn class="idl-code" data-dfn-type="callback" data-export="" data-global-name="" id="callbackdef-paintcallbacktype">PaintCallbackType<a class="self-link" href="#callbackdef-paintcallbacktype"></a></dfn> = void (<a data-link-type="idl-name" href="#geometryinfo">GeometryInfo</a> <dfn class="idl-code" data-dfn-for="PaintCallbackType" data-dfn-type="argument" data-export="" data-global-name="PaintCallbackType/geometry<argument>" id="dom-paintcallbacktype-geometry">geometry<a class="self-link" href="#dom-paintcallbacktype-geometry"></a></dfn>, <a data-link-type="idl-name" href="#dictdef-propertydictionary">PropertyDictionary</a> <dfn class="idl-code" data-dfn-for="PaintCallbackType" data-dfn-type="argument" data-export="" data-global-name="PaintCallbackType/properties<argument>" id="dom-paintcallbacktype-properties">properties<a class="self-link" href="#dom-paintcallbacktype-properties"></a></dfn>, <a data-link-type="idl-name" href="#writeonlycanvas">WriteOnlyCanvas</a> <dfn class="idl-code" data-dfn-for="PaintCallbackType" data-dfn-type="argument" data-export="" data-global-name="PaintCallbackType/canvas<argument>" id="dom-paintcallbacktype-canvas">canvas<a class="self-link" href="#dom-paintcallbacktype-canvas"></a></dfn>);
interface <dfn class="idl-code" data-dfn-type="interface" data-export="" data-global-name="" id="paintcallback">PaintCallback<a class="self-link" href="#paintcallback"></a></dfn> {
attribute <a data-link-type="idl-name" href="#callbackdef-paintcallbacktype">PaintCallbackType</a> <dfn class="idl-code" data-dfn-for="PaintCallback" data-dfn-type="attribute" data-export="" data-global-name="PaintCallback<interface>/paintCallback<attribute>" data-type="PaintCallbackType " id="dom-paintcallback-paintcallback">paintCallback<a class="self-link" href="#dom-paintcallback-paintcallback"></a></dfn>;
attribute sequence&lt;DOMString> <dfn class="idl-code" data-dfn-for="PaintCallback" data-dfn-type="attribute" data-export="" data-global-name="PaintCallback<interface>/properties<attribute>" data-type="sequence<DOMString> " id="dom-paintcallback-properties">properties<a class="self-link" href="#dom-paintcallback-properties"></a></dfn>;
};
</pre>
<p class="issue" id="issue-f9d1718e"><a class="self-link" href="#issue-f9d1718e"></a>paintCallback won’t be a simple function, but will depend on how <a href="#the-paint-callback-table">§3.1 The Paint Callback Table</a> ends up being defined.</p>
<p class="issue" id="issue-7ffc492e"><a class="self-link" href="#issue-7ffc492e"></a>Do we need to be able to specify up-front what kind of context will be
used for performance reasons?</p>
<p class="issue" id="issue-fdd7ce00"><a class="self-link" href="#issue-fdd7ce00"></a>is GeometryInfo just box tree’s DeadFragmentInformation?</p>
<p class="issue" id="issue-1114168e"><a class="self-link" href="#issue-1114168e"></a>how do we transfer in bitmapped data?</p>
<h2 class="heading settled" data-level="6" id="overriding-clipping-transform-and-opacity"><span class="secno">6. </span><span class="content">Overriding clipping, transform and opacity</span><a class="self-link" href="#overriding-clipping-transform-and-opacity"></a></h2>
<p class="issue" id="issue-b7b1e314"><a class="self-link" href="#issue-b7b1e314"></a>TODO</p>
</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>callbackName, <a href="#dom-document-registercustompaint-callbackname">3.1</a>
<li>canvas, <a href="#dom-paintcallbacktype-canvas">5</a>
<li>geometry, <a href="#dom-paintcallbacktype-geometry">5</a>
<li>GeometryInfo, <a href="#geometryinfo">5</a>
<li>height, <a href="#dom-geometryinfo-height">5</a>
<li>paint, <a href="#propdef-paint">3</a>
<li>paintCallback
<ul>
<li>argument for Document/registerCustomPaint, <a href="#dom-document-registercustompaint-paintcallback">3.1</a>
<li>attribute for PaintCallback, <a href="#dom-paintcallback-paintcallback">5</a>
</ul>
<li>paint callback, <a href="#paint-callback">5</a>
<li>PaintCallback, <a href="#paintcallback">5</a>
<li>paint callback table, <a href="#paint-callback-table">3.1</a>
<li>PaintCallbackType, <a href="#callbackdef-paintcallbacktype">5</a>
<li>paint-invalid, <a href="#paint_invalid">2.1</a>
<li>paint-valid, <a href="#paint_valid">2.1</a>
<li>properties
<ul>
<li>argument for PaintCallbackType, <a href="#dom-paintcallbacktype-properties">5</a>
<li>attribute for PaintCallback, <a href="#dom-paintcallback-properties">5</a>
</ul>
<li>PropertyDictionary, <a href="#dictdef-propertydictionary">5</a>
<li>registerCustomPaint(callbackName, paintCallback), <a href="#dom-document-registercustompaintcallbackname-paintcallback">3.1</a>
<li>width, <a href="#dom-geometryinfo-width">5</a>
<li>WriteOnlyCanvas, <a href="#writeonlycanvas">5</a>
</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-css-values-3">[css-values-3]</a> defines the following terms:
<ul>
<li><a href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</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/#dom-document">Document</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/">HTML</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/">https://html.spec.whatwg.org/</a>
<dt id="biblio-css-values-3"><a class="self-link" href="#biblio-css-values-3"></a>[CSS-VALUES-3]
<dd>CSS Values and Units Module Level 3 URL: <a href="http://www.w3.org/TR/css3-values/">http://www.w3.org/TR/css3-values/</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="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
<table class="proptable data">
<thead>
<tr>
<th scope="col">Name
<th scope="col">Value
<th scope="col">Initial
<th scope="col">Applies to
<th scope="col">Inh.
<th scope="col">%ages
<th scope="col">Media
<th scope="col">Animatable
<th scope="col">Computed value
<tbody>
<tr>
<th scope="row"><a class="css" data-link-type="property" href="#propdef-paint">paint</a>
<td>none | &lt;IDENT>
<td>none
<td>all elements and pseudo-elements
<td>no
<td>n/a
<td>visual
<td>no
<td>As specified
</table>
<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">partial interface <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/#dom-document">Document</a> {
void <a data-global-name="Document<interface>/registerCustomPaint(callbackName, paintCallback)<method>" href="#dom-document-registercustompaintcallbackname-paintcallback">registerCustomPaint</a>(DOMString <a data-global-name="Document/registerCustomPaint/callbackName<argument>" href="#dom-document-registercustompaint-callbackname">callbackName</a>, <a data-link-type="idl-name" href="#paintcallback">PaintCallback</a> <a data-global-name="Document/registerCustomPaint/paintCallback<argument>" href="#dom-document-registercustompaint-paintcallback">paintCallback</a>);
};
dictionary <a data-global-name="" href="#dictdef-propertydictionary">PropertyDictionary</a> {
// key-value pairs...
};
interface <a data-global-name="" href="#geometryinfo">GeometryInfo</a> {
readonly attribute double <a data-global-name="GeometryInfo<interface>/width<attribute>" data-readonly="" data-type="double " href="#dom-geometryinfo-width">width</a>;
readonly attribute double <a data-global-name="GeometryInfo<interface>/height<attribute>" data-readonly="" data-type="double " href="#dom-geometryinfo-height">height</a>;
// TODO: Fragment information
};
interface <a data-global-name="" href="#writeonlycanvas">WriteOnlyCanvas</a> {
};
callback <a data-global-name="" href="#callbackdef-paintcallbacktype">PaintCallbackType</a> = void (<a data-link-type="idl-name" href="#geometryinfo">GeometryInfo</a> <a data-global-name="PaintCallbackType/geometry<argument>" href="#dom-paintcallbacktype-geometry">geometry</a>, <a data-link-type="idl-name" href="#dictdef-propertydictionary">PropertyDictionary</a> <a data-global-name="PaintCallbackType/properties<argument>" href="#dom-paintcallbacktype-properties">properties</a>, <a data-link-type="idl-name" href="#writeonlycanvas">WriteOnlyCanvas</a> <a data-global-name="PaintCallbackType/canvas<argument>" href="#dom-paintcallbacktype-canvas">canvas</a>);
interface <a data-global-name="" href="#paintcallback">PaintCallback</a> {
attribute <a data-link-type="idl-name" href="#callbackdef-paintcallbacktype">PaintCallbackType</a> <a data-global-name="PaintCallback<interface>/paintCallback<attribute>" data-type="PaintCallbackType " href="#dom-paintcallback-paintcallback">paintCallback</a>;
attribute sequence&lt;DOMString> <a data-global-name="PaintCallback<interface>/properties<attribute>" data-type="sequence<DOMString> " href="#dom-paintcallback-properties">properties</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">where in the elaborate description of stacking contexts should this
insert? Do we need 2 insertion points (background and content)? 3 (highlight)?
Should we therefore have multiple versions of the <a class="property" data-link-type="propdesc" href="#propdef-paint">paint</a> property? HALP<a href="#issue-4e9411ea"> ↵ </a></div>
<div class="issue">ew. Can we come up with a nicer description of this guarantee?<a href="#issue-4922d694"> ↵ </a></div>
<div class="issue">should paint apply to more media than just visual? Or should we just
rely on the accessibility APIs here?<a href="#issue-2b0187c3"> ↵ </a></div>
<div class="issue">should it be possible to support multiple paint callbacks?<a href="#issue-b6a436b9"> ↵ </a></div>
<div class="issue">everything here needs to be defined. This might use realms, or a special
worker. It’s important that the thread affinity here is implementor-definable.<a href="#issue-e9ac6c3d"> ↵ </a></div>
<div class="issue">paintCallback won’t be a simple function, but will depend on how <a href="#the-paint-callback-table">§3.1 The Paint Callback Table</a> ends up being defined.<a href="#issue-f9d1718e"> ↵ </a></div>
<div class="issue">Do we need to be able to specify up-front what kind of context will be
used for performance reasons?<a href="#issue-7ffc492e"> ↵ </a></div>
<div class="issue">is GeometryInfo just box tree’s DeadFragmentInformation?<a href="#issue-fdd7ce00"> ↵ </a></div>
<div class="issue">how do we transfer in bitmapped data?<a href="#issue-1114168e"> ↵ </a></div>
<div class="issue">TODO<a href="#issue-b7b1e314"> ↵ </a></div>
</div></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment