Implemented font-synthesis-small-caps functionality
Implement of CSS property font-synthesis-small-caps functionality, which
controls synthesized small-caps. Added tests for fonts which support and
do not support small-caps.
Bug: 509989
Change-Id: Ia996dfa2d54e021b5934e901301a5fa896be9c31
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3162064
Commit-Queue: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#922513}
diff --git a/css/css-fonts/font-synthesis-small-caps-first-letter-ref.html b/css/css-fonts/font-synthesis-small-caps-first-letter-ref.html
new file mode 100644
index 0000000..8f66b7b
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps-first-letter-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps apply to ::first-letter</title>
+<!--Lato-Medium does not have small caps in the font-->
+<style>
+ @font-face {
+ font-family: "Lato-Medium";
+ src: url(support/fonts/Lato-Medium.ttf);
+ }
+ .test {
+ font-family: "Lato-Medium";
+ font-size: 3em;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical and there is no red.</p>
+<section class="test">
+ <p>placeholder</p>
+ <p>placeholder</p>
+</section>
diff --git a/css/css-fonts/font-synthesis-small-caps-first-letter.html b/css/css-fonts/font-synthesis-small-caps-first-letter.html
new file mode 100644
index 0000000..9e31777
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps-first-letter.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps apply to ::first-letter</title>
+<link rel="match" href="font-synthesis-small-caps-first-letter-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-synthesis-small-caps">
+<meta name="assert" content="If ‘small-caps’ is not specified, user agents must not synthesize small caps faces">
+<!--Lato-Medium does not have small caps in the font-->
+<style>
+ @font-face {
+ font-family: "Lato-Medium";
+ src: url(support/fonts/Lato-Medium.ttf);
+ }
+ @supports not (font-synthesis-small-caps: none) {
+ .test {color: red;}
+ }
+ .test {
+ font-family: "Lato-Medium";
+ font-size: 3em;
+ }
+ p.nosynth::first-letter {
+ font-variant: small-caps;
+ font-synthesis-small-caps: none;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical and there is no red.</p>
+<section class="test">
+ <p>placeholder</p>
+ <p class="nosynth">placeholder</p>
+</section>
diff --git a/css/css-fonts/font-synthesis-small-caps-first-line-ref.html b/css/css-fonts/font-synthesis-small-caps-first-line-ref.html
new file mode 100644
index 0000000..121f941
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps-first-line-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps apply to ::first-line</title>
+<!--Lato-Medium does not have small caps in the font-->
+<style>
+ @font-face {
+ font-family: "Lato-Medium";
+ src: url(support/fonts/Lato-Medium.ttf);
+ }
+ .test {
+ font-family: "Lato-Medium";
+ font-size: 3em;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical (the first line is <em>not shown as small caps</em>), and there is no red.</p>
+<section class="test">
+ <p>Filler text<br>Filler text</p>
+</section>
diff --git a/css/css-fonts/font-synthesis-small-caps-first-line.html b/css/css-fonts/font-synthesis-small-caps-first-line.html
new file mode 100644
index 0000000..77d66e5
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps-first-line.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps apply to ::first-line</title>
+<link rel="match" href="font-synthesis-small-caps-first-line-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-synthesis-small-caps">
+<meta name="assert" content="If ‘small-caps’ is not specified, user agents must not synthesize small caps faces">
+<!--Lato-Medium does not have small caps in the font-->
+<style>
+ @font-face {
+ font-family: "Lato-Medium";
+ src: url(support/fonts/Lato-Medium.ttf);
+ }
+ @supports not (font-synthesis-small-caps: none) {
+ .test {color: red;}
+ }
+ .test {
+ font-family: "Lato-Medium";
+ font-size: 3em;
+ }
+ p.nosynth::first-line {
+ font-variant: small-caps;
+ font-synthesis-small-caps: none;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical (the first line is <em>not shown as small caps</em>), and there is no red.</p>
+<section class="test">
+ <p class="nosynth">Filler text<br>Filler text</p>
+</section>
diff --git a/css/css-fonts/font-synthesis-small-caps-not-applied-ref.html b/css/css-fonts/font-synthesis-small-caps-not-applied-ref.html
new file mode 100644
index 0000000..6edfea4
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps-not-applied-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps with font that supports small-caps</title>
+<!--Exo-DemiBold has small caps in the font-->
+<style>
+ @font-face {
+ font-family: "exo";
+ src: url(support/fonts/Exo-DemiBold.otf);
+ }
+ .test {
+ font-family: "exo";
+ font-size: 3em;
+ font-variant: small-caps;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical and there is no red.</p>
+<section class="test">
+ <p>Filler text</p>
+ <p>Filler text</p>
+</section>
diff --git a/css/css-fonts/font-synthesis-small-caps-not-applied.html b/css/css-fonts/font-synthesis-small-caps-not-applied.html
new file mode 100644
index 0000000..7e05b01
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps-not-applied.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps with font that supports small-caps</title>
+<link rel="match" href="font-synthesis-small-caps-not-applied-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-synthesis-small-caps">
+<meta name="assert" content="If font supports small-caps ‘font-synthesis-small-caps’ should not have any effect">
+<!--Exo-DemiBold has small caps in the font-->
+<style>
+ @font-face {
+ font-family: "exo";
+ src: url(support/fonts/Exo-DemiBold.otf);
+ }
+ @supports not (font-synthesis-small-caps: none) {
+ .test {color: red;}
+ }
+ .test {
+ font-family: "exo";
+ font-size: 3em;
+ font-variant: small-caps;
+ }
+ .nosynth {
+ font-synthesis-small-caps: none;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical and there is no red.</p>
+<section class="test">
+ <p>Filler text</p>
+ <p class="nosynth">Filler text</p>
+</section>
diff --git a/css/css-fonts/font-synthesis-small-caps-ref.html b/css/css-fonts/font-synthesis-small-caps-ref.html
new file mode 100644
index 0000000..6851d55
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps: none disables fake small-caps</title>
+<!--Lato-Medium does not have small caps in the font-->
+<style>
+ @font-face {
+ font-family: "lato";
+ src: url(support/fonts/Lato-Medium.ttf);
+ }
+ .test {
+ font-family: "lato";
+ font-size: 3em;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical (the second line is <em>not shown as small caps</em>), and there is no red.</p>
+<section class="test">
+ <p>Filler text</p>
+ <p>Filler text</p>
+</section>
diff --git a/css/css-fonts/font-synthesis-small-caps.html b/css/css-fonts/font-synthesis-small-caps.html
new file mode 100644
index 0000000..953ebf5
--- /dev/null
+++ b/css/css-fonts/font-synthesis-small-caps.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-small-caps: none disables fake small caps</title>
+<link rel="match" href="font-synthesis-small-caps-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-synthesis-small-caps">
+<meta name="assert" content=" If ‘small-caps’ is not specified, user agents must not synthesize small caps faces">
+<!--Lato-Medium does not have small caps in the font-->
+<style>
+ @font-face {
+ font-family: "lato";
+ src: url(support/fonts/Lato-Medium.ttf);
+ }
+ @supports not (font-synthesis-small-caps: none) {
+ .test {color: red;}
+ }
+ .test {
+ font-family: "lato";
+ font-size: 3em;
+ }
+ .nosynth {
+ font-variant: small-caps;
+ font-synthesis-small-caps: none;
+ }
+</style>
+
+<p>Test passes if the two lines below are identical (the second line is <em>not shown as small caps</em>), and there is no red.</p>
+<section class="test">
+ <p>Filler text</p>
+ <p class="nosynth">Filler text</p>
+</section>
diff --git a/css/css-pseudo/parsing/marker-supported-properties-in-animation.html b/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
index df0e9bc..349c56d 100644
--- a/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
+++ b/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
@@ -71,6 +71,24 @@
midPoint: "none",
},
{
+ property: "font-synthesis-small-caps",
+ from: "auto",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "font-synthesis-style",
+ from: "auto",
+ to: "none",
+ midPoint: "none",
+ },
+ {
+ property: "font-synthesis-weight",
+ from: "auto",
+ to: "none",
+ midPoint: "none",
+ },
+ {
property: "font-variant",
from: "unicase",
to: "small-caps",
diff --git a/css/css-pseudo/parsing/marker-supported-properties.html b/css/css-pseudo/parsing/marker-supported-properties.html
index 62a54a3..ab03b98 100644
--- a/css/css-pseudo/parsing/marker-supported-properties.html
+++ b/css/css-pseudo/parsing/marker-supported-properties.html
@@ -23,6 +23,9 @@
test_pseudo_computed_value("::marker", "font-stretch", "expanded", ["expanded", "125%"]);
test_pseudo_computed_value("::marker", "font-style", "italic");
test_pseudo_computed_value("::marker", "font-synthesis", "none");
+test_pseudo_computed_value("::marker", "font-synthesis-small-caps", "none");
+test_pseudo_computed_value("::marker", "font-synthesis-style", "none");
+test_pseudo_computed_value("::marker", "font-synthesis-weight", "none");
test_pseudo_computed_value("::marker", "font-variant", "small-caps");
test_pseudo_computed_value("::marker", "font-variant-caps", "small-caps");
test_pseudo_computed_value("::marker", "font-variant-east-asian", "full-width");
