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

HTML: alpha and colorspace attribute #48630

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
+284 −0
Open

HTML: alpha and colorspace attribute #48630

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c13111d
HTML: alpha and colorspace attribute
annevk Oct 15, 2024
df7b99e
lint
annevk Oct 15, 2024
1c07a0a
separate some harder cases from the main framework
annevk Oct 16, 2024
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
29 changes: 29 additions & 0 deletions html/semantics/forms/the-input-element/color-attributes.window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
test(() => {
const input = document.createElement("input");
input.type = "color";
input.setAttribute("alpha", "blah");
assert_equals(input.getAttribute("alpha"), "blah");
assert_true(input.alpha);
input.alpha = false;
assert_false(input.hasAttribute("alpha"));
input.alpha = "blah";
assert_true(input.alpha);
assert_equals(input.getAttribute("alpha"), "");
}, "<input type=color>: alpha attribute");

test(() => {
const input = document.createElement("input");
input.type = "color";
input.setAttribute("colorspace", "blah");
assert_equals(input.getAttribute("colorspace"), "blah");
assert_equals(input.colorSpace, "limited-srgb");
input.colorSpace = null;
assert_equals(input.getAttribute("colorspace"), "null");
assert_equals(input.colorSpace, "limited-srgb");
input.colorSpace = "DISPLAY-P3";
assert_equals(input.getAttribute("colorspace"), "DISPLAY-P3");
assert_equals(input.colorSpace, "display-p3");
input.colorSpace = "DıSPLAY-P3";
assert_equals(input.getAttribute("colorspace"), "DıSPLAY-P3");
assert_equals(input.colorSpace, "limited-srgb");
}, "<input type=color>: colorspace attribute");
1 change: 1 addition & 0 deletions ...antics/forms/the-input-element/color.html → ...ms/the-input-element/color.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!DOCTYPE html>
<!-- This test can be removed once all browsers support the alpha and colorspace attributes. -->
<meta charset=utf-8>
<title>Form input type=color</title>
<link rel="author" title="Denis Ah-Kang" href="mailto:[email protected]">
Expand Down
254 changes: 254 additions & 0 deletions html/semantics/forms/the-input-element/color.window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
// META: script=/css/support/color-testcommon.js

// While assert_equals is fine for hex, it's not for hexalpha, p3, and p3alpha. We use the default
// epsilon of 0.0001.
const assert_colors = set_up_fuzzy_color_test();

