Alias "system-ui" for the System font name
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 25 Feb 2017 02:07:12 +0000 (02:07 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 25 Feb 2017 02:07:12 +0000 (02:07 +0000)
https://bugs.webkit.org/show_bug.cgi?id=151493

Reviewed by Tim Horton and Joseph Pecoraro.

Source/WebCore:

Updated existing tests.

* WebCore.xcodeproj/project.pbxproj: Add WebKitFontFamilyNames.in for
convenience.
* css/CSSValueKeywords.in: Add system-ui as a keyword.
* css/WebKitFontFamilyNames.in: Add system-ui.

* platform/graphics/ios/FontCacheIOS.mm:
(WebCore::platformFontWithFamilySpecialCase): Include "system-ui" as an
alias.
* platform/graphics/mac/FontCacheMac.mm:
(WebCore::platformFontWithFamilySpecialCase): Ditto.

* rendering/RenderThemeMac.mm:
(WebCore::RenderThemeMac::updateCachedSystemFontDescription): Update
serialization to "system-ui" from "-apple-system".

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::identifierForFamily):
* css/CSSFontFaceSet.cpp:
(WebCore::CSSFontFaceSet::familyNameFromPrimitive):
* css/StyleBuilderCustom.h:
(WebCore::StyleBuilderCustom::applyValueFontFamily):

Source/WebInspectorUI:

* UserInterface/Models/CSSKeywordCompletions.js: Ditto.

LayoutTests:

Add "system-ui" to the test.
* fast/css/font-family-builtins.html:
* fast/css/font-family-builtins-expected.txt:
* fast/text/system-font-features.html:
* fast/text/system-font-features-expected.html:
* fast/text/system-font-legacy-name.html:
* fast/text/system-font-legacy-name-expected.txt:
* platform/ios-simulator/ios/fast/text/opticalFont.html:
* platform/ios-simulator/ios/fast/text/opticalFont-expected.txt:
* platform/ios-simulator/ios/fast/text/opticalFontWithTextStyle-expected.txt:

Unskip opticalFont* tests.
* platform/ios-simulator/TestExpectations:

Update tests to use "system-ui" instead of "-apple-system" or the even
older "-apple-system-font".
* fast/css/multiple-tabs-expected.html:
* fast/css/multiple-tabs.html:
* fast/text/international/system-language/han-quotes-expected-mismatch.html:
* fast/text/international/system-language/han-quotes.html:
* fast/text/international/system-language/hindi-system-font-punctuation-expected.html:
* fast/text/international/system-language/hindi-system-font-punctuation.html:
* fast/text/letterpress-different-expected-mismatch.html:
* fast/text/letterpress-different.html:
* fast/text/letterpress-paint.html:
* fast/text/system-font-weight-italic.html:
* fast/text/system-font-weight.html:
* fast/text/text-node-remains-dirty-after-calling-surroundContents-expected.html:
* fast/text/text-node-remains-dirty-after-calling-surroundContents.html:
* fast/text/trak-optimizeLegibility.html:
* fast/text/weighted-italicized-system-font-expected.html:
* fast/text/weighted-italicized-system-font.html:
* platform/ios-simulator/ios/fast/text/apple-logo.html:
* platform/ios-simulator/ios/fast/text/opticalFontWithWeight-expected.txt:
* platform/ios-simulator/ios/fast/text/opticalFontWithWeight.html:
* platform/ios-simulator/ios/fast/text/underline-scaling.html:
* platform/mac/fast/css/css2-system-fonts-expected.txt:

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

44 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/font-family-builtins-expected.txt
LayoutTests/fast/css/font-family-builtins.html
LayoutTests/fast/css/multiple-tabs-expected.html
LayoutTests/fast/css/multiple-tabs.html
LayoutTests/fast/text/international/system-language/han-quotes-expected-mismatch.html
LayoutTests/fast/text/international/system-language/han-quotes.html
LayoutTests/fast/text/international/system-language/hindi-system-font-punctuation-expected.html
LayoutTests/fast/text/international/system-language/hindi-system-font-punctuation.html
LayoutTests/fast/text/letterpress-different-expected-mismatch.html
LayoutTests/fast/text/letterpress-different.html
LayoutTests/fast/text/letterpress-paint.html
LayoutTests/fast/text/system-font-features-expected.html
LayoutTests/fast/text/system-font-features.html
LayoutTests/fast/text/system-font-legacy-name-expected.txt
LayoutTests/fast/text/system-font-legacy-name.html
LayoutTests/fast/text/system-font-weight-italic.html
LayoutTests/fast/text/system-font-weight.html
LayoutTests/fast/text/text-node-remains-dirty-after-calling-surroundContents-expected.html
LayoutTests/fast/text/text-node-remains-dirty-after-calling-surroundContents.html
LayoutTests/fast/text/trak-optimizeLegibility.html
LayoutTests/fast/text/weighted-italicized-system-font-expected.html
LayoutTests/fast/text/weighted-italicized-system-font.html
LayoutTests/platform/ios-simulator/TestExpectations
LayoutTests/platform/ios-simulator/ios/fast/text/apple-logo.html
LayoutTests/platform/ios-simulator/ios/fast/text/opticalFont-expected.txt
LayoutTests/platform/ios-simulator/ios/fast/text/opticalFont.html
LayoutTests/platform/ios-simulator/ios/fast/text/opticalFontWithTextStyle-expected.txt
LayoutTests/platform/ios-simulator/ios/fast/text/opticalFontWithWeight-expected.txt
LayoutTests/platform/ios-simulator/ios/fast/text/opticalFontWithWeight.html
LayoutTests/platform/ios-simulator/ios/fast/text/underline-scaling.html
LayoutTests/platform/mac/fast/css/css2-system-fonts-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/WebCore.xcodeproj/project.pbxproj
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSFontFaceSet.cpp
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/StyleBuilderCustom.h
Source/WebCore/css/WebKitFontFamilyNames.in
Source/WebCore/platform/graphics/ios/FontCacheIOS.mm
Source/WebCore/platform/graphics/mac/FontCacheMac.mm
Source/WebCore/rendering/RenderThemeMac.mm
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js

