Bug 1591651 [wpt PR 19917] - [css-fonts] Add tests for standard font families, a=testonly
authorMyles C. Maxfield <litherum@icloud.com>
Tue, 26 Nov 2019 11:30:31 +0000
changeset 504663 f5df93c258a8ad3a29c0bb80364d2d9f65663399
parent 504662 c914cca3254a829b94156eeb17372188cf88a3ce
child 504664 bc499875c01424630cbcdbfbf710fbf4b19ef345
push id101897
push userwptsync@mozilla.com
push dateFri, 29 Nov 2019 11:10:32 +0000
treeherderautoland@47be1b3fdda6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1591651, 19917
milestone72.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 1591651 [wpt PR 19917] - [css-fonts] Add tests for standard font families, a=testonly Automatic update from web-platform-tests [css-fonts] Add tests for standard font families (#19917) https://github.com/w3c/csswg-drafts/commit/e083fe61cd912abc5c389ea7201b0ae1effe241a -- wpt-commits: 21f50fc43b7e291163ba513c59714ad385f7a2e1 wpt-pr: 19917
testing/web-platform/tests/css/css-fonts/standard-font-family-10-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-10.html
testing/web-platform/tests/css/css-fonts/standard-font-family-11-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-11.html
testing/web-platform/tests/css/css-fonts/standard-font-family-12-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-12.html
testing/web-platform/tests/css/css-fonts/standard-font-family-13-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-13.html
testing/web-platform/tests/css/css-fonts/standard-font-family-14-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-14.html
testing/web-platform/tests/css/css-fonts/standard-font-family-15-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-15.html
testing/web-platform/tests/css/css-fonts/standard-font-family-16-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-16.html
testing/web-platform/tests/css/css-fonts/standard-font-family-2-ref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-2.html
testing/web-platform/tests/css/css-fonts/standard-font-family-3-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-3.html
testing/web-platform/tests/css/css-fonts/standard-font-family-4-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-4.html
testing/web-platform/tests/css/css-fonts/standard-font-family-5-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-5.html
testing/web-platform/tests/css/css-fonts/standard-font-family-6-ref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-6.html
testing/web-platform/tests/css/css-fonts/standard-font-family-7-ref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-7.html
testing/web-platform/tests/css/css-fonts/standard-font-family-8-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-8.html
testing/web-platform/tests/css/css-fonts/standard-font-family-9-notref.html
testing/web-platform/tests/css/css-fonts/standard-font-family-9.html
testing/web-platform/tests/css/css-fonts/standard-font-family-ref.html
testing/web-platform/tests/css/css-fonts/standard-font-family.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-10-notref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUIRounded";
+    src: local("ui-rounded");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'AppleSystemUIRounded'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-10.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-10-notref.html"/>
+<meta name="assert" content="ui-rounded's bold in @font-face isn't synthetic"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUIRounded";
+    src: local("ui-rounded");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUIRounded'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-11-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-11.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-11-notref.html"/>
+<meta name="assert" content="ui-serif works"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'ui-serif';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-12-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-12.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-12-notref.html"/>
+<meta name="assert" content="ui-monospace works"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'ui-monospace';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-13-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-13.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-13-notref.html"/>
+<meta name="assert" content="ui-rounded works"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'ui-rounded';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-14-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-14.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-14-notref.html"/>
+<meta name="assert" content="ui-serif in @font-face works"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUISerif";
+    src: local("ui-serif");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'AppleSystemUISerif';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-15-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-15.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-15-notref.html"/>
+<meta name="assert" content="ui-monospace in @font-face works"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUIMonospace";
+    src: local("ui-monospace");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'AppleSystemUIMonospace';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-16-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-16.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-16-notref.html"/>
+<meta name="assert" content="ui-rounded in @font-face works"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUIRounded";
+    src: local("ui-rounded");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'AppleSystemUIRounded';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-2-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+This test makes sure that the bold versions of the design system UI fonts work. The test passes if all the text below is bold.
+<div>
+<div style="display: inline-block; font: bold 72px 'ui-serif';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'ui-monospaced';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'ui-rounded';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.AppleSystemUIFontSerif';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.SF NS Mono';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.SF UI Mono';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.AppleSystemUIFontRounded';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="match" href="standard-font-family-2-ref.html"/>
+<meta name="assert" content="Bold versions of standard fonts work"/>
+</head>
+<body>
+This test makes sure that the bold versions of the design system UI fonts work. The test passes if all the text below is bold.
+<div>
+<div style="display: inline-block; font: bold 72px 'ui-serif'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'ui-monospaced'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'ui-rounded'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.AppleSystemUIFontSerif'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.SF NS Mono'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.SF UI Mono'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px '.AppleSystemUIFontRounded'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-3-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'ui-serif'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-3.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-3-notref.html"/>
+<meta name="assert" content="ui-serif's bold isn't synthetic"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: bold 72px 'ui-serif'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-4-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'ui-monospaced'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-4.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-4-notref.html"/>
+<meta name="assert" content="ui-monospace's bold isn't synthetic"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: bold 72px 'ui-monospace'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-5-notref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'ui-rounded'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-5.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-5-notref.html"/>
+<meta name="assert" content="ui-rounded's bold isn't synthetic"/>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: bold 72px 'ui-rounded'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-6-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+This test makes sure that the design system UI fonts don't work unless they are accessed from their correct names. The test passes if all the text below is rendered in Times.
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-6.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="match" href="standard-font-family-6-ref.html"/>
+<meta name="assert" content="Standard fonts don't work in @font-face unless they are accessed from their correct names"/>
+<style>
+@font-face {
+    font-family: "DotAppleSystemUIFontSerif";
+    src: local(".AppleSystemUIFontSerif");
+}
+@font-face {
+    font-family: "DotSFNSMono";
+    src: local(".SF NS Mono");
+}
+@font-face {
+    font-family: "DotSFUIMono";
+    src: local(".SF UI Mono");
+}
+@font-face {
+    font-family: "DotAppleSystemUIFontRounded";
+    src: local(".AppleSystemUIFontRounded");
+}
+</style>
+</head>
+<body>
+This test makes sure that the design system UI fonts don't work unless they are accessed from their correct names. The test passes if all the text below is rendered in Times.
+<div>
+<div style="display: inline-block; font: 72px 'DotAppleSystemUIFontSerif';">HeJllo</div>
+<div style="display: inline-block; font: 72px 'DotSFNSMono';">HeJllo</div>
+<div style="display: inline-block; font: 72px 'DotSFUIMono';">HeJllo</div>
+<div style="display: inline-block; font: 72px 'DotAppleSystemUIFontRounded';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-7-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUISerif";
+    src: local("ui-serif");
+}
+@font-face {
+    font-family: "AppleSystemUIMonospaced";
+    src: local("ui-monospaced");
+}
+@font-face {
+    font-family: "AppleSystemUIRounded";
+    src: local("ui-rounded");
+}
+@font-face {
+    font-family: "DotAppleSystemUIFontSerif";
+    src: local(".AppleSystemUIFontSerif");
+}
+@font-face {
+    font-family: "DotSFNSMono";
+    src: local(".SF NS Mono");
+}
+@font-face {
+    font-family: "DotSFUIMono";
+    src: local(".SF UI Mono");
+}
+@font-face {
+    font-family: "DotAppleSystemUIFontRounded";
+    src: local(".AppleSystemUIFontRounded");
+}
+</style>
+</head>
+<body>
+This test makes sure that the bold versions of the design system UI fonts work in @font-face. The test passes if all the text below is bold.
+<div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUISerif';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUIMonospaced';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUIRounded';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotAppleSystemUIFontSerif';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotSFNSMono';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotSFUIMono';">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotAppleSystemUIFontRounded';">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-7.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="match" href="standard-font-family-7-ref.html"/>
+<meta name="assert" content="Bold versions of standard fonts work in @font-face"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUISerif";
+    src: local("ui-serif");
+}
+@font-face {
+    font-family: "AppleSystemUIMonospaced";
+    src: local("ui-monospaced");
+}
+@font-face {
+    font-family: "AppleSystemUIRounded";
+    src: local("ui-rounded");
+}
+@font-face {
+    font-family: "DotAppleSystemUIFontSerif";
+    src: local(".AppleSystemUIFontSerif");
+}
+@font-face {
+    font-family: "DotSFNSMono";
+    src: local(".SF NS Mono");
+}
+@font-face {
+    font-family: "DotSFUIMono";
+    src: local(".SF UI Mono");
+}
+@font-face {
+    font-family: "DotAppleSystemUIFontRounded";
+    src: local(".AppleSystemUIFontRounded");
+}
+</style>
+</head>
+<body>
+This test makes sure that the bold versions of the design system UI fonts work in @font-face. The test passes if all the text below is bold.
+<div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUISerif'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUIMonospaced'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUIRounded'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotAppleSystemUIFontSerif'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotSFNSMono'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotSFUIMono'; font-synthesis: none;">HeJllo</div>
+<div style="display: inline-block; font: bold 72px 'DotAppleSystemUIFontRounded'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-8-notref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUISerif";
+    src: local("ui-serif");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'AppleSystemUISerif'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-8.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-8-notref.html"/>
+<meta name="assert" content="ui-serif's bold in @font-face isn't synthetic"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUISerif";
+    src: local("ui-serif");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUISerif'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-9-notref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUIMonospaced";
+    src: local("ui-monospaced");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: 72px 'AppleSystemUIMonospaced'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-9.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="mismatch" href="standard-font-family-9-notref.html"/>
+<meta name="assert" content="ui-monospace's bold in @font-face isn't synthetic"/>
+<style>
+@font-face {
+    font-family: "AppleSystemUIMonospace";
+    src: local("ui-monospace");
+}
+</style>
+</head>
+<body>
+<div>
+<div style="display: inline-block; font: bold 72px 'AppleSystemUIMonospace'; font-synthesis: none;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+</head>
+<body>
+This test makes sure that the design system UI fonts don't work unless they are accessed from their correct names. The test passes if all the text below is rendered in Times.
+<div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+<div style="display: inline-block; font-size: 72px;">HeJllo</div>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-fonts/standard-font-family.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#standard-font-families"/>
+<link rel="match" href="standard-font-family-ref.html"/>
+<meta name="assert" content="Standard fonts don't work unless they are accessed from their correct names"/>
+</head>
+<body>
+This test makes sure that the design system UI fonts don't work unless they are accessed from their correct names. The test passes if all the text below is rendered in Times.
+<div>
+<div style="display: inline-block; font: 72px '.AppleSystemUIFontSerif';">HeJllo</div>
+<div style="display: inline-block; font: 72px '.SF NS Mono';">HeJllo</div>
+<div style="display: inline-block; font: 72px '.SF UI Mono';">HeJllo</div>
+<div style="display: inline-block; font: 72px '.AppleSystemUIFontRounded';">HeJllo</div>
+</div>
+</body>
+</html>