Skip to content

[css-paint-api] Allow paint function arguments, properties, or both? #100

@bfgeek

Description

@bfgeek

Example with just properties:

.foo {
  --bar: 5;
  background-image: paint(foo), paint(foo);
}

registerPaint(class {
  static inputProperties = ['--bar', 'color'];
  void paint(ctx, geom, styleMap) {
    // --bar & color both available here.
  }
});

Pros:

  • Can use color.

Cons:

  • Can't use same function to get different result (like linear-gradient).

Example with just input arguments

.foo {
  --bar: 5;
  background-image: paint(foo, var(--bar)), paint(foo, 10);
}

registerPaint(class {
  static inputArguments = ['<number>'];
  void paint(ctx, geom, styleMap) {
    // --bar & color both available here.
  }
});

Pros:

  • Can use same function with different arguments.

Cons:

  • Can't access native properties like color.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions