Migrate font variations tests to using David Jonathan Ross's Boxis font
authormmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 23 Jan 2017 21:41:23 +0000 (21:41 +0000)
committermmaxfield@apple.com <mmaxfield@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 23 Jan 2017 21:41:23 +0000 (21:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=167222

Reviewed by Dean Jackson.

He extremely generously made this font for doing testing of variation fonts,
and worked with us to licence it appropriately so it can be used in WebKit
directly.

Thanks so much to DJR!!!!

I also took this opportunity to make the tests in animations/font-variations
more robust.

* animations/font-variations/font-variation-settings-expected.html: Removed.
* animations/font-variations/font-variation-settings-expected.txt: Added.
* animations/font-variations/font-variation-settings-order-expected.html: Removed.
* animations/font-variations/font-variation-settings-order-expected.txt: Added.
* animations/font-variations/font-variation-settings-order.html:
* animations/font-variations/font-variation-settings-unlike-expected.html: Removed.
* animations/font-variations/font-variation-settings-unlike-expected.txt: Added.
* animations/font-variations/font-variation-settings-unlike.html:
* animations/font-variations/font-variation-settings.html:
* animations/font-variations/resources/Boxis-VF.ttf: Added.
* fast/backgrounds/background-repeat-x-y.html: Removed.
* fast/text/variations/advances.html:
* fast/text/variations/case-axis-names-expected.html:
* fast/text/variations/case-axis-names.html:
* fast/text/variations/default-value-expected.html:
* fast/text/variations/default-value.html:
* fast/text/variations/duplicate-axis-expected.html: Removed.
* fast/text/variations/duplicate-axis.html: Removed.
* fast/text/variations/duplicate-expected.html:
* fast/text/variations/duplicate.html:
* fast/text/variations/exist-expected-mismatch.html:
* fast/text/variations/exist.html:
* fast/text/variations/getComputedStyle-expected.txt:
* fast/text/variations/getComputedStyle.html:
* fast/text/variations/inheritance-expected.html:
* fast/text/variations/inheritance.html:
* fast/text/variations/order-expected.html:
* fast/text/variations/order.html:
* fast/text/variations/outofbounds-expected-mismatch.html:
* fast/text/variations/outofbounds.html:
* fast/text/variations/resources/Boxis-VF.ttf: Added.
* platform/mac/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@211060 268f45cc-cd09-0410-ab3c-d52691b4dbfc

33 files changed:
LayoutTests/ChangeLog
LayoutTests/animations/font-variations/font-variation-settings-expected.html [deleted file]
LayoutTests/animations/font-variations/font-variation-settings-expected.txt [new file with mode: 0644]
LayoutTests/animations/font-variations/font-variation-settings-order-expected.html [deleted file]
LayoutTests/animations/font-variations/font-variation-settings-order-expected.txt [new file with mode: 0644]
LayoutTests/animations/font-variations/font-variation-settings-order.html
LayoutTests/animations/font-variations/font-variation-settings-unlike-expected.html [deleted file]
LayoutTests/animations/font-variations/font-variation-settings-unlike-expected.txt [new file with mode: 0644]
LayoutTests/animations/font-variations/font-variation-settings-unlike.html
LayoutTests/animations/font-variations/font-variation-settings.html
LayoutTests/animations/font-variations/resources/Boxis-VF.ttf [new file with mode: 0644]
LayoutTests/fast/backgrounds/background-repeat-x-y.html [deleted file]
LayoutTests/fast/text/variations/advances.html
LayoutTests/fast/text/variations/case-axis-names-expected.html
LayoutTests/fast/text/variations/case-axis-names.html
LayoutTests/fast/text/variations/default-value-expected.html
LayoutTests/fast/text/variations/default-value.html
LayoutTests/fast/text/variations/duplicate-axis-expected.html [deleted file]
LayoutTests/fast/text/variations/duplicate-axis.html [deleted file]
LayoutTests/fast/text/variations/duplicate-expected.html
LayoutTests/fast/text/variations/duplicate.html
LayoutTests/fast/text/variations/exist-expected-mismatch.html
LayoutTests/fast/text/variations/exist.html
LayoutTests/fast/text/variations/getComputedStyle-expected.txt
LayoutTests/fast/text/variations/getComputedStyle.html
LayoutTests/fast/text/variations/inheritance-expected.html
LayoutTests/fast/text/variations/inheritance.html
LayoutTests/fast/text/variations/order-expected.html
LayoutTests/fast/text/variations/order.html
LayoutTests/fast/text/variations/outofbounds-expected-mismatch.html
LayoutTests/fast/text/variations/outofbounds.html
LayoutTests/fast/text/variations/resources/Boxis-VF.ttf [new file with mode: 0644]
LayoutTests/platform/mac/TestExpectations

index 82ae308..3b5baa7 100644 (file)
@@ -1,3 +1,52 @@
+2017-01-23  Myles C. Maxfield  <mmaxfield@apple.com>
+
+        Migrate font variations tests to using David Jonathan Ross's Boxis font
+        https://bugs.webkit.org/show_bug.cgi?id=167222
+
+        Reviewed by Dean Jackson.
+
+        He extremely generously made this font for doing testing of variation fonts,
+        and worked with us to licence it appropriately so it can be used in WebKit
+        directly.
+
+        Thanks so much to DJR!!!!
+
+        I also took this opportunity to make the tests in animations/font-variations
+        more robust.
+
+        * animations/font-variations/font-variation-settings-expected.html: Removed.
+        * animations/font-variations/font-variation-settings-expected.txt: Added.
+        * animations/font-variations/font-variation-settings-order-expected.html: Removed.
+        * animations/font-variations/font-variation-settings-order-expected.txt: Added.
+        * animations/font-variations/font-variation-settings-order.html:
+        * animations/font-variations/font-variation-settings-unlike-expected.html: Removed.
+        * animations/font-variations/font-variation-settings-unlike-expected.txt: Added.
+        * animations/font-variations/font-variation-settings-unlike.html:
+        * animations/font-variations/font-variation-settings.html:
+        * animations/font-variations/resources/Boxis-VF.ttf: Added.
+        * fast/backgrounds/background-repeat-x-y.html: Removed.
+        * fast/text/variations/advances.html:
+        * fast/text/variations/case-axis-names-expected.html:
+        * fast/text/variations/case-axis-names.html:
+        * fast/text/variations/default-value-expected.html:
+        * fast/text/variations/default-value.html:
+        * fast/text/variations/duplicate-axis-expected.html: Removed.
+        * fast/text/variations/duplicate-axis.html: Removed.
+        * fast/text/variations/duplicate-expected.html:
+        * fast/text/variations/duplicate.html:
+        * fast/text/variations/exist-expected-mismatch.html:
+        * fast/text/variations/exist.html:
+        * fast/text/variations/getComputedStyle-expected.txt:
+        * fast/text/variations/getComputedStyle.html:
+        * fast/text/variations/inheritance-expected.html:
+        * fast/text/variations/inheritance.html:
+        * fast/text/variations/order-expected.html:
+        * fast/text/variations/order.html:
+        * fast/text/variations/outofbounds-expected-mismatch.html:
+        * fast/text/variations/outofbounds.html:
+        * fast/text/variations/resources/Boxis-VF.ttf: Added.
+        * platform/mac/TestExpectations:
+
 2017-01-23  Ryan Haddad  <ryanhaddad@apple.com>
 
         Marking media/modern-media-controls/tracks-panel/tracks-panel-hide.html as flaky on macOS debug.
diff --git a/LayoutTests/animations/font-variations/font-variation-settings-expected.html b/LayoutTests/animations/font-variations/font-variation-settings-expected.html
deleted file mode 100644 (file)
index 4719fb8..0000000
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-</head>
-<body>
-<div style="font: 100px '-apple-system'; font-variation-settings: 'wght' 1.3">Hello</div>
-<div>PASS - "font-variation-settings" property for "box" element at 0.5s saw something close to: 'wght' 0.4<br>
-PASS - "font-variation-settings" property for "box" element at 1s saw something close to: 'wght' 0.7<br>
-PASS - "font-variation-settings" property for "box" element at 2s saw something close to: 'wght' 1.3</div>
-</body>
-</html>
diff --git a/LayoutTests/animations/font-variations/font-variation-settings-expected.txt b/LayoutTests/animations/font-variations/font-variation-settings-expected.txt
new file mode 100644 (file)
index 0000000..415b222
--- /dev/null
@@ -0,0 +1,5 @@
+Hello
+PASS - "font-variation-settings" property for "box" element at 0.5s saw something close to: 'wdth' 483.3333
+PASS - "font-variation-settings" property for "box" element at 1s saw something close to: 'wdth' 566.6666
+PASS - "font-variation-settings" property for "box" element at 2s saw something close to: 'wdth' 733.3333
+
diff --git a/LayoutTests/animations/font-variations/font-variation-settings-order-expected.html b/LayoutTests/animations/font-variations/font-variation-settings-order-expected.html
deleted file mode 100644 (file)
index cf03560..0000000
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-</head>
-<body>
-<div style="font: 100px 'Skia'; font-variation-settings: 'wght' 2.3, 'wdth' 1.1">Hello</div>
-<div>PASS - "font-variation-settings" property for "box" element at 0.5s saw something close to: 'wght' 0.95, 'wdth' 0.95<br>
-PASS - "font-variation-settings" property for "box" element at 1s saw something close to: 'wght' 1.4, 'wdth' 1<br>
-PASS - "font-variation-settings" property for "box" element at 2s saw something close to: 'wght' 2.3, 'wdth' 1.1</div>
-</body>
-</html>
diff --git a/LayoutTests/animations/font-variations/font-variation-settings-order-expected.txt b/LayoutTests/animations/font-variations/font-variation-settings-order-expected.txt
new file mode 100644 (file)
index 0000000..178bd06
--- /dev/null
@@ -0,0 +1,5 @@
+Hello
+PASS - "font-variation-settings" property for "box" element at 0.5s saw something close to: 'wdth' 566.6666, 'hght' 466.6666
+PASS - "font-variation-settings" property for "box" element at 1s saw something close to: 'wdth' 633.3333, 'hght' 533.3333
+PASS - "font-variation-settings" property for "box" element at 2s saw something close to: 'wdth' 766.6666, 'hght' 666.6666
+
index f01d308..2a2b9c9 100644 (file)
@@ -3,18 +3,22 @@
 <head>
 <script src="../resources/animation-test-helpers.js"></script>
 <style>
-@keyframes weightAnimation {
+@font-face {
+    font-family: "Boxis";
+    src: url("resources/Boxis-VF.ttf");
+}
+
+@keyframes TheAnimation {
     from {
-        font-variation-settings: "wght" 0.5, "wdth" 0.9;
+        font-variation-settings: "hght" 400, "wdth" 500;
     }
     to {
-        font-variation-settings: "wdth" 1.2, "wght" 3.2;
+        font-variation-settings: "wdth" 900, "hght" 800;
     }
 }
 
 #box {
-    font: 100px "Skia";
-    animation-name: "weightAnimation";
+    font: 100px "Boxis";
     animation-duration: 3s;
     animation-timing-function: linear;
 }
 <script>
 var expectedValues = [
     // [animation-name, time, element-id, property, expected-value, tolerance]
-    ["weightAnimation", 0.5, "box", "font-variation-settings", "'wght' 0.95, 'wdth' 0.95", 0.05],
-    ["weightAnimation", 1.0, "box", "font-variation-settings", "'wght' 1.4, 'wdth' 1", 0.05],
-    ["weightAnimation", 2.0, "box", "font-variation-settings", "'wght' 2.3, 'wdth' 1.1", 0.05],
+    ["TheAnimation", 0.5, "box", "font-variation-settings", "'wdth' 566.6666, 'hght' 466.6666", 5],
+    ["TheAnimation", 1.0, "box", "font-variation-settings", "'wdth' 633.3333, 'hght' 533.3333", 5],
+    ["TheAnimation", 2.0, "box", "font-variation-settings", "'wdth' 766.6666, 'hght' 666.6666", 5],
 ];
-runAnimationTest(expectedValues, undefined, undefined, undefined, true, undefined);
+
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+}
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+    promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+    document.getElementById("box").style.animationName = "TheAnimation";
+    runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+});
 </script>
 </body>
 </html>
