bfgeek/border-colors.js

## border-colors.js
registerPaint('border-colors', class {
  static get inputProperties() {
    return [
      '--border-top-width',
      '--border-right-width',
      '--border-bottom-width',
      '--border-left-width',
      '--border-top-color',
      '--border-right-color',
      '--border-bottom-color',
      '--border-left-color',
    ];
  }

  paint(ctx, size, styleMap) {
    const t = 0;
    const r = size.width;
    const b = size.height;
    const l = 0;

    const tw = styleMap.get('--border-top-width').value;
    const rw = styleMap.get('--border-right-width').value;
    const bw = styleMap.get('--border-bottom-width').value;
    const lw = styleMap.get('--border-left-width').value;

    const ti = tw;
    const ri = size.width - rw;
    const bi = size.height - bw;
    const li = lw;

    let tp, rp, bp, lp, colors;
    const updateProgression = function() {
      tp = tw / colors.length;
      rp = rw / colors.length;
      bp = bw / colors.length;
      lp = lw / colors.length;
    }

    console.log(styleMap.getAll('--border-top-color'));

    colors = styleMap.getAll('--border-top-color');
    updateProgression();
    for (let i = 0; i < colors.length; i++) {
      ctx.fillStyle = colors[i].cssText;
      this.fillQuad(ctx,
          li - lp * i, ti - tp * i,
          li - lp * (i+1), ti - tp * (i+1),
          ri + rp * (i+1), ti - tp * (i+1),
          ri + rp * i, ti - tp * i);
    }

    colors = styleMap.getAll('--border-right-color');
    updateProgression();
    for (let i = 0; i < colors.length; i++) {
      ctx.fillStyle = colors[i].cssText;
      this.fillQuad(ctx,
          ri + rp * i, ti - tp * i,
          ri + rp * (i+1), ti - tp * (i+1),
          ri + rp * (i+1), bi + bp * (i+1),
          ri + rp * i, bi + bp * i);
    }

    colors = styleMap.getAll('--border-bottom-color');
    updateProgression();
    for (let i = 0; i < colors.length; i++) {
      ctx.fillStyle = colors[i].cssText;
      this.fillQuad(ctx,
          ri + rp * i, bi + bp * i,
          ri + rp * (i+1), bi + bp * (i+1),
          li - lp * (i+1), bi + bp * (i+1),
          li - lp * i, bi + bp * i);
    }

    colors = styleMap.getAll('--border-left-color');
    updateProgression();
    for (let i = 0; i < colors.length; i++) {
      ctx.fillStyle = colors[i].cssText;
      this.fillQuad(ctx,
          li - lp * i, bi + bp * i,
          li - lp * (i+1), bi + bp * (i+1),
          li - lp * (i+1), ti - tp * (i+1),
          li - lp * i, ti - tp * i);
    }
  }

  fillQuad(ctx, x1, y1, x2, y2, x3, y3, x4, y4) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x3, y3);
    ctx.lineTo(x4, y4);
    ctx.lineTo(x1, y1);
    ctx.fill();
  }
});

## index.html
<!DOCTYPE html>
<style>
#example {
  max-width: 100px;

  --border-top-width: 10;
  --border-right-width: 20;
  --border-bottom-width: 30;
  --border-left-width: 40;

  --border-top-color: red aquamarine;
  --border-right-color: lightskyblue green lightskyblue green;
  --border-bottom-color: deepskyblue cyan lightgoldenrodyellow;
  --border-left-color: gold orange red pink;
}

.multi-border {
  border: solid 0;
  border-image: paint(border-colors);

  border-image-slice:
    var(--border-top-width)
    var(--border-right-width)
    var(--border-bottom-width)
    var(--border-left-width);

  border-width:
    calc(var(--border-top-width) * 1px)
    calc(var(--border-right-width) * 1px)
    calc(var(--border-bottom-width) * 1px)
    calc(var(--border-left-width) * 1px);
}
</style>
<div id=example class=multi-border>CSS Paint API is Awesome</div>
<script>
[
  '--border-top-color',
  '--border-right-color',
  '--border-bottom-color',
  '--border-left-color',
].map((name) => {
  CSS.registerProperty({
    name: name,
    syntax: '<color>+',
    inherits: false,
    initialValue: 'currentcolor',
  });
});

[
  '--border-top-width',
  '--border-right-width',
  '--border-bottom-width',
  '--border-left-width',
].map((name) => {
  CSS.registerProperty({
    name: name,
    syntax: '<number>',
    inherits: false,
    initialValue: '0',
  });
});

