Paper.js: Rgb color with percent parsed incorrectly

Created on 14 Nov 2019  路  1Comment  路  Source: paperjs/paper.js

Description/Steps to reproduce

Color incorrectly parses colors given with percentages. This manifest itself at least when SVGs with such colors are being parsed, but perhaps in other scenarios as well

Link to reproduction test-case

a JS minimal working example:

var paper = require('paper-jsdom');

red = new paper.Color('rgb(100%,0%,0%)')
console.log(red.toString())

which prints

{ red: 0.39216, green: 0, blue: 0 }

Expected result

{ red: 1, green: 0, blue: 0 }

Additional information

I suspect the problem is in the code that parses the colors, which seems to assume rgb always has values between 0 and 255, see here (although the hsl code seems to be able to work with % just fine. Indeed, rgb(255%,0%,0%) produces { red: 1, green: 0, blue: 0 }. Also, there's no test case for this syntax.

That this is a valid way of specifying color in SVGs can be seen in the docs, see the example in section 3.1 and the syntax in section 9. Additionally, I've encountered this on real-life SVG data.

It also seems to be a valid CSS color spec. Search for "RGB syntax variations" or Functional Notation.

MacOS 10.14.6, Node v12.11.1

PS: I'll work around this for now by pre-processing my files. Also, I am not a JS person and do not have the project set up; but if there's enough will and interaction, I might dedicate some time to setting up the project and to fixing this myself.

bug

Most helpful comment

@HonzaRepresent Thanks for a bug report!
I made a PR to fix this issue, sorry I didn't read the PS part at that time.
If you have any updates, please teach us.

>All comments

@HonzaRepresent Thanks for a bug report!
I made a PR to fix this issue, sorry I didn't read the PS part at that time.
If you have any updates, please teach us.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

JohnMcLear picture JohnMcLear  路  5Comments

sansumbrella picture sansumbrella  路  3Comments

techninja picture techninja  路  4Comments

hapticdata picture hapticdata  路  5Comments

arel picture arel  路  3Comments