diff --git a/LayoutTests/animations/font-variations/font-variation-settings-unlike-expected.html b/LayoutTests/animations/font-variations/font-variation-settings-unlike-expected.html
deleted file mode 100644 (file)
index 7e72661..0000000
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-</head>
-<body>
-<div style="font: 100px 'Skia';">Hello</div>
-<div>PASS - "font-variation-settings" property for "box" element at 0.5s saw something close to: normal<br>
-PASS - "font-variation-settings" property for "box" element at 1s saw something close to: normal<br>
-PASS - "font-variation-settings" property for "box" element at 2s saw something close to: normal</div>
-</body>
-</html>
diff --git a/LayoutTests/animations/font-variations/font-variation-settings-unlike-expected.txt b/LayoutTests/animations/font-variations/font-variation-settings-unlike-expected.txt
new file mode 100644 (file)
index 0000000..f93856a
--- /dev/null
@@ -0,0 +1,5 @@
+Hello
+PASS - "font-variation-settings" property for "box" element at 0.5s saw something close to: normal
+PASS - "font-variation-settings" property for "box" element at 1s saw something close to: normal
+PASS - "font-variation-settings" property for "box" element at 2s saw something close to: normal
+
index 4658f5a..db41dea 100644 (file)
@@ -3,18 +3,22 @@
 <head>
 <script src="../resources/animation-test-helpers.js"></script>
 <style>
