Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS4 toGamut fixes #352

Merged
merged 14 commits into from
Dec 17, 2023
Merged

CSS4 toGamut fixes #352

Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d6b5639
Use imported oklab space
jamesnw Nov 16, 2023
4bfa7ef
Remove portions of algorithm causing out of gamut colors
jamesnw Nov 16, 2023
b22d42b
Update conformance comment
jamesnw Nov 17, 2023
4bf4853
Return clipped value if it is within JND
jgerigmeyer Nov 17, 2023
eb453de
remove extra else
jgerigmeyer Nov 18, 2023
1375f3e
Use clipped version if not in gamut
jamesnw Nov 20, 2023
d409a62
Return clipped instead of current
jamesnw Nov 20, 2023
46b8262
Merge branch 'main' of github.com:LeaVerou/color.js into css4-gamut-f…
jamesnw Nov 22, 2023
688252b
Add clamp function
jamesnw Nov 22, 2023
ba09fe8
Merge branch 'main' of github.com:LeaVerou/color.js into css4-gamut-f…
jamesnw Nov 27, 2023
f9e2d78
Update gamut tests
jamesnw Nov 28, 2023
7f2409b
Confirm alph a is maintained in toGamut
jamesnw Nov 29, 2023
105f240
Merge branch 'main' of github.com:LeaVerou/color.js into css4-gamut-f…
jamesnw Dec 17, 2023
907c8f3
Use epsilon 0 for inGamut checks
jamesnw Dec 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 7 additions & 14 deletions src/toGamut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import deltaEOK from "./deltaE/deltaEOK.js";
import inGamut from "./inGamut.js";
import to from "./to.js";
import get from "./get.js";
import parse from "./parse.js";
import oklab from "./spaces/oklab.js";
import set from "./set.js";
import clone from "./clone.js";
import getColor from "./getColor.js";
Expand Down Expand Up @@ -118,8 +118,8 @@ toGamut.returns = "color";
// `Oklch` space. These are created in the `Oklab` space, as it is used by the
// DeltaEOK calculation, so it is guaranteed to be imported.
const COLORS = {
WHITE: { space: "oklab", coords: [1, 0, 0] },
BLACK: { space: "oklab", coords: [0, 0, 0] }
WHITE: { space: oklab, coords: [1, 0, 0] },
facelessuser marked this conversation as resolved.
Show resolved Hide resolved
BLACK: { space: oklab, coords: [0, 0, 0] }
};

/**
Expand Down Expand Up @@ -189,25 +189,18 @@ export function toGamutCSS (origin, { space = origin.space }) {
current.coords[1] = chroma;
if (min_inGamut && inGamut(current, space)) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One thing that I missed, this should really be using an epsilon of zero. The earlier shortcut out should be based on an epsilon of zero as well (line 160).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated this in 907c8f3

The Gamut tests are passing on this branch- are there additional cases I should add for checking what you were looking at in #378 ?

min = chroma;
continue;
}
else if (!inGamut(current, space)) {
jgerigmeyer marked this conversation as resolved.
Show resolved Hide resolved
const clipped = clip(current);
const E = deltaEOK(clipped, current);
// Note- this is missing several steps of the CSS Gamut Mapping
jgerigmeyer marked this conversation as resolved.
Show resolved Hide resolved
// Algorithm at this point.
if (E < JND) {
if ((JND - E < ε)) {
// match found
current = clipped;
break;
}
else {
min_inGamut = false;
svgeesus marked this conversation as resolved.
Show resolved Hide resolved
min = chroma;
}
current = clipped;
break;
}
else {
max = chroma;
continue;
}
}
}
Expand Down