Ian Kilpatrick bfgeek

Properties of Custom Paint

We wanted to capture a solid notion of the required and desirable properties of a Custom Paint API, so we can agree on goals before descending into API or implementation details.

So here’s our list :) Anything we should change, remove, or add?

Required Properties of Custom Paint

Custom Paint code happens explicitly after layout

Properties of Custom Layout

Similar to Custom Paint, we wanted to capture some of the properties of a Custom Layout API to agree on goals before heading into implementation details.

Note: "Custom Layout" is used here for both Line & Box Layout.

Anything we should change, remove, or add?

	<!doctype html>
	<html lang="en">
	<head>

	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">


	<title>CSS Script API Level 1</title>

	typedef (HTMLImageElement or
	HTMLVideoElement or
	HTMLCanvasElement) CanvasImageSource;

	interface CanvasRenderingContext2D {

	// back-reference to the canvas
	readonly attribute HTMLCanvasElement canvas;

	void drawFocusIfNeeded(Element element);

	// Main thread.

	window.compositorWorklet.import('parallax.js').then(function() {
	// Library ready to use.

	// This creates an instance of the CompositorAnimator class inside
	// the worklet that we can communicate to.
	const animator = new CompositorAnimator('parallax', {rate: 0.5});

	// Can postMessage directly to that instance.

	window.addEventListener("keydown", (evt) => {
	let prop = '--nav-';
	switch (evt.key) {
	case "ArrowDown":
	prop += 'down';
	break;
	case "ArrowUp":
	prop += 'up';
	break;
	case "ArrowLeft":


	BlockFlowLayout::layout(Box* box)
	{
	// START TOP GENERATOR MACRO
	switch (m_state) {
	case 0:
	goto a;
	case 1:
	goto b;
	}

	registerLayout('my-grid-layout', class {
	static inputProperties = [/* etc */];

	constructor() {
	this.grid = []; // Place items on a cached grid so don't have to recompute each layout call.
	}

	addRemoveChildren(addRemoveList) {
	// Rebuild grid now, only occurs when child list changes.
	for (let i = 0; i < addRemoveList.length; i++) {

	registerAnimator('parallax', class {
	animate(inputs, outputs) {
	// read scroller vertical scroll offset.
	const scrollTop = inputs.scroller.scrollTop;

	// update parallax transform
	let t = outputs.parallax.styleMap.get('transform').m42;
	t = -0.2 * scrollTop;
	outputs.parallax.styleMap.set('transform', new CSSTransformValue(... t));
	}

	registerAnimator('parallax', class {
	static inputs = {
	'scroller': ScrollSource;
	};

	static outputs = {
	'parallax': Style(['transform']) // This is bad.
	}

	animate(inputs, outputs) {

Ian Kilpatrick bfgeek

Properties of Custom Paint

Required Properties of Custom Paint

Custom Paint code happens explicitly after layout

Properties of Custom Layout

Required Properties of Custom Layout