index 98b0435..75481a5 100644 (file)
@@ -1,3 +1,48 @@
+2017-02-24  Jon Lee  <jonlee@apple.com>
+
+        Alias "system-ui" for the System font name
+        https://bugs.webkit.org/show_bug.cgi?id=151493
+
+        Reviewed by Tim Horton and Joseph Pecoraro.
+
+        Add "system-ui" to the test.
+        * fast/css/font-family-builtins.html:
+        * fast/css/font-family-builtins-expected.txt:
+        * fast/text/system-font-features.html:
+        * fast/text/system-font-features-expected.html:
+        * fast/text/system-font-legacy-name.html:
+        * fast/text/system-font-legacy-name-expected.txt:
+        * platform/ios-simulator/ios/fast/text/opticalFont.html:
+        * platform/ios-simulator/ios/fast/text/opticalFont-expected.txt:
+        * platform/ios-simulator/ios/fast/text/opticalFontWithTextStyle-expected.txt:
+
+        Unskip opticalFont* tests.
+        * platform/ios-simulator/TestExpectations:
+
+        Update tests to use "system-ui" instead of "-apple-system" or the even
+        older "-apple-system-font".
+        * fast/css/multiple-tabs-expected.html:
+        * fast/css/multiple-tabs.html:
+        * fast/text/international/system-language/han-quotes-expected-mismatch.html:
+        * fast/text/international/system-language/han-quotes.html:
+        * fast/text/international/system-language/hindi-system-font-punctuation-expected.html:
+        * fast/text/international/system-language/hindi-system-font-punctuation.html:
+        * fast/text/letterpress-different-expected-mismatch.html:
+        * fast/text/letterpress-different.html:
+        * fast/text/letterpress-paint.html:
+        * fast/text/system-font-weight-italic.html:
+        * fast/text/system-font-weight.html:
+        * fast/text/text-node-remains-dirty-after-calling-surroundContents-expected.html:
+        * fast/text/text-node-remains-dirty-after-calling-surroundContents.html:
+        * fast/text/trak-optimizeLegibility.html:
+        * fast/text/weighted-italicized-system-font-expected.html:
+        * fast/text/weighted-italicized-system-font.html:
+        * platform/ios-simulator/ios/fast/text/apple-logo.html:
+        * platform/ios-simulator/ios/fast/text/opticalFontWithWeight-expected.txt:
+        * platform/ios-simulator/ios/fast/text/opticalFontWithWeight.html:
+        * platform/ios-simulator/ios/fast/text/underline-scaling.html:
+        * platform/mac/fast/css/css2-system-fonts-expected.txt:
+
 2017-02-24  Antoine Quint  <graouts@apple.com>
 
         [Modern Media Controls] <audio> controls should center in their container when the page is scaled
index 7984913..ef5cc43 100644 (file)
@@ -3,4 +3,5 @@ PASS: The computed style for a specified font-family of 'sans-serif' matched.
 PASS: The computed style for a specified font-family of 'cursive' matched.
 PASS: The computed style for a specified font-family of 'fantasy' matched.
 PASS: The computed style for a specified font-family of 'monospace' matched.
+PASS: The computed style for a specified font-family of 'system-ui' matched.
 
index 8d4f8e2..a4c6aa1 100644 (file)
@@ -15,7 +15,8 @@
         "sans-serif",
         "cursive",
         "fantasy",
-        "monospace"
+        "monospace",
+        "system-ui"
     ];
 
     window.onload = function()
index ae4359b..d1cae7b 100644 (file)
@@ -5,8 +5,8 @@ pre { margin: 0.1em; }
 </style>
 </head>
 <body>
-<b>Apple system font.</b>
-<div style="font: 12.000000px -apple-system-font;">
+<b>System font.</b>
+<div style="font: 12.000000px system-ui;">
 <span style="white-space: pre">        x</span>
 <br>
 <span style="white-space: pre">                x</span>
index 5117c97..1385775 100644 (file)
@@ -21,7 +21,7 @@ function setupBlock(description, style)
 
 function test()
 {
-    setupBlock("Apple system font.", "font: 12.000000px -apple-system-font;");
+    setupBlock("System font.", "font: 12.000000px system-ui;");
     setupBlock("Noteworthy.", "font: 18.000000px Noteworthy-Light;");
     setupBlock("Helvetica.", "font: 24.000000px Helvetica;");
 }
index 4067e25..c412fe4 100644 (file)
@@ -3,6 +3,6 @@
 <head>
 </head>
 <body>
-<div style="font: 200px -apple-system;">&#x201c;</div>
+<div style="font: 200px system-ui;">&#x201c;</div>
 </body>
 </html>
index b53b73f..ab640df 100644 (file)
@@ -1,6 +1,6 @@
 <!DOCTYPE html><!-- webkit-test-runner [ language=hi ] -->
 <html>
-<body style="font-family: -apple-system; text-rendering: optimizeSpeed;">
+<body style="font-family: system-ui; text-rendering: optimizeSpeed;">
 This test makes sure that punctuation next to Hindi characters are rendered as expected when the system language is set to Japanese.
 The test passes when the character below looks like a "(" character.
 <div style="overflow: hidden; width: 40px; height: 400px;">
index c1fd0f5..52d2f20 100644 (file)
@@ -1,6 +1,6 @@
 <!DOCTYPE html><!-- webkit-test-runner [ language=hi ] -->
 <html>
-<body style="font-family: -apple-system; text-rendering: optimizeSpeed;">
+<body style="font-family: system-ui; text-rendering: optimizeSpeed;">
 This test makes sure that punctuation next to Hindi characters are rendered as expected when the system language is set to Japanese.
 The test passes when the character below looks like a "(" character.
 <div style="overflow: hidden; width: 40px; height: 400px;"><!-- Covers up the "&#x928;)" -->
index a5d2489..f4e621c 100644 (file)
@@ -3,6 +3,6 @@
 <head>
 </head>
 <body>
-<div style="font: 17px -apple-system;">Test passes if this text has a letterpress effect.</div>
+<div style="font: 17px system-ui;">Test passes if this text has a letterpress effect.</div>
 </body>
 </html>
index 3153e88..47727d1 100644 (file)
@@ -3,6 +3,6 @@
 <head>
 </head>
 <body>
-<div style="font: 17px -apple-system; text-decoration: -webkit-letterpress;">Test passes if this text has a letterpress effect.</div>
+<div style="font: 17px system-ui; text-decoration: -webkit-letterpress;">Test passes if this text has a letterpress effect.</div>
 </body>
 </html>
index ff76054..f68629c 100644 (file)
@@ -3,6 +3,6 @@
 <head>
 </head>
 <body>