-@keyframes weightAnimation {
+@font-face {
+    font-family: "Boxis";
+    src: url("resources/Boxis-VF.ttf");
+}
+
+@keyframes TheAnimation {
     from {
-        font-variation-settings: "wght" 0.5, "wdth" 0.9;
+        font-variation-settings: "hght" 400, "wdth" 500;
     }
     to {
-        font-variation-settings: "wght" 3.2;
+        font-variation-settings: "hght" 600;
     }
 }
 
 #box {
-    font: 100px "Skia";
-    animation-name: "weightAnimation";
+    font: 100px "Boxis";
     animation-duration: 3s;
     animation-timing-function: linear;
 }
 <script>
 var expectedValues = [
     // [animation-name, time, element-id, property, expected-value, tolerance]
-    ["weightAnimation", 0.5, "box", "font-variation-settings", "normal", 0.05],
-    ["weightAnimation", 1.0, "box", "font-variation-settings", "normal", 0.05],
-    ["weightAnimation", 2.0, "box", "font-variation-settings", "normal", 0.05],
+    ["TheAnimation", 0.5, "box", "font-variation-settings", "normal", 5],
+    ["TheAnimation", 1.0, "box", "font-variation-settings", "normal", 5],
+    ["TheAnimation", 2.0, "box", "font-variation-settings", "normal", 5],
 ];
