Skip to content

Commit 0f39ce3

Browse files
nainarnainar
authored
Merge pull request #1 from w3c/master
Update fork
2 parents 7314179 + 3e32d4a commit 0f39ce3

23 files changed

+3188
-945
lines changed

‎css-layout-api/Overview.bs

Lines changed: 718 additions & 139 deletions
Large diffs are not rendered by default.

‎css-layout-api/README.md

Lines changed: 530 additions & 0 deletions
Large diffs are not rendered by default.

‎css-layout-api/images/constraint_space_1.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 120px;
7+
--height: 120px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
height: var(--height);
18+
width: var(--width);
19+
margin: 20px;
20+
box-sizing: border-box;
21+
}
22+
23+
span {
24+
position: absolute;
25+
top: 0;
26+
font-family: sans-serif;
27+
font-size: 10px;
28+
background-color: white;
29+
padding: 2px;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<div></div>
35+
<span style="translate: 67px 13px;">120px</span>
36+
<span style="translate: 6px 72px;">120px</span>
37+
</body>
38+
</html>

‎css-layout-api/images/constraint_space_1.png

23.1 KB
Loading

‎css-layout-api/images/constraint_space_2.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 120px;
7+
--height: 100px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
height: var(--height);
18+
width: var(--width);
19+
margin: 20px;
20+
box-sizing: border-box;
21+
border-bottom-style: dashed;
22+
}
23+
24+
span {
25+
position: absolute;
26+
top: 0;
27+
font-family: sans-serif;
28+
font-size: 10px;
29+
background-color: white;
30+
padding: 2px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div></div>
36+
<span style="translate: 67px 13px;">120px</span>
37+
<span style="translate: 6px 62px;">100px</span>
38+
<span style="translate: 53px 102px;">scrollTrigger</span>
39+
</body>
40+
</html>

‎css-layout-api/images/constraint_space_2.png

26.8 KB
Loading

‎css-layout-api/images/constraint_space_3.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 120px;
7+
--height: 100px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
border-bottom-style: dashed;
18+
height: var(--height);
19+
width: var(--width);
20+
margin: 20px;
21+
box-sizing: border-box;
22+
border-right-style: dashed;
23+
}
24+
25+
span {
26+
position: absolute;
27+
top: 0;
28+
font-family: sans-serif;
29+
font-size: 10px;
30+
background-color: white;
31+
padding: 2px;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<div style="
37+
"></div>
38+
<span style="translate: 67px 13px;">120px</span>
39+
<span style="translate: 6px 62px;">100px</span>
40+
<span style="translate: 54px 102px;">scrollTrigger</span>
41+
<span style="translate: 78px 62px;">scrollTrigger</span>
42+
</body>
43+
</html>

‎css-layout-api/images/constraint_space_3.png

29.3 KB
Loading

‎css-layout-api/images/constraint_space_4.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
body {
6+
--width: 140px;
7+
--height: 100px;
8+
9+
border: solid 1px;
10+
height: calc(var(--height) + 40px);
11+
width: calc(var(--width) + 40px);
12+
position: absolute;
13+
}
14+
15+
div {
16+
border: 2px solid #2196F3;
17+
border-bottom-style: dotted;
18+
height: var(--height);
19+
width: var(--width);
20+
margin: 20px;
21+
box-sizing: border-box;
22+
}
23+
24+
span {
25+
position: absolute;
26+
top: 0;
27+
font-family: sans-serif;
28+
font-size: 10px;
29+
background-color: white;
30+
padding: 2px;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<div style="
36+
"></div>
37+
<span style="translate: 75px 13px;">140px</span>
38+
<span style="translate: 6px 62px;">100px</span>
39+
<span style="translate: 59px 102px;">fragmentation</span>
40+
</body>
41+
</html>

‎css-layout-api/images/constraint_space_4.png

27.3 KB
Loading

‎css-paint-api/EXPLAINER.md

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
CSS Paint API Explained
2+
=======================
3+
4+
The CSS Paint API is being developered to improve the extensibility of CSS.
5+
6+
Specifically
7+
8+
9+
Getting Started
10+
---------------
11+
12+
First you'll need to import a script into the paint worklet.
13+
14+
```js
15+
if ('paintWorklet' in window) {
16+
window.paintWorklet.import('my-paint-script.js').then(() => {
17+
console.log('paint script installed!');
18+
}
19+
}
20+
```
21+
22+
See the worklets explainer for a more involed explaination of worklets. In short worklets:
23+
- Are similar to workers in that the script runs in a separate global script context.
24+
- A script inside a worklet has no DOM, Network, Database, etc access.
25+
- The global script context lifetime is not defined (you should expect the script context to be killed at any point).
26+
- May have multiple copies of the script context spawned on multiple CPU cores.
27+
28+
As a couple of concrete example as to how the user agent may use these capabilities:
29+
- When a "tab" is backgrounded the script context(s) of the paint worklet may be killed to free up memory.
30+
- A multi-threaded user-engine may spawn multiple backing script contexts to perform the paint phase of the rendering engine in parallel.
31+
32+
Painting a circle
33+
-----------------
34+
35+
The global script context of the paint worklet has exactly one method exposed to developers: `registerPaint`.
36+
37+
```js
38+
registerPaint('circle', class {
39+
static inputProperties = ['--circle-color'];
40+
41+
paint(ctx, size, style) {
42+
// Change the fill color.
43+
const color = style.get('--circle-color');
44+
ctx.fillStyle = color;
45+
46+
// Determine the center point and radius.
47+
const x = size.width / 2;
48+
const y = size.height / 2;
49+
const radius = Math.min(x, y);
50+
51+
// Draw the circle \o/
52+
ctx.beginPath();
53+
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
54+
ctx.fill();
55+
}
56+
});
57+
```
58+
59+
There are a few things going on in this example so lets step through them one-by-one.
60+
61+
The `paint` function is your callback into the browsers paint phase in the rendering engine. You are given:
62+
- `ctx`, a rendering context, similar to a `CanvasRenderingContext2D`.
63+
- `size`, the size of the area in which you should paint.
64+
- `style`, the computed style of the element which are you currently painting.
65+
66+
The `style` is a Typed-OM style map. It will _only_ contain the CSS properties that you listed under the static `inputProperties` accessor.
67+
68+
This is to allow the engine to cache results of your paint class. For example if `--some-other-property` changes the user-agent knows that this doesn't affect your paint class, and can re-use the stored result.
69+
70+
The only time when your paint class _must_ be called is when the element it is painting into is within the viewport, and the size or CSS input properties have changed.
71+
72+
Why classes?
73+
------------
74+
75+
Classes allow composition of paint handlers. As an example:
76+
77+
```js
78+
class RectPainter {
79+
static inputProperties = ['--rect-color'];
80+
81+
paint(ctx, size, style) {
82+
// Change the fill color.
83+
ctx.fillStyle = style.get('--circle-color');
84+
85+
// Draw the solid rect.
86+
ctx.fillRect(0, 0, size.width, size.height);
87+
}
88+
}
89+
90+
class BorderRectPainter {
91+
static inputProperties = ['--border-color', ...super.inputProperties];
92+
93+
paint(ctx, size, style) {
94+
super.paint(ctx, size, style);
95+
96+
ctx.strokeStyle = style.get('--border-color');
97+
ctx.lineWidth = 4;
98+
99+
ctx.strokeRect(0, 0, size.width, size.height);
100+
}
101+
}
102+
103+
registerPaint('border-rect', BorderRectPainter);
104+
```
105+
106+
Classes also give the developer a specific point in time to perform pre-initialization work. As an example:
107+
108+
```js
109+
registerPaint('lots-of-paths', class {
110+
111+
constructor() {
112+
this.paths = performPathPreInit();
113+
}
114+
115+
performPathPreInit() {
116+
// Lots of work here to produce list of Path2D object to be reused.
117+
}
118+
119+
paint(ctx, size, style) {
120+
ctx.stroke(this.paths[i]);
121+
}
122+
});
123+
```
124+
125+
In this example `performPathPreInit` is doing CPU intensive work which should only be done once. Without classes this would typically be done when the script is first run, instead this is performed when the class instance is first created (which may be much later in time).
126+
127+
Drawing Images
128+
--------------
129+
130+
TODO
131+
132+
Paint Efficiency
133+
----------------
134+
135+
TODO

0 commit comments

Comments
 (0)