-<div style="font: 17px -apple-system; text-decoration: -webkit-letterpress;">Test passes if something paints.</div>
+<div style="font: 17px system-ui; text-decoration: -webkit-letterpress;">Test passes if something paints.</div>
 </body>
 </html>
index 20a4b2d..b304bfc 100644 (file)
@@ -3,7 +3,8 @@
 <head>
 </head>
 <body>
-This test makes sure that font features are applied to -apple-system.
+This test makes sure that font features are applied to -apple-system and system-ui.
+<div style="font: 50px -apple-system-monospaced-numbers;">0123456789</div>
 <div style="font: 50px -apple-system-monospaced-numbers;">0123456789</div>
 </body>
 </html>
index ef4584b..b20695c 100644 (file)
@@ -3,7 +3,8 @@
 <head>
 </head>
 <body>
-This test makes sure that font features are applied to -apple-system.
+This test makes sure that font features are applied to -apple-system and system-ui.
 <div style="font: 50px -apple-system; font-variant-numeric: tabular-nums;">0123456789</div>
+<div style="font: 50px system-ui; font-variant-numeric: tabular-nums;">0123456789</div>
 </body>
 </html>
index 0c7f59f..fd5ff18 100644 (file)
@@ -1,7 +1,10 @@
-These next two lines should be the same width
+These next three lines should be the same width
 
 This is some text
 
 This is some text
 
-PASS: widths were the same
+This is some text
+
+PASS: system-ui and -apple-system widths were the same
+PASS: system-ui and -apple-system-font widths were the same
index a45d675..dfb9c2b 100644 (file)
@@ -4,12 +4,17 @@ span {
 }
 
 #a {
-    font-family: -apple-system;
+    font-family: system-ui;
 }
 
 #b {
+    font-family: -apple-system;
+}
+
+#c {
     font-family: -apple-system-font;
 }
+
 </style>
 <script>
 if (window.testRunner)
@@ -20,19 +25,27 @@ window.addEventListener("load", run, false);
 function run() {
     var a = document.getElementById("a");
     var b = document.getElementById("b");
+    var c = document.getElementById("c");
     var result = document.getElementById("result");
 
     var aRect = a.getBoundingClientRect();
     var bRect = b.getBoundingClientRect();
+    var cRect = c.getBoundingClientRect();
 
     if (aRect.width == bRect.width)
-        result.textContent = "PASS: widths were the same";
+        result.innerHTML = "PASS: system-ui and -apple-system widths were the same";
+    else
+        result.innerHTML = "FAIL: system-ui and -apple-system widths were not the same";
+
+    if (aRect.width == cRect.width)
+        result.innerHTML += "<br/>PASS: system-ui and -apple-system-font widths were the same";
     else
-        result.textContent = "FAIL: widths were not the same";
+        result.innerHTML += "<br/>FAIL: system-ui and -apple-system-font widths were not the same";
 }
 </script>
-<p>These next two lines should be the same width</p>
+<p>These next three lines should be the same width</p>
 <p><span id="a">This is some text</span></p>
 <p><span id="b">This is some text</span></p>
+<p><span id="c">This is some text</span></p>
 
 <p id="result"></p>
index f8d9b1d..cd9be72 100644 (file)
@@ -4,7 +4,7 @@
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div style="font: 19px -apple-system">
+<div style="font: 19px system-ui">
 <div style="font-style: italic;"><span id="six" style="font-weight: 600;">Hello, World</span><span id="nine" style="font-weight: 900;">Hello, World</span></div>
 </div>
 <script>
index 861dafd..2dfeb5e 100644 (file)
@@ -4,7 +4,7 @@
 <script src="../../resources/js-test-pre.js"></script>
 </head>
 <body>
-<div style="font: 19px -apple-system">
+<div style="font: 19px system-ui">
 <div><span id="one" style="font-weight: 100;">Hello, World</span></div>
 <div><span id="two" style="font-weight: 200;">Hello, World</span></div>
 <div><span id="three" style="font-weight: 300;">Hello, World</span></div>