-runAnimationTest(expectedValues, undefined, undefined, undefined, true, undefined);
+
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+}
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+    promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+    document.getElementById("box").style.animationName = "TheAnimation";
+    runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+});
 </script>
 </body>
 </html>
index 1a2a7b8..0baf826 100644 (file)
@@ -3,18 +3,22 @@
 <head>
 <script src="../resources/animation-test-helpers.js"></script>
 <style>
-@keyframes weightAnimation {
+@font-face {
+    font-family: "Boxis";
+    src: url("resources/Boxis-VF.ttf");
+}
+
+@keyframes TheAnimation {
     from {
-        font-variation-settings: "wght" 0.1;
+        font-variation-settings: "wdth" 400;
     }
     to {
-        font-variation-settings: "wght" 1.9;
+        font-variation-settings: "wdth" 900;
     }
 }
 
 #box {
-    font: 100px "-apple-system";
-    animation-name: "weightAnimation";
+    font: 100px "Boxis";
     animation-duration: 3s;
     animation-timing-function: linear;
 }
 <script>
 var expectedValues = [
     // [animation-name, time, element-id, property, expected-value, tolerance]
-    ["weightAnimation", 0.5, "box", "font-variation-settings", "'wght' 0.4", 0.05],
-    ["weightAnimation", 1.0, "box", "font-variation-settings", "'wght' 0.7", 0.05],
-    ["weightAnimation", 2.0, "box", "font-variation-settings", "'wght' 1.3", 0.05],
+    ["TheAnimation", 0.5, "box", "font-variation-settings", "'wdth' 483.3333", 5],
+    ["TheAnimation", 1.0, "box", "font-variation-settings", "'wdth' 566.6666", 5],
+    ["TheAnimation", 2.0, "box", "font-variation-settings", "'wdth' 733.3333", 5],
 ];