[
{
value: "",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: "#ffffff",
hex: "#ffffff",
hexalpha: "color(srgb 1 1 1)",
p3: "color(display-p3 1 1 1)",
p3alpha: "color(display-p3 1 1 1)"
},
{
value: "#ffffff08",
hex: "#ffffff",
hexalpha: "color(srgb 1 1 1 / 0.031373)",
p3: "color(display-p3 1 1 1)",
p3alpha: "color(display-p3 1 1 1 / 0.031373)"
},
{
value: "#FFFFFF",
hex: "#ffffff",
hexalpha: "color(srgb 1 1 1)",
p3: "color(display-p3 1 1 1)",
p3alpha: "color(display-p3 1 1 1)"
},
{
value: "#0F0F0F",
hex: "#0f0f0f",
hexalpha: "color(srgb 0.058824 0.058824 0.058824)",
p3: "color(display-p3 0.058824 0.058824 0.058824)",
p3alpha: "color(display-p3 0.058824 0.058824 0.058824)"
},
{
value: "#fff",
hex: "#ffffff",
hexalpha: "color(srgb 1 1 1)",
p3: "color(display-p3 1 1 1)",
p3alpha: "color(display-p3 1 1 1)"
},
{
value: "fffffff",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: "#gggggg",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: "foobar",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: "#ffffff\u0000",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: "#ffffff;",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: " #ffffff",
hex: "#ffffff",
hexalpha: "color(srgb 1 1 1)",
p3: "color(display-p3 1 1 1)",
p3alpha: "color(display-p3 1 1 1)"
},
{
value: "#ffffff ",
hex: "#ffffff",
hexalpha: "color(srgb 1 1 1)",
p3: "color(display-p3 1 1 1)",
p3alpha: "color(display-p3 1 1 1)"
},
{
value: " #ffffff ",
hex: "#ffffff",
hexalpha: "color(srgb 1 1 1)",
p3: "color(display-p3 1 1 1)",
p3alpha: "color(display-p3 1 1 1)"
},
{
value: "crimson",
hex: "#dc143c",
hexalpha: "color(srgb 0.862745 0.078431 0.235294)",
p3: "color(display-p3 0.791711 0.191507 0.257367)",
p3alpha: "color(display-p3 0.791711 0.191507 0.257367)"
},
{
value: "bisque",
hex: "#ffe4c4",
hexalpha: "color(srgb 1 0.894118 0.768627)",
p3: "color(display-p3 0.982297 0.8979 0.783276)",
p3alpha: "color(display-p3 0.982297 0.8979 0.783276)"
},
{
value: "currentColor",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: "transparent",
hex: "#000000",
hexalpha: "color(srgb 0 0 0 / 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0 / 0)"
},
{
value: "inherit",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
},
{
value: "rgb(1,1,1)",
hex: "#010101",
hexalpha: "color(srgb 0.003922 0.003922 0.003922)",
p3: "color(display-p3 0.003922 0.003922 0.003922)",
p3alpha: "color(display-p3 0.003922 0.003922 0.003922)"
},
{
value: "rgb(1,1,1,1)",
hex: "#010101",
hexalpha: "color(srgb 0.003922 0.003922 0.003922)",
p3: "color(display-p3 0.003922 0.003922 0.003922)",
p3alpha: "color(display-p3 0.003922 0.003922 0.003922)"
},
{
value: "rgb(1,1,1,0.5)",
hex: "#010101",
hexalpha: "color(srgb 0.003922 0.003922 0.003922 / 0.501961)",
p3: "color(display-p3 0.003922 0.003922 0.003922)",
p3alpha: "color(display-p3 0.003922 0.003922 0.003922 / 0.501961)"
},
{
value: "#FFFFF\u1F4A9",
hex: "#000000",
hexalpha: "color(srgb 0 0 0)",
p3: "color(display-p3 0 0 0)",
p3alpha: "color(display-p3 0 0 0)"
}
].forEach(({ value, hex, hexalpha, p3, p3alpha }) => {
["limited-srgb", "display-p3"].forEach(colorSpace => {
[false, true].forEach(alpha => {
const nameValue = value === "" ? "the empty string" : value === undefined ? "no value" : "'" + value + "'";
test(() => {
const input = document.createElement("input");
input.type = "color";
if (value !== undefined) {
input.setAttribute("value", value);
}
assert_equals(input.value, hex, "value is hex");
input.colorSpace = colorSpace;
assert_equals(input.colorSpace, colorSpace, "color space");
if (colorSpace === "limited-srgb") {
assert_equals(input.value, hex, "value is hex");
} else {
assert_colors(input.value, p3);
}
input.alpha = alpha;
assert_equals(input.alpha, alpha, "alpha");
if (colorSpace === "limited-srgb" && !alpha) {
assert_equals(input.value, hex, "value is hex");
} else if (colorSpace === "limited-srgb" && alpha) {
assert_colors(input.value, hexalpha);
} else if (colorSpace === "display-p3" && !alpha) {
assert_colors(input.value, p3);
} else {
assert_colors(input.value, p3alpha);
}
}, `Testing ${nameValue} with color space '${colorSpace}' and ${alpha ? 'with' : ' without'} alpha (setAttribute("value"))`);

test(() => {
const input = document.createElement("input");
input.type = "color";
// In this test we set alpha before we set value to avoid the value sanitization algorithm
// taking away the alpha channel from the input.
input.alpha = true;
if (value !== undefined) {
input.value = value;
}
assert_colors(input.value, hexalpha);
input.colorSpace = colorSpace;
assert_equals(input.colorSpace, colorSpace, "color space");
if (colorSpace === "limited-srgb") {
assert_colors(input.value, hexalpha);
} else {
assert_colors(input.value, p3alpha);
}
input.alpha = alpha;
assert_equals(input.alpha, alpha, "alpha");
if (colorSpace === "limited-srgb" && !alpha) {
assert_equals(input.value, hex, "value is hex");
} else if (colorSpace === "limited-srgb" && alpha) {
assert_colors(input.value, hexalpha);
} else if (colorSpace === "display-p3" && !alpha) {
assert_colors(input.value, p3);
} else {
assert_colors(input.value, p3alpha);
}
}, `Testing ${nameValue} with color space '${colorSpace}' and ${alpha ? 'with' : ' without'} alpha (value)`);
});
});
});

test(() => {
const input = document.createElement("input");
input.type = "color";
assert_equals(input.value, "#000000");
input.value = "ActiveBorder";
assert_not_equals(input.value, "#000000");
}, "System colors are parsed");

test(() => {
const input = document.createElement("input");
input.type = "color";
input.alpha = true;
input.colorSpace = "display-p3";
input.value = "color(display-p3 3 none .2 / .6)";
assert_equals(input.value, "color(display-p3 3 0 0.2 / 0.6)");
}, "Display P3 colors can be out-of-bounds");