Bug 1157064 - reftests for font-display. r=m_kato
authorJohn Daggett <jdaggett@mozilla.com>
Thu, 07 Jan 2016 14:03:12 +0900
changeset 278924 eb7f975d67af9ebee74c9ba796098000ae238db6
parent 278923 6d9b17e5e7b55c4a9be4b6739d46a11106eab1f3
child 278925 e597b8795fbe813924a72177f61dcaa22e8a789a
push id29860
push usercbook@mozilla.com
push dateThu, 07 Jan 2016 10:51:20 +0000
treeherdermozilla-central@e0bcd16e1d4b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersm_kato
bugs1157064
milestone46.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 1157064 - reftests for font-display. r=m_kato
layout/reftests/font-face/font-display-1-ref.html
layout/reftests/font-face/font-display-1.html
layout/reftests/font-face/font-display-2-ref.html
layout/reftests/font-face/font-display-2.html
layout/reftests/font-face/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/font-face/font-display-1-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>font-display test</title>
+<meta charset="utf-8">
+<style>
+body { margin: 20px }
+
+@font-face {
+  font-family: test1-ref;
+  src: url(../fonts/markA.woff);
+}
+
+div.test {
+  font-size: 600%;
+  line-height: 1.3em;
+  width: 500px;
+}
+
+div.test p {
+  display: inline-block;
+  width: 150px;
+  margin: 0;
+}
+
+.auto { font-family: test1-ref; }
+.block { font-family: test1-ref; }
+.swap { font-family: test1-ref; }
+.fallback { font-family: test1-ref; }
+.optional { font-family: font-that-does-not-exist; }
+
+</style>
+</head>
+
+<body>
+<div class="test">
+<p class="auto">A</p>
+<p class="block">A</p>
+</div>
+<div class="test">
+<p class="swap">A</p>
+<p class="fallback">A</p>
+<p class="optional">A</p>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/font-face/font-display-1.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>font-display test</title>
+<meta charset="utf-8">
+<style>
+body { margin: 20px }
+
+@font-face {
+  font-family: test1-auto;
+  src: url(../fonts/markA.woff);
+  font-display: auto;
+}
+
+@font-face {
+  font-family: test1-block;
+  src: url(../fonts/markA.woff);
+  font-display: block;
+}
+
+@font-face {
+  font-family: test1-swap;
+  src: url(../fonts/markA.woff);
+  font-display: swap;
+}
+
+@font-face {
+  font-family: test1-fallback;
+  src: url(../fonts/markA.woff);
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: test1-optional;
+  src: url(../fonts/markfonts-delay.sjs?font=markA&delay=200&test=font-display-1-optional);
+  font-display: optional;
+}
+
+div.test {
+  font-size: 600%;
+  line-height: 1.3em;
+  width: 500px;
+}
+
+div.test p {
+  display: inline-block;
+  width: 150px;
+  margin: 0;
+}
+
+.auto { font-family: test1-auto; }
+.block { font-family: test1-block; }
+.swap { font-family: test1-swap; }
+.fallback { font-family: test1-fallback; }
+.optional { font-family: test1-optional; }
+
+</style>
+</head>
+
+<body>
+<div class="test">
+<p class="auto">A</p>
+<p class="block">A</p>
+</div>
+<div class="test">
+<p class="swap">A</p>
+<p class="fallback">A</p>
+<p class="optional">A</p>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/font-face/font-display-2-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>font-display test</title>
+<meta charset="utf-8">
+<style>
+body { margin: 20px }
+
+@font-face {
+  font-family: test2-ref;
+  src: url(../fonts/markA.woff);
+}
+
+div.test {
+  font-size: 600%;
+  line-height: 1.3em;
+  width: 500px;
+}
+
+div.test p {
+  display: inline-block;
+  width: 150px;
+  margin: 0;
+}
+
+.auto { font-family: test2-ref; }
+.block { font-family: test2-ref; }
+.swap { font-family: test2-ref; }
+.fallback { font-family: font-that-does-not-exist; }
+.optional { font-family: font-that-does-not-exist; }
+
+</style>
+</head>
+
+<body>
+<div class="test">
+<p class="auto">A</p>
+<p class="block">A</p>
+</div>
+<div class="test">
+<p class="swap">A</p>
+<p class="fallback">A</p>
+<p class="optional">A</p>
+</div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/font-face/font-display-2.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>font-display test</title>
+<meta charset="utf-8">
+<style>
+body { margin: 20px }
+
+@font-face {
+  font-family: test2-auto;
+  src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-auto);
+  font-display: auto;
+}
+
+@font-face {
+  font-family: test2-block;
+  src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-block);
+  font-display: block;
+}
+
+@font-face {
+  font-family: test2-swap;
+  src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-swap);
+  font-display: swap;
+}
+
+@font-face {
+  font-family: test2-fallback;
+  src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-fallback);
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: test2-optional;
+  src: url(../fonts/markfonts-delay.sjs?font=markA&delay=4500&test=font-display-2-optional);
+  font-display: optional;
+}
+
+div.test {
+  font-size: 600%;
+  line-height: 1.3em;
+  width: 500px;
+}
+
+div.test p {
+  display: inline-block;
+  width: 150px;
+  margin: 0;
+}
+
+.auto { font-family: test2-auto; }
+.block { font-family: test2-block; }
+.swap { font-family: test2-swap; }
+.fallback { font-family: test2-fallback; }
+.optional { font-family: test2-optional; }
+
+</style>
+</head>
+
+<body>
+<div class="test">
+<p class="auto">A</p>
+<p class="block">A</p>
+</div>
+<div class="test">
+<p class="swap">A</p>
+<p class="fallback">A</p>
+<p class="optional">A</p>
+</div>
+</body>
+</html>
--- a/layout/reftests/font-face/reftest.list
+++ b/layout/reftests/font-face/reftest.list
@@ -174,8 +174,13 @@ pref(gfx.downloadable_fonts.woff2.enable
 # sanity tests for reflow behavior with downloadable fonts
 HTTP(..) == reflow-sanity-1.html reflow-sanity-1-ref.html
 HTTP(..) == reflow-sanity-1-data.html reflow-sanity-1-ref.html
 HTTP(..) == reflow-sanity-1.html reflow-sanity-1-data.html
 HTTP(..) == reflow-sanity-delay-1a.html reflow-sanity-1-ref.html
 HTTP(..) == reflow-sanity-delay-1b.html reflow-sanity-1-ref.html
 HTTP(..) == reflow-sanity-delay-1c.html reflow-sanity-1-ref.html
 HTTP(..) == reflow-sanity-delay-1-metrics.html reflow-sanity-1-ref.html
+
+# font-display
+pref(layout.css.font-display.enabled,true) HTTP(..) == font-display-1.html font-display-1-ref.html # normal font load (~500ms)
+pref(layout.css.font-display.enabled,true) HTTP(..) == font-display-2.html font-display-2-ref.html # font load takes 4500ms
+