-runAnimationTest(expectedValues, undefined, undefined, undefined, true, undefined);
+
+if (window.testRunner) {
+    testRunner.waitUntilDone();
+}
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+    promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+    document.getElementById("box").style.animationName = "TheAnimation";
+    runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+});
 </script>
 </body>
 </html>
diff --git a/LayoutTests/animations/font-variations/resources/Boxis-VF.ttf b/LayoutTests/animations/font-variations/resources/Boxis-VF.ttf
new file mode 100644 (file)
index 0000000..177fe5c
Binary files /dev/null and b/LayoutTests/animations/font-variations/resources/Boxis-VF.ttf differ
diff --git a/LayoutTests/fast/backgrounds/background-repeat-x-y.html b/LayoutTests/fast/backgrounds/background-repeat-x-y.html
deleted file mode 100644 (file)
index 62a2ea5..0000000
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<style>
-div {
-       display: inline-block;
-       width: 150px;
-       height: 150px;
-       background-image: url('resources/map.jpg');
-       background-position: top left; 
-}
-</style>
-</head>
-<body>
-<p>This makes sure that background-repeat-x and background-repeat-y are rendered as expected.</p>
-<div style="background-repeat-x: repeat; border: 1px solid black;"></div>
-<div style="background-repeat-x: no-repeat; border: 1px solid black;"></div>
-<div style="background-repeat-y: repeat; border: 1px solid black;"></div>
-<div style="background-repeat-y: no-repeat; border: 1px solid black;"></div>
-<div style="background-repeat-x: no-repeat; background-repeat-y: no-repeat; border: 1px solid black;"></div>
-<div style="background-repeat: repeat-x; background-repeat-x: no-repeat; border: 1px solid black;"></div>
-<div style="background-repeat: repeat-y; background-repeat-y: no-repeat; border: 1px solid black;"></div>
-<div style="background-repeat-x: no-repeat; background-repeat: repeat-x; border: 1px solid black;"></div>
-<div style="background-repeat-y: no-repeat; background-repeat: repeat-y; border: 1px solid black;"></div>
-<div style="background-repeat-x: garbage; border: 1px solid black;"></div>
-</body>
-</html>
\ No newline at end of file
index 5a0533b..e0a2225 100644 (file)
@@ -1,23 +1,41 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 <script src="../../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div><span id="regular" style="font: 100px 'Skia';">ham</span></div>
-<div><span id="wide" style="font: 100px 'Skia'; font-variation-settings: 'wdth' 1.25;">ham</span></div>
-<div><span id="specifiedregular" style="font: 100px 'Skia'; font-variation-settings: 'wdth' 1;">ham</span></div>
-<div><span id="narrow" style="font: 100px 'Skia'; font-variation-settings: 'wdth' 0.62;">ham</span></div>
+<div><span id="regular" style="font: 100px 'Boxis';">ham</span></div>
+<div><span id="wide" style="font: 100px 'Boxis'; font-variation-settings: 'wdth' 900;">ham</span></div>
+<div><span id="specifiedregular" style="font: 100px 'Boxis'; font-variation-settings: 'wdth' 750;">ham</span></div>
+<div><span id="narrow" style="font: 100px 'Boxis'; font-variation-settings: 'wdth' 500;">ham</span></div>
 <script>
-var regular = document.getElementById("regular");
-var wide = document.getElementById("wide");
-var specifiedregular = document.getElementById("specifiedregular");
-var narrow = document.getElementById("narrow");
+window.jsTestIsAsync = true;
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+       promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+       var regular = document.getElementById("regular");
+       var wide = document.getElementById("wide");
+       var specifiedregular = document.getElementById("specifiedregular");
+       var narrow = document.getElementById("narrow");
+
+       shouldNotBe("regular.offsetWidth", "wide.offsetWidth");
+       shouldNotBe("regular.offsetWidth", "narrow.offsetWidth");
+       shouldNotBe("narrow.offsetWidth", "wide.offsetWidth");
+       shouldBe("regular.offsetWidth", "specifiedregular.offsetWidth");
+       finishJSTest();
+});
 