index 45e743c..0093ccd 100644 (file)
@@ -4,7 +4,7 @@
 <title>This tests that the span content gets properly laid out after calling surroundContents.</title>
 <style>
 span {
-       font-family: -apple-system;
+       font-family: system-ui;
        font-size: 12px;
     margin-right: 2px;
     text-decoration: underline;
index 9dd20c8..6591cfd 100644 (file)
@@ -4,7 +4,7 @@
 <title>This tests that the span content gets properly laid out after calling surroundContents.</title>
 <style>
 span {
-       font-family: -apple-system;
+       font-family: system-ui;
        font-size: 12px;
     margin-right: 2px;
 }
index a0706e4..069cb41 100644 (file)
@@ -6,7 +6,7 @@
 <body>
 This test makes sure that you can opt-in to honoring the 'trak' table by specifying text-rendering: optimizeLegibility.
 The first and third lines below should have the same width. The middle one can (but doesn't have to) have a different width.
-<p><span id="first" style="font: 100px '-apple-system'; font-weight: 300;">hamburgefonstiv</span></p>
+<p><span id="first" style="font: 100px 'system-ui'; font-weight: 300;">hamburgefonstiv</span></p>
 <p><span id="second" style="font: 100px '.AppleSystemUIFontLight', '.SFNSText-Light', '.SFUIDisplay-Light';">hamburgefonstiv</span></p>
 <p><span id="third" style="font: 100px '.AppleSystemUIFontLight', '.SFNSText-Light', '.SFUIDisplay-Light'; text-rendering: optimizeLegibility;">hamburgefonstiv</span></p>
 <script>
index bca1664..6cff559 100644 (file)
@@ -4,7 +4,7 @@
 </head>
 <body>
 This test makes sure that bold &amp; thin italicized system fonts render without synthetic bold.
-<div style="font: 100px -apple-system; font-style: italic;">
+<div style="font: 100px system-ui; font-style: italic;">
 <span style="font-weight: 100;">a</span>
 <span style="font-weight: 700;">a</span>
 </div>
index 07f6c84..c8a4f60 100644 (file)
@@ -4,7 +4,7 @@
 </head>
 <body>
 This test makes sure that bold &amp; thin italicized system fonts render without synthetic bold.
-<div style="font: 100px -apple-system; font-synthesis: none; font-style: italic;">
+<div style="font: 100px system-ui; font-synthesis: none; font-style: italic;">
 <span style="font-weight: 100;">a</span>
 <span style="font-weight: 700;">a</span>
 </div>
index b176865..eb4288b 100644 (file)
@@ -2118,9 +2118,6 @@ platform/ios-simulator/ios/fast/text/emoji-complextext.html [ Failure ]
 platform/ios-simulator/ios/fast/text/emoji-text.html [ Failure ]
 platform/ios-simulator/ios/fast/text/line-breaking-with-kerning.html [ Failure ]
 platform/ios-simulator/ios/fast/text/mid-word-break-before-combining-mark.html [ Failure ]
-platform/ios-simulator/ios/fast/text/opticalFont.html [ Failure ]
-platform/ios-simulator/ios/fast/text/opticalFontWithTextStyle.html [ Failure ]
-platform/ios-simulator/ios/fast/text/opticalFontWithWeight.html [ Failure ]
 platform/ios-simulator/ios/fast/text/textStylesWithSizes.html [ Failure ]
 platform/ios-simulator/ios/fixed/absolute-inside-fixed.html [ Failure ]
 platform/ios-simulator/ios/fixed/four-bars.html [ Failure ]
index 8adb97f..156c727 100644 (file)
@@ -7,7 +7,7 @@
 <span style="font-size: 20px; font: -apple-system-body; font-family: 'Times New Roman';"></span>
 <span style="font-size: 20px; font: -apple-system-body; font-family: 'Times New Roman'; font-style: italic;"></span>
 <span style="font: -apple-system-body; font-size: 20px; font-family: 'Times New Roman';"></span>
-<span style="font-family: -apple-system;"></span>
-<span style="font-size: 20px; font-family: -apple-system;"></span>
-<span style="font-size: 20px; font-family: -apple-system; font-weight: bold"></span>
-<span style="font-size: 20px; font-family: -apple-system; font-style: italic"></span>
+<span style="font-family: system-ui;"></span>
+<span style="font-size: 20px; font-family: system-ui;"></span>
+<span style="font-size: 20px; font-family: system-ui; font-weight: bold"></span>
+<span style="font-size: 20px; font-family: system-ui; font-style: italic"></span>
index 2aa90c1..558fbb8 100644 (file)
@@ -1,56 +1,60 @@
-layer at (0,0) size 800x1152
+layer at (0,0) size 800x1233
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x1152
-  RenderBlock {HTML} at (0,0) size 800x1152
-    RenderBody {BODY} at (8,8) size 784x1136
+layer at (0,0) size 800x1233
+  RenderBlock {HTML} at (0,0) size 800x1233
+    RenderBody {BODY} at (8,8) size 784x1217
       RenderBlock {DIV} at (0,0) size 784x29
-        RenderText {#text} at (0,0) size 392x29
-          text run at (0,0) width 392: "This is a test for -webkit-system-font"
+        RenderText {#text} at (0,0) size 397x29
+          text run at (0,0) width 397: "This is a test for -webkit-system-font"
       RenderBlock {DIV} at (0,29) size 784x29
-        RenderText {#text} at (0,0) size 765x29
-          text run at (0,0) width 765: "This is a test for -apple-system. It should be the same as the line above."
+        RenderText {#text} at (0,0) size 767x29
+          text run at (0,0) width 767: "This is a test for -apple-system. It should be the same as the line above."
       RenderBlock {DIV} at (0,58) size 784x74
-        RenderText {#text} at (0,0) size 699x74
-          text run at (0,0) width 699: "This is a test for -webkit-system-font, using the 'font'"
-          text run at (0,37) width 113: "property"
+        RenderText {#text} at (0,0) size 704x74
+          text run at (0,0) width 704: "This is a test for -webkit-system-font, using the 'font'"
+          text run at (0,37) width 112: "property"
       RenderBlock {DIV} at (0,132) size 784x37
-        RenderText {#text} at (0,0) size 742x37
-          text run at (0,0) width 742: "This is a test for -apple-system, using the 'font' property"
-      RenderBlock {DIV} at (0,169) size 784x29
-        RenderInline {B} at (0,0) size 551x29
-          RenderText {#text} at (0,0) size 551x29
-            text run at (0,0) width 551: "This is a test for -webkit-system-font in bold form"
-      RenderBlock {DIV} at (0,198) size 784x29
-        RenderInline {I} at (0,0) size 512x29
-          RenderText {#text} at (0,0) size 512x29
-            text run at (0,0) width 512: "This is a test for -webkit-system-font in italic form"
-      RenderBlock {DIV} at (0,227) size 784x37
-        RenderText {#text} at (0,0) size 655x37
-          text run at (0,0) width 655: "This is a test for -webkit-system-font at size 30px"
-      RenderBlock {DIV} at (0,264) size 784x44
-        RenderText {#text} at (0,0) size 782x44
-          text run at (0,0) width 782: "This is a test for -webkit-system-font at size 36px"
-      RenderBlock {DIV} at (0,308) size 784x102
-        RenderText {#text} at (0,0) size 721x102
-          text run at (0,0) width 721: "This is a test for -webkit-system-font at"
-          text run at (0,51) width 176: "size 42px"
-      RenderBlock {DIV} at (0,410) size 784x116
-        RenderText {#text} at (0,0) size 769x116
-          text run at (0,0) width 769: "This is a test for -webkit-system-font"
-          text run at (0,58) width 255: "at size 48px"
-      RenderBlock {DIV} at (0,526) size 784x132
-        RenderText {#text} at (0,0) size 769x132
-          text run at (0,0) width 769: "This is a test for -webkit-system-"
-          text run at (0,66) width 390: "font at size 54px"
-      RenderBlock {DIV} at (0,658) size 784x146
-        RenderText {#text} at (0,0) size 642x146
-          text run at (0,0) width 642: "This is a test for -webkit-"
-          text run at (0,73) width 642: "system-font at size 60px"
-      RenderBlock {DIV} at (0,804) size 784x158
-        RenderText {#text} at (0,0) size 704x158
-          text run at (0,0) width 704: "This is a test for -webkit-"
-          text run at (0,79) width 703: "system-font at size 66px"
-      RenderBlock {DIV} at (0,962) size 784x174
-        RenderText {#text} at (0,0) size 766x174
-          text run at (0,0) width 766: "This is a test for -webkit-"
-          text run at (0,87) width 759: "system-font at size 72px"
+        RenderText {#text} at (0,0) size 744x37
+          text run at (0,0) width 744: "This is a test for -apple-system, using the 'font' property"
+      RenderBlock {DIV} at (0,169) size 784x37
+        RenderText {#text} at (0,0) size 681x37
+          text run at (0,0) width 681: "This is a test for system-ui, using the 'font' property"
+      RenderBlock {DIV} at (0,206) size 784x29
+        RenderInline {B} at (0,0) size 569x29
+          RenderText {#text} at (0,0) size 569x29
+            text run at (0,0) width 569: "This is a test for -webkit-system-font in bold form"
+      RenderBlock {DIV} at (0,235) size 784x29
+        RenderInline {I} at (0,0) size 530x29
+          RenderText {#text} at (0,0) size 530x29
+            text run at (0,0) width 530: "This is a test for -webkit-system-font in italic form"
+      RenderBlock {DIV} at (0,264) size 784x37
+        RenderText {#text} at (0,0) size 662x37
+          text run at (0,0) width 662: "This is a test for -webkit-system-font at size 30px"
+      RenderBlock {DIV} at (0,301) size 784x88
+        RenderText {#text} at (0,0) size 700x88
+          text run at (0,0) width 700: "This is a test for -webkit-system-font at size"
+          text run at (0,44) width 82: "36px"
+      RenderBlock {DIV} at (0,389) size 784x102
+        RenderText {#text} at (0,0) size 731x102
+          text run at (0,0) width 731: "This is a test for -webkit-system-font at"
+          text run at (0,51) width 178: "size 42px"
+      RenderBlock {DIV} at (0,491) size 784x116
+        RenderText {#text} at (0,0) size 780x116
+          text run at (0,0) width 780: "This is a test for -webkit-system-font"
+          text run at (0,58) width 256: "at size 48px"
+      RenderBlock {DIV} at (0,607) size 784x132
+        RenderText {#text} at (0,0) size 781x132
+          text run at (0,0) width 781: "This is a test for -webkit-system-"
+          text run at (0,66) width 391: "font at size 54px"
+      RenderBlock {DIV} at (0,739) size 784x146
+        RenderText {#text} at (0,0) size 650x146
+          text run at (0,0) width 650: "This is a test for -webkit-"
+          text run at (0,73) width 649: "system-font at size 60px"
+      RenderBlock {DIV} at (0,885) size 784x158
+        RenderText {#text} at (0,0) size 713x158
+          text run at (0,0) width 713: "This is a test for -webkit-"
+          text run at (0,79) width 711: "system-font at size 66px"
+      RenderBlock {DIV} at (0,1043) size 784x174
+        RenderText {#text} at (0,0) size 776x174
+          text run at (0,0) width 776: "This is a test for -webkit-"
+          text run at (0,87) width 767: "system-font at size 72px"
index a1ba02f..e2a6b06 100644 (file)
@@ -3,6 +3,7 @@
     <div style="font-family: -apple-system; font-size: 24px">This is a test for -apple-system. It should be the same as the line above.</div>
     <div style="font: 30.0px -webkit-system-font">This is a test for -webkit-system-font, using the 'font' property</div>
     <div style="font: 30px -apple-system">This is a test for -apple-system, using the 'font' property</div>
+    <div style="font: 30px system-ui">This is a test for system-ui, using the 'font' property</div>
     <div style="font-family: -webkit-system-font; font-size: 24px"><b>This is a test for -webkit-system-font in bold form</b></div>
     <div style="font-family: -webkit-system-font; font-size: 24px"><i>This is a test for -webkit-system-font in italic form</i></div>
     <div style="font-family: -webkit-system-font; font-size: 30px">This is a test for -webkit-system-font at size 30px</div>
index ecea7f4..eb4cd40 100644 (file)
@@ -4,47 +4,47 @@ layer at (0,0) size 800x600
   RenderBlock {HTML} at (0,0) size 800x600
     RenderBody {BODY} at (8,15) size 784x577
       RenderBlock {DIV} at (0,0) size 784x24
-        RenderText {#text} at (0,1) size 107x22
-          text run at (0,1) width 107: "H1 / Headline"
+        RenderText {#text} at (0,1) size 106x22
+          text run at (0,1) width 106: "H1 / Headline"
       RenderBlock {DIV} at (0,39) size 784x35
-        RenderText {#text} at (0,0) size 122x34
-          text run at (0,0) width 122: "T1 / Title1"
+        RenderText {#text} at (0,0) size 113x34
+          text run at (0,0) width 113: "T1 / Title1"
       RenderBlock {DIV} at (0,89) size 784x29
-        RenderText {#text} at (0,1) size 98x27
-          text run at (0,1) width 98: "T2 / Title2"
+        RenderText {#text} at (0,1) size 99x27
+          text run at (0,1) width 99: "T2 / Title2"
       RenderBlock {DIV} at (0,133) size 784x26
-        RenderText {#text} at (0,0) size 89x25
-          text run at (0,0) width 89: "T3 / Title3"
+        RenderText {#text} at (0,0) size 92x25
+          text run at (0,0) width 92: "T3 / Title3"
       RenderBlock {DIV} at (0,174) size 784x24
-        RenderText {#text} at (0,1) size 705x22
-          text run at (0,1) width 705: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+        RenderText {#text} at (0,1) size 707x22
+          text run at (0,1) width 707: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
       RenderBlock {DIV} at (0,213) size 784x26
-        RenderText {#text} at (0,2) size 735x22
-          text run at (0,2) width 735: "Tall Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+        RenderText {#text} at (0,2) size 737x22
+          text run at (0,2) width 737: "Tall Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
       RenderBlock {DIV} at (0,254) size 784x22
-        RenderText {#text} at (0,1) size 87x19
-          text run at (0,1) width 87: "Subheadline"
+        RenderText {#text} at (0,1) size 85x19
+          text run at (0,1) width 85: "Subheadline"
       RenderBlock {DIV} at (0,291) size 784x20
-        RenderText {#text} at (0,1) size 81x17
-          text run at (0,1) width 81: "FN / Footnote"
+        RenderText {#text} at (0,1) size 83x17
+          text run at (0,1) width 83: "FN / Footnote"
       RenderBlock {DIV} at (0,326) size 784x17
         RenderText {#text} at (0,1) size 96x15
           text run at (0,1) width 96: "Cap 1 / Caption 1"
       RenderBlock {DIV} at (0,358) size 784x14
-        RenderText {#text} at (0,0) size 88x14
-          text run at (0,0) width 88: "Cap 2 / Caption 2"
+        RenderText {#text} at (0,0) size 92x14
+          text run at (0,0) width 92: "Cap 2 / Caption 2"
       RenderBlock {DIV} at (0,387) size 784x22
         RenderText {#text} at (0,0) size 154x22
           text run at (0,0) width 154: "Short H1 / Headline"
       RenderBlock {DIV} at (0,424) size 784x22
-        RenderText {#text} at (0,0) size 751x22
-          text run at (0,0) width 751: "Short Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+        RenderText {#text} at (0,0) size 753x22
+          text run at (0,0) width 753: "Short Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
       RenderBlock {DIV} at (0,461) size 784x20
-        RenderText {#text} at (0,0) size 128x19
-          text run at (0,0) width 128: "Short Subheadline"
+        RenderText {#text} at (0,0) size 127x19
+          text run at (0,0) width 127: "Short Subheadline"
       RenderBlock {DIV} at (0,496) size 784x18
-        RenderText {#text} at (0,0) size 116x17
-          text run at (0,0) width 116: "Short FN / Footnote"
+        RenderText {#text} at (0,0) size 120x17
+          text run at (0,0) width 120: "Short FN / Footnote"
       RenderBlock {DIV} at (0,529) size 784x15
-        RenderText {#text} at (0,0) size 128x15
-          text run at (0,0) width 128: "Short Cap 1 / Caption 1"
+        RenderText {#text} at (0,0) size 130x15
+          text run at (0,0) width 130: "Short Cap 1 / Caption 1"
index a2dc1c7..e38573b 100644 (file)
@@ -1,71 +1,71 @@
-layer at (0,0) size 800x822
+layer at (0,0) size 800x844
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x822
-  RenderBlock {HTML} at (0,0) size 800x822
-    RenderBody {BODY} at (8,8) size 784x798
-      RenderBlock {H2} at (0,0) size 784x22
-        RenderText {#text} at (0,1) size 113x20
-          text run at (0,1) width 113: "Normal Weight"
-      RenderBlock {P} at (0,38) size 784x20
-        RenderText {#text} at (0,0) size 671x20
-          text run at (0,0) width 671: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,74) size 784x22
-        RenderText {#text} at (0,1) size 86x20
-          text run at (0,1) width 86: "100 Weight"
-      RenderBlock {P} at (0,112) size 784x20
-        RenderText {#text} at (0,0) size 662x20
-          text run at (0,0) width 662: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,148) size 784x22
-        RenderText {#text} at (0,1) size 88x20
-          text run at (0,1) width 88: "200 Weight"
-      RenderBlock {P} at (0,186) size 784x20
-        RenderText {#text} at (0,0) size 662x20
-          text run at (0,0) width 662: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,222) size 784x22
-        RenderText {#text} at (0,1) size 89x20
-          text run at (0,1) width 89: "300 Weight"
-      RenderBlock {P} at (0,260) size 784x20
-        RenderText {#text} at (0,0) size 662x20
-          text run at (0,0) width 662: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,296) size 784x22
-        RenderText {#text} at (0,1) size 89x20
-          text run at (0,1) width 89: "400 Weight"
-      RenderBlock {P} at (0,334) size 784x20
-        RenderText {#text} at (0,0) size 671x20
-          text run at (0,0) width 671: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,370) size 784x22
-        RenderText {#text} at (0,1) size 89x20
-          text run at (0,1) width 89: "500 Weight"
-      RenderBlock {P} at (0,408) size 784x20
-        RenderText {#text} at (0,0) size 671x20
-          text run at (0,0) width 671: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,444) size 784x22
-        RenderText {#text} at (0,1) size 92x20
-          text run at (0,1) width 92: "Bold Weight"
-      RenderBlock {P} at (0,482) size 784x20
-        RenderText {#text} at (0,0) size 701x20
-          text run at (0,0) width 701: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,518) size 784x22
-        RenderText {#text} at (0,1) size 89x20
-          text run at (0,1) width 89: "600 Weight"
-      RenderBlock {P} at (0,556) size 784x20
-        RenderText {#text} at (0,0) size 701x20
-          text run at (0,0) width 701: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,592) size 784x22
-        RenderText {#text} at (0,1) size 88x20
-          text run at (0,1) width 88: "700 Weight"
-      RenderBlock {P} at (0,630) size 784x20
-        RenderText {#text} at (0,0) size 701x20
-          text run at (0,0) width 701: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,666) size 784x22
-        RenderText {#text} at (0,1) size 89x20
-          text run at (0,1) width 89: "800 Weight"
-      RenderBlock {P} at (0,704) size 784x20
-        RenderText {#text} at (0,0) size 701x20
-          text run at (0,0) width 701: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
-      RenderBlock {H2} at (0,740) size 784x22
-        RenderText {#text} at (0,1) size 89x20
-          text run at (0,1) width 89: "900 Weight"
-      RenderBlock {P} at (0,778) size 784x20
-        RenderText {#text} at (0,0) size 701x20
-          text run at (0,0) width 701: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+layer at (0,0) size 800x844
+  RenderBlock {HTML} at (0,0) size 800x844
+    RenderBody {BODY} at (8,8) size 784x820
+      RenderBlock {H2} at (0,0) size 784x24
+        RenderText {#text} at (0,1) size 119x22
+          text run at (0,1) width 119: "Normal Weight"
+      RenderBlock {P} at (0,40) size 784x20
+        RenderText {#text} at (0,0) size 670x20
+          text run at (0,0) width 670: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,76) size 784x24
+        RenderText {#text} at (0,1) size 91x22
+          text run at (0,1) width 91: "100 Weight"
+      RenderBlock {P} at (0,116) size 784x20
+        RenderText {#text} at (0,0) size 661x20
+          text run at (0,0) width 661: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,152) size 784x24
+        RenderText {#text} at (0,1) size 93x22
+          text run at (0,1) width 93: "200 Weight"
+      RenderBlock {P} at (0,192) size 784x20
+        RenderText {#text} at (0,0) size 661x20
+          text run at (0,0) width 661: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,228) size 784x24
+        RenderText {#text} at (0,1) size 93x22
+          text run at (0,1) width 93: "300 Weight"
+      RenderBlock {P} at (0,268) size 784x20
+        RenderText {#text} at (0,0) size 661x20
+          text run at (0,0) width 661: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,304) size 784x24
+        RenderText {#text} at (0,1) size 94x22
+          text run at (0,1) width 94: "400 Weight"
+      RenderBlock {P} at (0,344) size 784x20
+        RenderText {#text} at (0,0) size 670x20
+          text run at (0,0) width 670: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,380) size 784x24
+        RenderText {#text} at (0,1) size 93x22
+          text run at (0,1) width 93: "500 Weight"
+      RenderBlock {P} at (0,420) size 784x20
+        RenderText {#text} at (0,0) size 687x20
+          text run at (0,0) width 687: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,456) size 784x24
+        RenderText {#text} at (0,1) size 97x22
+          text run at (0,1) width 97: "Bold Weight"
+      RenderBlock {P} at (0,496) size 784x20
+        RenderText {#text} at (0,0) size 717x20
+          text run at (0,0) width 717: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,532) size 784x24
+        RenderText {#text} at (0,1) size 94x22
+          text run at (0,1) width 94: "600 Weight"
+      RenderBlock {P} at (0,572) size 784x20
+        RenderText {#text} at (0,0) size 700x20
+          text run at (0,0) width 700: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,608) size 784x24
+        RenderText {#text} at (0,1) size 92x22
+          text run at (0,1) width 92: "700 Weight"
+      RenderBlock {P} at (0,648) size 784x20
+        RenderText {#text} at (0,0) size 717x20
+          text run at (0,0) width 717: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,684) size 784x24
+        RenderText {#text} at (0,1) size 94x22
+          text run at (0,1) width 94: "800 Weight"
+      RenderBlock {P} at (0,724) size 784x20
+        RenderText {#text} at (0,0) size 741x20
+          text run at (0,0) width 741: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
+      RenderBlock {H2} at (0,760) size 784x24
+        RenderText {#text} at (0,1) size 94x22
+          text run at (0,1) width 94: "900 Weight"
+      RenderBlock {P} at (0,800) size 784x20
+        RenderText {#text} at (0,0) size 741x20
+          text run at (0,0) width 741: "Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare ornare mi"
index eda4124..f55f519 100644 (file)
@@ -6,7 +6,7 @@
             font: -apple-system-headline;
         }
         p {
-            font-family: -apple-system;
+            font-family: system-ui;
         }
         </style>
     </head>
index 32b51e2..70498e8 100644 (file)
@@ -4,7 +4,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <style>
         p {
-            font-family: -apple-system;
+            font-family: system-ui;
             text-decoration: underline;
             margin-top: 0;
             margin-bottom: 0;
index d62a970..6fd10b0 100644 (file)
@@ -1,10 +1,10 @@
 This tests platform specific system font styles. If any of the styles appear in monospace the test fails.
-caption: normal normal normal 13px/16px -apple-system
-icon: normal normal normal 13px/16px -apple-system
+caption: normal normal normal 13px/16px system-ui
+icon: normal normal normal 13px/16px system-ui
 menu: normal normal normal 13px/16px -apple-menu
-message-box: normal normal normal 13px/16px -apple-system
-small-caption: normal normal normal 11px/13px -apple-system
+message-box: normal normal normal 13px/16px system-ui
+small-caption: normal normal normal 11px/13px system-ui
 status-bar: normal normal normal 10px/12px -apple-status-bar
--webkit-mini-control: normal normal normal 9px/11px -apple-system
--webkit-small-control: normal normal normal 11px/13px -apple-system
--webkit-control: normal normal normal 13px/16px -apple-system
+-webkit-mini-control: normal normal normal 9px/11px system-ui
+-webkit-small-control: normal normal normal 11px/13px system-ui
+-webkit-control: normal normal normal 13px/16px system-ui
index a7ecd52..816c013 100644 (file)
@@ -1,3 +1,34 @@
+2017-02-24  Jon Lee  <jonlee@apple.com>
+
+        Alias "system-ui" for the System font name
+        https://bugs.webkit.org/show_bug.cgi?id=151493
+
+        Reviewed by Tim Horton and Joseph Pecoraro.
+
+        Updated existing tests.
+
+        * WebCore.xcodeproj/project.pbxproj: Add WebKitFontFamilyNames.in for
+        convenience.
+        * css/CSSValueKeywords.in: Add system-ui as a keyword.
+        * css/WebKitFontFamilyNames.in: Add system-ui.
+
+        * platform/graphics/ios/FontCacheIOS.mm:
+        (WebCore::platformFontWithFamilySpecialCase): Include "system-ui" as an
+        alias.
+        * platform/graphics/mac/FontCacheMac.mm:
+        (WebCore::platformFontWithFamilySpecialCase): Ditto.
+
+        * rendering/RenderThemeMac.mm:
+        (WebCore::RenderThemeMac::updateCachedSystemFontDescription): Update
+        serialization to "system-ui" from "-apple-system".
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore::identifierForFamily):
+        * css/CSSFontFaceSet.cpp:
+        (WebCore::CSSFontFaceSet::familyNameFromPrimitive):
+        * css/StyleBuilderCustom.h:
+        (WebCore::StyleBuilderCustom::applyValueFontFamily):
+
 2017-02-24  Matt Rajca  <mrajca@apple.com>
 
         Media: notify clients when autoplay is denied
index 17fa3bd..af56363 100644 (file)
                2EF1BFE9121C9F4200C27627 /* FileStream.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = FileStream.h; sourceTree = "<group>"; };
                2EF1BFF8121CB0CE00C27627 /* FileStreamClient.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = FileStreamClient.h; sourceTree = "<group>"; };
                3103B7DE1DB01556008BB890 /* ColorHash.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ColorHash.h; sourceTree = "<group>"; };
+               31055BB81E4FE18900EB604E /* WebKitFontFamilyNames.in */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = WebKitFontFamilyNames.in; sourceTree = "<group>"; };
                31078CC21880A6A6008099DC /* OESTextureHalfFloatLinear.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = OESTextureHalfFloatLinear.cpp; sourceTree = "<group>"; };
                31078CC31880A6A6008099DC /* OESTextureHalfFloatLinear.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = OESTextureHalfFloatLinear.h; sourceTree = "<group>"; };
                31078CC41880A6A6008099DC /* OESTextureHalfFloatLinear.idl */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = OESTextureHalfFloatLinear.idl; sourceTree = "<group>"; };
                                3FFFF9A6159D9A550020BBD5 /* WebKitCSSViewportRule.cpp */,
                                3FFFF9A7159D9A550020BBD5 /* WebKitCSSViewportRule.h */,
                                3F2B33E3165ABD3500E3987C /* WebKitCSSViewportRule.idl */,
+                               31055BB81E4FE18900EB604E /* WebKitFontFamilyNames.in */,
                        );
                        path = css;
                        sourceTree = "<group>";
index 6cce81c..8eae884 100644 (file)
@@ -1677,6 +1677,8 @@ static CSSValueID identifierForFamily(const AtomicString& family)
         return CSSValueSansSerif;
     if (family == serifFamily)
         return CSSValueSerif;
+    if (family == systemUiFamily)
+        return CSSValueSystemUi;
     return CSSValueInvalid;
 }
 
index 4507bfd..9f30dd7 100644 (file)
@@ -142,6 +142,8 @@ String CSSFontFaceSet::familyNameFromPrimitive(const CSSPrimitiveValue& value)
         return monospaceFamily;
     case CSSValueWebkitPictograph:
         return pictographFamily;
+    case CSSValueSystemUi:
+        return systemUiFamily;
     default:
         return { };
     }
index 8f260c4..3c9dff1 100644 (file)
@@ -173,6 +173,7 @@ fantasy
 monospace
 -webkit-body
 -webkit-pictograph
+system-ui
 //
 //
 // CSS_PROP_*_COLOR
index 432c83a..c066760 100644 (file)
@@ -902,6 +902,10 @@ inline void StyleBuilderCustom::applyValueFontFamily(StyleResolver& styleResolve
                 family = pictographFamily;
                 isGenericFamily = true;
                 break;
+            case CSSValueSystemUi:
+                family = systemUiFamily;
+                isGenericFamily = true;
+                break;
             default:
                 break;
             }
index f1b878e..8c33cfa 100644 (file)
@@ -5,3 +5,4 @@ sansSerifFamily="-webkit-sans-serif"
 serifFamily="-webkit-serif"
 pictographFamily="-webkit-pictograph"
 standardFamily="-webkit-standard"
+systemUiFamily="-webkit-system-ui"
index 69a455d..c4ea31d 100644 (file)
@@ -162,7 +162,7 @@ RetainPtr<CTFontRef> platformFontWithFamilySpecialCase(const AtomicString& famil
         return adoptCF(CTFontCreateWithFontDescriptor(fontDescriptor.get(), size, nullptr));
     }
 
-    if (equalLettersIgnoringASCIICase(family, "-webkit-system-font") || equalLettersIgnoringASCIICase(family, "-apple-system") || equalLettersIgnoringASCIICase(family, "-apple-system-font")) {
+    if (equalLettersIgnoringASCIICase(family, "-webkit-system-font") || equalLettersIgnoringASCIICase(family, "-apple-system") || equalLettersIgnoringASCIICase(family, "-apple-system-font") || equalLettersIgnoringASCIICase(family, "system-ui")) {
         return adoptCF(CTFontCreateWithFontDescriptor(systemFontDescriptor(weight, traits & kCTFontTraitBold, traits & kCTFontTraitItalic, size).get(), size, nullptr));
     }
 
index 5327f63..165a355 100644 (file)
@@ -71,7 +71,7 @@ static CGFloat toNSFontWeight(FontWeight fontWeight)
 
 RetainPtr<CTFontRef> platformFontWithFamilySpecialCase(const AtomicString& family, FontWeight weight, CTFontSymbolicTraits desiredTraits, float size)
 {
-    if (equalLettersIgnoringASCIICase(family, "-webkit-system-font") || equalLettersIgnoringASCIICase(family, "-apple-system") || equalLettersIgnoringASCIICase(family, "-apple-system-font")) {
+    if (equalLettersIgnoringASCIICase(family, "-webkit-system-font") || equalLettersIgnoringASCIICase(family, "-apple-system") || equalLettersIgnoringASCIICase(family, "-apple-system-font") || equalLettersIgnoringASCIICase(family, "system-ui")) {
         RetainPtr<CTFontRef> result = toCTFont([NSFont systemFontOfSize:size weight:toNSFontWeight(weight)]);
         if (desiredTraits & kCTFontItalicTrait) {
             if (auto italicizedFont = adoptCF(CTFontCreateCopyWithSymbolicTraits(result.get(), size, nullptr, desiredTraits, desiredTraits)))
index b6a1d16..20e3168 100644 (file)
@@ -420,7 +420,7 @@ void RenderThemeMac::updateCachedSystemFontDescription(CSSValueID cssValueId, Fo
         return;
 
     if (fontName.isNull())
-        fontName = AtomicString("-apple-system", AtomicString::ConstructFromLiteral);
+        fontName = AtomicString("system-ui", AtomicString::ConstructFromLiteral);
 
     NSFontManager *fontManager = [NSFontManager sharedFontManager];
     fontDescription.setIsAbsoluteSize(true);
index 3c1a172..da704e3 100644 (file)
@@ -1,3 +1,12 @@
+2017-02-24  Jon Lee  <jonlee@apple.com>
+
+        Alias "system-ui" for the System font name
+        https://bugs.webkit.org/show_bug.cgi?id=151493
+
+        Reviewed by Tim Horton and Joseph Pecoraro.
+
+        * UserInterface/Models/CSSKeywordCompletions.js: Ditto.
+
 2017-02-23  Devin Rousso  <dcrousso+webkit@gmail.com>
 
         Web Inspector: RTL: DOM Tree spacing is wrong
index 395e4d2..0b669c1 100644 (file)
@@ -388,7 +388,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "-apple-system-headline", "-apple-system-body", "-apple-system-subheadline", "-apple-system-footnote",
         "-apple-system-caption1", "-apple-system-caption2", "-apple-system-short-headline", "-apple-system-short-body",
         "-apple-system-short-subheadline", "-apple-system-short-footnote", "-apple-system-short-caption1",
-        "-apple-system-tall-body", "-apple-system-title1", "-apple-system-title2", "-apple-system-title3"
+        "-apple-system-tall-body", "-apple-system-title1", "-apple-system-title2", "-apple-system-title3", "system-ui"
     ],
     "dominant-baseline": [
         "middle", "auto", "central", "text-before-edge", "text-after-edge", "ideographic", "alphabetic", "hanging",
@@ -497,7 +497,7 @@ WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
         "-apple-system-subheadline", "-apple-system-footnote", "-apple-system-caption1", "-apple-system-caption2",
         "-apple-system-short-headline", "-apple-system-short-body", "-apple-system-short-subheadline",
         "-apple-system-short-footnote", "-apple-system-short-caption1", "-apple-system-tall-body",
-        "-apple-system-title1", "-apple-system-title2", "-apple-system-title3"
+        "-apple-system-title1", "-apple-system-title2", "-apple-system-title3", "system-ui"
     ],
     "text-overflow-mode": [
         "clip", "ellipsis"