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?
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?
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. |
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) { |