-shouldNotBe("regular.offsetWidth", "wide.offsetWidth");
-shouldNotBe("regular.offsetWidth", "narrow.offsetWidth");
-shouldNotBe("narrow.offsetWidth", "wide.offsetWidth");
-shouldBe("regular.offsetWidth", "specifiedregular.offsetWidth");
 </script>
 <script src="../../../resources/js-test-post.js"></script>
 </body>
index 7c0a0bd..325a9d3 100644 (file)
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
 This test passes if capitalized and lowercased axis names are distinct.
-<div style="font: 100px '-apple-system';">Hello</div>
+<div style="font: 100px 'Boxis';">Hello</div>
 </body>
 </html>
\ No newline at end of file
index 692e39f..b36a5e8 100644 (file)
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
 This test passes if capitalized and lowercased axis names are distinct.
-<div style="font: 100px '-apple-system'; font-variation-settings: 'WGHT' 1.8;">Hello</div>
+<div style="font: 100px 'Boxis'; font-variation-settings: 'WDTH' 900;">Hello</div>
 </body>
 </html>
\ No newline at end of file
index 8f77c6f..9306669 100644 (file)
@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
-<script>
-if (window.internals)
-   window.internals.settings.setVariationFontsEnabled(true);
-</script>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
 This test makes sure that default values of variations get applied correctly. The test fails if the text below isn't thin.
-<div style="font: 70px 'Skia'; font-variation-settings: 'wght' 1.000001;">hamburgefonstiv</div>
+<div style="font: 70px 'Boxis'; font-variation-settings: 'wdth' 750.000001;">hamburgefonstiv</div>
 </body>
 <html>
index e81cb61..7d8b9da 100644 (file)
@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
-<script>
-if (window.internals)
-   window.internals.settings.setVariationFontsEnabled(true);
-</script>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
 This test makes sure that default values of variations get applied correctly. The test fails if the text below isn't thin.
-<div style="font: 70px 'Skia'; font-variation-settings: 'wght' 1.0;">hamburgefonstiv</div>
+<div style="font: 70px 'Boxis'; font-variation-settings: 'wdth' 750;">hamburgefonstiv</div>
 </body>
 <html>
diff --git a/LayoutTests/fast/text/variations/duplicate-axis-expected.html b/LayoutTests/fast/text/variations/duplicate-axis-expected.html
deleted file mode 100644 (file)
index dd4aecb..0000000
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-</head>
-<body>
-This test passes if the second axis value in font-variation-settings overrides the first one.
-<div style="font: 100px Skia; font-variation-settings: 'wght' 1.2;">Hello</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/text/variations/duplicate-axis.html b/LayoutTests/fast/text/variations/duplicate-axis.html
deleted file mode 100644 (file)
index 7a30d80..0000000
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-</head>
-<body>
-This test passes if the second axis value in font-variation-settings overrides the first one.
-<div style="font: 100px Skia; font-variation-settings: 'wght' 0.8, 'wght' 1.2;">Hello</div>
-</body>
-</html>
\ No newline at end of file
index be430bb..4948de9 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia'; font-variation-settings: 'wght' 3;">Test passes if this text has a weight of 3.</div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'wdth' 500;">Test passes if this text has a width of 500.</div>
 </body>
 </html>
index 3ed1060..3770de2 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia'; font-variation-settings: 'wght' 2, 'wght' 3;">Test passes if this text has a weight of 3.</div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'wdth' 900, 'wdth' 500;">Test passes if this text has a width of 500.</div>
 </body>
 </html>
index 516c46c..bb07e6a 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia';">Test passes if this text is bold.</div>
+<div style="font-family: 'Boxis';">Test passes if this text is wide.</div>
 </body>
 </html>
index 91205d0..0b66eb9 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: '-apple-system'; font-variation-settings: 'wght' 1.8;">Test passes if this text is bold.</div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'wdth' 900;">Test passes if this text is wide.</div>
 </body>
 </html>
