Bug 1728733 [wpt PR 30258] - Implement font-synthesis-style functionality, a=testonly
authorMunira Tursunova <moonira@google.com>
Fri, 03 Sep 2021 04:09:54 +0000
changeset 590922 79cf3473b0af6e309ed4b8c85b950bb69e242248
parent 590921 0da252a25bcb6f551dc0f5623774000ef974d9b5
child 590923 f94ddb4c7a71fb0f16680e3929ab5e23f9996d5b
push id149145
push userwptsync@mozilla.com
push dateFri, 03 Sep 2021 13:30:39 +0000
treeherderautoland@2c8a50f5ba38 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1728733, 30258, 509989, 3128025, 917571
milestone93.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1728733 [wpt PR 30258] - Implement font-synthesis-style functionality, a=testonly Automatic update from web-platform-tests Implement font-synthesis-style functionality Implement of CSS property font-synthesis-style functionality, which controls synthesized oblique. Added tests for web and system fonts. Added helper methods that check if synthetic bold and italic are allowed. Bug: 509989 Change-Id: I2ebc55370626158230b7a8255aeb065a5fc2eea2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3128025 Reviewed-by: Dominik Röttsches <drott@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Dominik Röttsches <drott@chromium.org> Cr-Commit-Position: refs/heads/main@{#917571} -- wpt-commits: 617ff01ccd64a0ec94812bb2f8a2134e864cdf24 wpt-pr: 30258
testing/web-platform/tests/css/css-fonts/font-synthesis-style-binary-ref.html
testing/web-platform/tests/css/css-fonts/font-synthesis-style-binary.html
testing/web-platform/tests/css/css-fonts/font-synthesis-style-ref.html
testing/web-platform/tests/css/css-fonts/font-synthesis-style.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/font-synthesis-style-binary-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-style: none disables fake italic/oblique</title>
+<style>
+    @font-face {
+        font-family: "NotoSans subset";
+        src: url(data:application/font-woff2;charset=utf-8;base64,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);
+        font-style: normal;
+        font-weight: normal;
+    }
+    .test {
+        font-family: "NotoSans subset";
+        font-size: 3em;
+    }
+</style>
+
+<p>Test passes if the two lines below are identical (the second line is <em>not obliqued</em>), and there is no red.</p>
+<section class="test">
+    <p>Filler text</p>
+    <p class="nosynth">Filler text</p>
+</section>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/font-synthesis-style-binary.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-style: none disables fake italic/oblique</title>
+<link rel="match" href="font-synthesis-style-binary-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-synthesis-style">
+<meta name="assert" content=" If ‘style’ is not specified, user agents must not synthesize italic faces for base64 encoded fonts">
+<style>
+    @font-face {
+        font-family: "NotoSans subset";
+        src: url(data:application/font-woff2;charset=utf-8;base64,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);
+        font-style: normal;
+        font-weight: 400;
+    }
+    @supports not (font-synthesis-style: none) {
+        .test {color: red;}
+    }
+    .test {
+        font-family: "NotoSans subset";
+        font-size: 3em;
+    }
+    .nosynth {
+        font-style: italic;
+        font-synthesis-style: none;
+    }
+</style>
+
+<p>Test passes if the two lines below are identical (the second line is <em>not obliqued</em>), and there is no red.</p>
+<section class="test">
+    <p>Filler text</p>
+    <p class="nosynth">Filler text</p>
+</section>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/font-synthesis-style-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-style: none disables fake italic/oblique</title>
+<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 obliqued</em>), and there is no red.</p>
+<section class="test">
+    <p>Filler text</p>
+    <p class="nosynth">Filler text</p>
+</section>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/font-synthesis-style.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8"/>
+<title>CSS Test: font-synthesis-style: none disables fake italic/oblique</title>
+<link rel="match" href="font-synthesis-style-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-synthesis-style">
+<meta name="assert" content=" If ‘style’ is not specified, user agents must not synthesize italic faces">
+<style>
+    @font-face {
+        font-family: "lato";
+        src: url(support/fonts/Lato-Medium.ttf);
+    }
+    @supports not (font-synthesis-style: none) {
+        .test {color: red;}
+    }
+    .test {
+        font-family: "lato";
+        font-size: 3em;
+    }
+    .nosynth {
+        font-style: italic;
+        font-synthesis-style: none;
+    }
+</style>
+
+<p>Test passes if the two lines below are identical (the second line is <em>not obliqued</em>), and there is no red.</p>
+<section class="test">
+    <p>Filler text</p>
+    <p class="nosynth">Filler text</p>
+</section>