paintWorklet.import('border-colors.js');
</script>
	registerPaint('border-colors', class {
	static get inputProperties() {
	return [
	'--border-top-width',
	'--border-right-width',
	'--border-bottom-width',
	'--border-left-width',
	'--border-top-color',
	'--border-right-color',
	'--border-bottom-color',
	'--border-left-color',
	];
	}

	paint(ctx, size, styleMap) {
	const t = 0;
	const r = size.width;
	const b = size.height;
	const l = 0;

	const tw = styleMap.get('--border-top-width').value;
	const rw = styleMap.get('--border-right-width').value;
	const bw = styleMap.get('--border-bottom-width').value;
	const lw = styleMap.get('--border-left-width').value;

	const ti = tw;
	const ri = size.width - rw;
	const bi = size.height - bw;
	const li = lw;

	let tp, rp, bp, lp, colors;
	const updateProgression = function() {
	tp = tw / colors.length;
	rp = rw / colors.length;
	bp = bw / colors.length;
	lp = lw / colors.length;
	}

	console.log(styleMap.getAll('--border-top-color'));

	colors = styleMap.getAll('--border-top-color');
	updateProgression();
	for (let i = 0; i < colors.length; i++) {
	ctx.fillStyle = colors[i].cssText;
	this.fillQuad(ctx,
	li - lp * i, ti - tp * i,
	li - lp * (i+1), ti - tp * (i+1),
	ri + rp * (i+1), ti - tp * (i+1),
	ri + rp * i, ti - tp * i);
	}

	colors = styleMap.getAll('--border-right-color');
	updateProgression();
	for (let i = 0; i < colors.length; i++) {
	ctx.fillStyle = colors[i].cssText;
	this.fillQuad(ctx,
	ri + rp * i, ti - tp * i,
	ri + rp * (i+1), ti - tp * (i+1),
	ri + rp * (i+1), bi + bp * (i+1),
	ri + rp * i, bi + bp * i);
	}

	colors = styleMap.getAll('--border-bottom-color');
	updateProgression();
	for (let i = 0; i < colors.length; i++) {
	ctx.fillStyle = colors[i].cssText;
	this.fillQuad(ctx,
	ri + rp * i, bi + bp * i,
	ri + rp * (i+1), bi + bp * (i+1),
	li - lp * (i+1), bi + bp * (i+1),
	li - lp * i, bi + bp * i);
	}

	colors = styleMap.getAll('--border-left-color');
	updateProgression();
	for (let i = 0; i < colors.length; i++) {
	ctx.fillStyle = colors[i].cssText;
	this.fillQuad(ctx,
	li - lp * i, bi + bp * i,
	li - lp * (i+1), bi + bp * (i+1),
	li - lp * (i+1), ti - tp * (i+1),
	li - lp * i, ti - tp * i);
	}
	}

	fillQuad(ctx, x1, y1, x2, y2, x3, y3, x4, y4) {
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.lineTo(x3, y3);
	ctx.lineTo(x4, y4);
	ctx.lineTo(x1, y1);
	ctx.fill();
	}
	});
	<!DOCTYPE html>
	<style>
	#example {
	max-width: 100px;

	--border-top-width: 10;
	--border-right-width: 20;
	--border-bottom-width: 30;
	--border-left-width: 40;

	--border-top-color: red aquamarine;
	--border-right-color: lightskyblue green lightskyblue green;
	--border-bottom-color: deepskyblue cyan lightgoldenrodyellow;
	--border-left-color: gold orange red pink;
	}

	.multi-border {
	border: solid 0;
	border-image: paint(border-colors);

	border-image-slice:
	var(--border-top-width)
	var(--border-right-width)
	var(--border-bottom-width)
	var(--border-left-width);

	border-width:
	calc(var(--border-top-width) * 1px)
	calc(var(--border-right-width) * 1px)
	calc(var(--border-bottom-width) * 1px)
	calc(var(--border-left-width) * 1px);
	}
	</style>
	<div id=example class=multi-border>CSS Paint API is Awesome</div>
	<script>
	[
	'--border-top-color',
	'--border-right-color',
	'--border-bottom-color',
	'--border-left-color',
	].map((name) => {
	CSS.registerProperty({
	name: name,
	syntax: '<color>+',
	inherits: false,
	initialValue: 'currentcolor',
	});
	});

	[
	'--border-top-width',
	'--border-right-width',
	'--border-bottom-width',
	'--border-left-width',
	].map((name) => {
	CSS.registerProperty({
	name: name,
	syntax: '<number>',
	inherits: false,
	initialValue: '0',
	});
	});

	paintWorklet.import('border-colors.js');
	</script>