index a1a0142..2214e1a 100644 (file)
@@ -1,12 +1,19 @@
-PASS window.getComputedStyle(document.getElementById('test0')).getPropertyValue('font-variation-settings') is "'wght' 2"
-PASS window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-variation-settings') is "'wght' 3"
-PASS window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings') is "'wght' 2, 'wdth' 1.2"
-PASS window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings') is window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-variation-settings')
+PASS window.getComputedStyle(document.getElementById('test0')).getPropertyValue('font-variation-settings') is "'hght' 400"
+PASS window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-variation-settings') is "'hght' 500"
+PASS window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings') is "'wdth' 500, 'hght' 400"
+PASS window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-variation-settings') is window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings')
 PASS window.getComputedStyle(document.getElementById('test4')).getPropertyValue('font-variation-settings') is "normal"
 PASS window.getComputedStyle(document.getElementById('test5')).getPropertyValue('font-variation-settings') is "normal"
 PASS window.getComputedStyle(document.getElementById('test6')).getPropertyValue('font-variation-settings') is "normal"
-PASS window.getComputedStyle(document.getElementById('test7')).getPropertyValue('font-variation-settings') is "'wght' 27"
+PASS window.getComputedStyle(document.getElementById('test7')).getPropertyValue('font-variation-settings') is "'hght' 999999"
 PASS successfullyParsed is true
 
 TEST COMPLETE
-
+a
+a
+a
+a
+a
+a
+a
+a
index 17d3d3d..81b60d0 100644 (file)
@@ -2,26 +2,43 @@
 <html>
 <head>
 <meta charset="utf-8">
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 <script src="../../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div id="test0" style="font-family: 'Skia'; font-variation-settings: 'wght' 2;"></div>
-<div id="test1" style="font-family: 'Skia'; font-variation-settings: 'wght' 2, 'wght' 3;"></div>
-<div id="test2" style="font-family: 'Skia'; font-variation-settings: 'wght' 2, 'wdth' 1.2;"></div>
-<div id="test3" style="font-family: 'Skia'; font-variation-settings: 'wdth' 1.2, 'wght' 2;"></div>
-<div id="test4" style="font-family: 'Skia'; font-variation-settings: normal;"></div>
-<div id="test5" style="font-family: 'Skia'; font-variation-settings: 'abcde' 3;"></div>
-<div id="test6" style="font-family: 'Skia'; font-variation-settings: 'abc한국어e' 3;"></div>
-<div id="test7" style="font-family: 'Skia'; font-variation-settings: 'wght' 27;"></div>
+<div id="test0" style="font-family: 'Boxis'; font-variation-settings: 'hght' 400;">a</div>
+<div id="test1" style="font-family: 'Boxis'; font-variation-settings: 'hght' 400, 'hght' 500;">a</div>
+<div id="test2" style="font-family: 'Boxis'; font-variation-settings: 'hght' 400, 'wdth' 500;">a</div>
+<div id="test3" style="font-family: 'Boxis'; font-variation-settings: 'wdth' 500, 'hght' 400;">a</div>
+<div id="test4" style="font-family: 'Boxis'; font-variation-settings: normal;">a</div>
+<div id="test5" style="font-family: 'Boxis'; font-variation-settings: 'abcde' 500;">a</div>
+<div id="test6" style="font-family: 'Boxis'; font-variation-settings: 'abc한국어e' 500;">a</div>
+<div id="test7" style="font-family: 'Boxis'; font-variation-settings: 'hght' 999999;">a</div>
 <script>
