diff --git a/css/css-fonts/variations/font-slant-2c.html b/css/css-fonts/variations/font-slant-2c.html
new file mode 100644
index 00000000000000..5436fc1b671df4
--- /dev/null
+++ b/css/css-fonts/variations/font-slant-2c.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS test: mapping of font-style:oblique to opentype 'slnt' axis</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts/#valdef-font-style-oblique-angle"/>
+<link rel="match" href="font-slant-2-ref.html"/>
+<style>
+@font-face {
+  font-family: test;
+  font-style: normal;
+  src: url(resources/Inter.var.subset.ttf);
+}
+.test {
+  font-synthesis: none;
+  font: 32px/1.5 test;
+}
+</style>
+<body>
+<p>Test passes if none of the following lines are displayed with a slanted font.</p>
+<div class="test" style="font-style: oblique">slant</div>
+<div class="test" style="font-style: oblique 10deg">slant</div>
+<div class="test" style="font-style: oblique -10deg">slant</div>
+<div class="test" style="font-style: italic">slant</div>
diff --git a/css/css-fonts/variations/font-slant-3-ref.html b/css/css-fonts/variations/font-slant-3-ref.html
new file mode 100644
index 00000000000000..542479db51ca3f
--- /dev/null
+++ b/css/css-fonts/variations/font-slant-3-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS reference file: mapping of font-style:oblique to opentype 'slnt' axis</title>
+<style>
+@font-face {
+  font-family: test;
+  /* Version of Inter subset with OpenType tables stripped,
+     so the browser's synthetic styling should take effect. */
+  src: url(resources/Inter.no-var.subset.ttf);
+  font-style: normal;
+  font-weight: normal;
+  font-stretch: normal;
+}
+.test {
+  font: 32px/1.5 test;
+}
+</style>
+<body>
+<p>Test passes if the following lines are displayed with a variety of synthetic slants.</p>
+<div class="test" style="font-style: oblique 10deg">slant</div>
+<div class="test" style="font-style: oblique 20deg">slant</div>
+<div class="test" style="font-style: oblique -10deg">slant</div>
+<div class="test" style="font-style: oblique 14deg">slant</div>
diff --git a/css/css-fonts/variations/font-slant-3.html b/css/css-fonts/variations/font-slant-3.html
new file mode 100644
index 00000000000000..047409ec35a3bb
--- /dev/null
+++ b/css/css-fonts/variations/font-slant-3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS test: mapping of font-style:oblique to opentype 'slnt' axis</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-fonts/#valdef-font-style-oblique-angle"/>
+<link rel="match" href="font-slant-3-ref.html"/>
+<style>
+@font-face {
+  font-family: test;
+  /* The font resource includes a 'slnt' axis, but our font-style descriptor
+     should prevent it being used to render oblique/italic styles. */
+  src: url(resources/Inter.var.subset.ttf);
+  font-style: normal;
+  font-weight: normal;
+  font-stretch: normal;
+}
+.test {
+  font-synthesis: style;
+  font: 32px/1.5 test;
+}
+</style>
+<body>
+<p>Test passes if the following lines are displayed with a variety of synthetic slants.</p>
+<div class="test" style="font-style: oblique 10deg">slant</div>
+<div class="test" style="font-style: oblique 20deg">slant</div>
+<div class="test" style="font-style: oblique -10deg">slant</div>
+<div class="test" style="font-style: italic">slant</div>
diff --git a/css/css-fonts/variations/resources/Inter.no-var.subset.ttf b/css/css-fonts/variations/resources/Inter.no-var.subset.ttf
new file mode 100644
index 00000000000000..3f9669541a7123
Binary files /dev/null and b/css/css-fonts/variations/resources/Inter.no-var.subset.ttf differ
