Skip to content

Commit

Permalink
Handle CSSOM style mutation of font-palette
Browse files Browse the repository at this point in the history
https://bugs.webkit.org/show_bug.cgi?id=230673

Reviewed by Antti Koivisto.

It already works.

The tests are being upstreamed at web-platform-tests/wpt#30942.

* web-platform-tests/css/css-fonts/font-palette-add-2-expected.html: Added.
* web-platform-tests/css/css-fonts/font-palette-add-2.html: Added.
* web-platform-tests/css/css-fonts/font-palette-add-expected-mismatch.html: Added.
* web-platform-tests/css/css-fonts/font-palette-add.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify-2-expected.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify-2.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify-expected-mismatch.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove-2-expected.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove-2.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove-expected-mismatch.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove.html: Added.


Canonical link: https://commits.webkit.org/242092@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@283032 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
litherum committed Sep 24, 2021
1 parent ce1d7dd commit 7d05dfb
Show file tree
Hide file tree
Showing 13 changed files with 408 additions and 0 deletions.
24 changes: 24 additions & 0 deletions LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,27 @@
2021-09-24 Myles C. Maxfield <mmaxfield@apple.com>

Handle CSSOM style mutation of font-palette
https://bugs.webkit.org/show_bug.cgi?id=230673

Reviewed by Antti Koivisto.

It already works.

The tests are being upstreamed at https://github.com/web-platform-tests/wpt/pull/30942.

* web-platform-tests/css/css-fonts/font-palette-add-2-expected.html: Added.
* web-platform-tests/css/css-fonts/font-palette-add-2.html: Added.
* web-platform-tests/css/css-fonts/font-palette-add-expected-mismatch.html: Added.
* web-platform-tests/css/css-fonts/font-palette-add.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify-2-expected.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify-2.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify-expected-mismatch.html: Added.
* web-platform-tests/css/css-fonts/font-palette-modify.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove-2-expected.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove-2.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove-expected-mismatch.html: Added.
* web-platform-tests/css/css-fonts/font-palette-remove.html: Added.

2021-09-24 Myles C. Maxfield <mmaxfield@apple.com>

Handle CSSOM style mutation of font-palette-values
Expand Down
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests that dynamically adding font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR'; font-palette: MyPalette;">A</div>
</body>
</html>
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Tests that dynamically adding font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<link rel="mismatch" href="font-palette-add-2-ref.html">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR';">A</div>
<script>
let count = 0;
function tick() {
if (count > 3) {
document.getElementById("target").style.setProperty("font-palette", "MyPalette");
document.documentElement.classList.remove("reftest-wait");
} else {
++count;
requestAnimationFrame(tick);
}
}
requestAnimationFrame(tick);
</script>
</body>
</html>
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests that dynamically adding font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR';">A</div>
</body>
</html>
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Tests that dynamically adding font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<link rel="mismatch" href="font-palette-add-notref.html">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR';">A</div>
<script>
let count = 0;
function tick() {
if (count > 3) {
document.getElementById("target").style.setProperty("font-palette", "MyPalette");
document.documentElement.classList.remove("reftest-wait");
} else {
++count;
requestAnimationFrame(tick);
}
}
requestAnimationFrame(tick);
</script>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests that dynamically modifying font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}

@font-palette-values MyPalette2 {
font-family: "Ahem-COLR";
base-palette: 0;
override-color: 1 #00FF00;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR'; font-palette: MyPalette2;">A</div>
</body>
</html>
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Tests that dynamically modifying font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<link rel="mismatch" href="font-palette-modify-2-ref.html">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}

@font-palette-values MyPalette2 {
font-family: "Ahem-COLR";
base-palette: 0;
override-color: 1 #00FF00;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR'; font-palette: MyPalette;">A</div>
<script>
let count = 0;
function tick() {
if (count > 3) {
document.getElementById("target").style.setProperty("font-palette", "MyPalette2");
document.documentElement.classList.remove("reftest-wait");
} else {
++count;
requestAnimationFrame(tick);
}
}
requestAnimationFrame(tick);
</script>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests that dynamically modifying font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}

@font-palette-values MyPalette2 {
font-family: "Ahem-COLR";
base-palette: 0;
override-color: 1 #00FF00;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR'; font-palette: MyPalette;">A</div>
</body>
</html>
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Tests that dynamically modifying font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<link rel="mismatch" href="font-palette-modify-notref.html">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}

@font-palette-values MyPalette2 {
font-family: "Ahem-COLR";
base-palette: 0;
override-color: 1 #00FF00;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR'; font-palette: MyPalette;">A</div>
<script>
let count = 0;
function tick() {
if (count > 3) {
document.getElementById("target").style.setProperty("font-palette", "MyPalette2");
document.documentElement.classList.remove("reftest-wait");
} else {
++count;
requestAnimationFrame(tick);
}
}
requestAnimationFrame(tick);
</script>
</body>
</html>
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests that dynamically removing font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR';">A</div>
</body>
</html>
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Tests that dynamically removing font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<link rel="mismatch" href="font-palette-remove-2-ref.html">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR'; font-palette: MyPalette;">A</div>
<script>
let count = 0;
function tick() {
if (count > 3) {
document.getElementById("target").style.removeProperty("font-palette");
document.documentElement.classList.remove("reftest-wait");
} else {
++count;
requestAnimationFrame(tick);
}
}
requestAnimationFrame(tick);
</script>
</body>
</html>
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests that dynamically removing font-palette causes the necessary rendering update</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
<style>
@font-face {
font-family: "Ahem-COLR";
src: url("resources/Ahem-COLOR-palettes.ttf") format("truetype");
}

@font-palette-values MyPalette {
font-family: "Ahem-COLR";
base-palette: 1;
}
</style>
</head>
<body>
<div id="target" style="font: 48px 'Ahem-COLR'; font-palette: MyPalette;">A</div>
</body>
</html>

0 comments on commit 7d05dfb

Please sign in to comment.