-shouldBeEqualToString("window.getComputedStyle(document.getElementById('test0')).getPropertyValue('font-variation-settings')", "'wght' 2");
-shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-variation-settings')", "'wght' 3");
-shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings')", "'wght' 2, 'wdth' 1.2");
-shouldBe("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings')", "window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-variation-settings')");
-shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).getPropertyValue('font-variation-settings')", "normal");
-shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).getPropertyValue('font-variation-settings')", "normal");
-shouldBeEqualToString("window.getComputedStyle(document.getElementById('test6')).getPropertyValue('font-variation-settings')", "normal");
-shouldBeEqualToString("window.getComputedStyle(document.getElementById('test7')).getPropertyValue('font-variation-settings')", "'wght' 27");
+window.jsTestIsAsync = true;
+
+var promises = [];
+
+document.fonts.forEach(function(f) {
+       promises.push(f.loaded);
+});
+
+Promise.all(promises).then(function() {
+       shouldBeEqualToString("window.getComputedStyle(document.getElementById('test0')).getPropertyValue('font-variation-settings')", "'hght' 400");
+       shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-variation-settings')", "'hght' 500");
+       shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings')", "'wdth' 500, 'hght' 400");
+       shouldBe("window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-variation-settings')", "window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-variation-settings')");
+       shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).getPropertyValue('font-variation-settings')", "normal");
+       shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).getPropertyValue('font-variation-settings')", "normal");
+       shouldBeEqualToString("window.getComputedStyle(document.getElementById('test6')).getPropertyValue('font-variation-settings')", "normal");
+       shouldBeEqualToString("window.getComputedStyle(document.getElementById('test7')).getPropertyValue('font-variation-settings')", "'hght' 999999");
+       finishJSTest();
+});
 </script>
 <script src="../../../resources/js-test-post.js"></script>
 </body>
index 7c4159e..0b66eb9 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia'; font-variation-settings: 'wght' 2;">Test passes if this text is bold.</div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'wdth' 900;">Test passes if this text is wide.</div>
 </body>
 </html>
index d029421..d5a7dde 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia'; font-variation-settings: 'wght' 2;"><div>Test passes if this text is bold.</div></div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'wdth' 900;"><div>Test passes if this text is wide.</div></div>
 </body>
 </html>
index 0242080..35a9080 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia'; font-variation-settings: 'wdth' 1.2, 'wght' 2;">Test passes if this text has a weight of 3.</div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'wdth' 500, 'hght' 400;">Test passes if this text has a height of 400 and a width of 500.</div>
 </body>
 </html>
index a974814..b13b896 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia'; font-variation-settings: 'wght' 2, 'wdth' 1.2;">Test passes if this text has a weight of 3.</div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'hght' 400, 'wdth' 500;">Test passes if this text has a height of 400 and a width of 500.</div>
 </body>
 </html>
index 5d02f81..bb07e6a 100644 (file)
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-<script>
-if (window.internals)
-   window.internals.settings.setVariationFontsEnabled(true);
-</script>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia';">Test passes if this text is bold.</div>
+<div style="font-family: 'Boxis';">Test passes if this text is wide.</div>
 </body>
-</html>
\ No newline at end of file
+</html>
index f6fc5ed..7541676 100644 (file)
@@ -1,8 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
+<style>
+@font-face {
+       font-family: "Boxis";
+       src: url("resources/Boxis-VF.ttf");
+}
+</style>
 </head>
 <body>
-<div style="font-family: 'Skia'; font-variation-settings: 'wght' 27;">Test passes if this text is bold.</div>
+<div style="font-family: 'Boxis'; font-variation-settings: 'wdth' 9999999999;">Test passes if this text is wide.</div>
 </body>
 </html>
diff --git a/LayoutTests/fast/text/variations/resources/Boxis-VF.ttf b/LayoutTests/fast/text/variations/resources/Boxis-VF.ttf
new file mode 100644 (file)
index 0000000..177fe5c
Binary files /dev/null and b/LayoutTests/fast/text/variations/resources/Boxis-VF.ttf differ
index 3f18121..4ae73cb 100644 (file)
@@ -1429,8 +1429,8 @@ webkit.org/b/162830 [ Debug ] fast/events/tabindex-focus-blur-all.html [ Pass Ti
 webkit.org/b/127116 [ Debug ] svg/custom/animate-initial-pause-unpause.html [ Pass Failure ]
 
 # rdar://problem/28586837
-fast/text/variations/order.html [ Crash ]
-animations/font-variations/font-variation-settings-order.html [ Pass Failure ImageOnlyFailure Crash ]
+fast/text/variations/order.html [ Pass Crash ]
+animations/font-variations/font-variation-settings-order.html [ Pass Crash ]
 # Variation fonts are not implemented earlier than Sierra.
 [ ElCapitan Yosemite ] fast/text/variations [ Pass Failure ImageOnlyFailure ]
 [ ElCapitan Yosemite ] animations/font-variations [ Pass Failure ImageOnlyFailure ]