Bug 1523562 [wpt PR 14900] - Clamp out of range calc() values after font-style: oblique calc(...), a=testonly
authorSushanth Rajasankar <sushraja@microsoft.com>
Thu, 31 Jan 2019 18:57:01 +0000
changeset 458029 6eb684b32bf774165122fb51fda5f26caa8180ea
parent 458028 e7b175ed7853657e69e4143058ed69245adff335
child 458030 bd04aac7174a8a6e52b34991770609974e9c2ecf
push id35518
push useropoprus@mozilla.com
push dateFri, 08 Feb 2019 09:55:14 +0000
treeherdermozilla-central@3a3e393396f4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1523562, 14900, 809943, 1410177, 623808
milestone67.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 1523562 [wpt PR 14900] - Clamp out of range calc() values after font-style: oblique calc(...), a=testonly Automatic update from web-platform-tests Clamp out of range calc() values after font-style: oblique calc(...) This fixes the bug referenced [here.] (https://bugs.chromium.org/p/chromium/issues/detail?id=809943) Values specified in a calc() function after an oblique now clamp to the range of [-90, 90]. https://www.w3.org/TR/css-fonts-4/ - Restricts values to -90-90 https://drafts.csswg.org/css-values-3/#calc-range - Requires that the results of Calc be clamped. Bug: 809943 Change-Id: I474f034fc87018bf983c89fba52ed4a09994f924 Reviewed-on: https://chromium-review.googlesource.com/c/1410177 Commit-Queue: Dominik Röttsches <drott@chromium.org> Commit-Queue: Sushanth Rajasankar <Sushraja@microsoft.com> Reviewed-by: Dominik Röttsches <drott@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/master@{#623808} -- wpt-commits: 686f923fd45a6c70fdcaee276b5ffe4d55d8f39c wpt-pr: 14900
testing/web-platform/tests/css/css-fonts/variations/at-font-face-descriptors.html
testing/web-platform/tests/css/css-fonts/variations/font-style-parsing.html
--- a/testing/web-platform/tests/css/css-fonts/variations/at-font-face-descriptors.html
+++ b/testing/web-platform/tests/css/css-fonts/variations/at-font-face-descriptors.html
@@ -142,16 +142,18 @@
 
             // Single value
             { value: "italic 20deg",            isValid: false, description: "'italic' followed by angle" },
             { value: "italic a",                isValid: false, description: "Extra content after keyword" },
             { value: "oblique 0deg",            isValid: true,  description: "'oblique' followed by zero degrees" },
             { value: "oblique 20deg",           isValid: true,  expectedValue: "oblique", description: "'oblique' followed by default 20deg angle" },
             { value: "oblique 90deg",           isValid: true,  description: "'oblique' followed by maxumum 90 degree angle" },
             { value: "oblique -90deg",          isValid: true,  description: "'oblique' followed by minimum -90 degree angle" },
+            { value: "oblique calc(91deg)",     isValid: true,  expectedValue: "oblique 90deg", description: "'oblique' followed by calc with out of range value (should be clamped)" },
+            { value: "oblique calc(-91deg)",    isValid: true,  expectedValue: "oblique -90deg", description: "'oblique' followed by calc with out of range value (should be clamped)" },
             { value: "oblique 0rad",            isValid: true,  expectedValue: "oblique 0deg", description: "'oblique' followed by  angle in radians" },
             { value: "oblique 20",              isValid: false, description: "'oblique' followed by unit-less number" },
             { value: "oblique 20px",            isValid: false, description: "'oblique' followed by non-angle" },
             { value: "oblique a",               isValid: false, description: "'oblique' followed by non-number" },
             { value: "oblique -",               isValid: false, description: "'oblique' followed by isolated minus" },
             { value: "oblique - 20deg",         isValid: false, description: "'oblique' followed by minus and angle separated by space" },
             { value: "oblique -a",              isValid: false, description: "'oblique' followed by minus and non-number" },
 
--- a/testing/web-platform/tests/css/css-fonts/variations/font-style-parsing.html
+++ b/testing/web-platform/tests/css/css-fonts/variations/font-style-parsing.html
@@ -2,48 +2,59 @@
 <html>
 <head>
     <title>Testing the new font-style values introduced in CSS Fonts level 4</title>
     <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-style-prop" />
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
 </head>
 <body>
-
+    <div id="test"></div>
     <script>
-
         var testFontStyle = [
-            { style: "italic",            expectedResult: true,  message: "'italic' is valid" },
-            { style: "italic 20deg",      expectedResult: false, message: "'italic' followed by angle is invalid" },
-            { style: "italic a",          expectedResult: false, message: "'italic' followed by non-number is invalid" },
-            { style: "oblique",           expectedResult: true,  message: "'oblique' is valid" },
-            { style: "oblique 0deg",      expectedResult: true,  message: "'oblique' followed by zero degrees is valid" },
-            { style: "oblique 20deg",     expectedResult: true,  message: "'oblique' followed by positive angle in degrees is valid" },
-            { style: "oblique 0.5rad",    expectedResult: true,  message: "'oblique' followed by positive angle in radians is valid" },
-            { style: "oblique 20grad",    expectedResult: true,  message: "'oblique' followed by positive angle in gradians is valid" },
-            { style: "oblique 0.1turn",   expectedResult: true,  message: "'oblique' followed by positive angle in turns is valid" },
-            { style: "oblique 20px",      expectedResult: false, message: "'oblique' followed by number with invalid unit type is in valid" },
-            { style: "oblique -20deg",    expectedResult: true,  message: "'oblique' followed by negative angle is valid" },
-            { style: "oblique 20.1deg",   expectedResult: true,  message: "'oblique' followed by fractional angle is valid" },
-            { style: "oblique 90deg",     expectedResult: true,  message: "'oblique' followed by maxumum 90 degree angle is valid" },
-            { style: "oblique -90deg",    expectedResult: true,  message: "'oblique' followed by minimum -90 degree angle is valid" },
-            { style: "oblique 90.01deg",  expectedResult: false, message: "'oblique' followed by positive out of range angle is in invalid" },
-            { style: "oblique -90.01deg", expectedResult: false, message: "'oblique' followed by negative out of range angle is in invalid" },
-            { style: "oblique 10",        expectedResult: false, message: "'oblique' followed by unit-less value is invalid" },
-            { style: "oblique 20deg ",    expectedResult: true,  message: "'oblique' followed by positive angle is valid" },
-            { style: "oblique a",         expectedResult: false, message: "'oblique' followed by non-number is invalid" },
-            { style: "oblique 20deg a",   expectedResult: false, message: "'oblique' and angle followed by non-number is invalid" },
-            { style: "oblique -",         expectedResult: false, message: "'oblique' followed by isolated minus is invalid" },
-            { style: "oblique - 20deg",   expectedResult: false, message: "'oblique' followed by minus and angle separated by space is invalid" },
-            { style: "oblique -a",        expectedResult: false, message: "'oblique' followed by minus and non-number is invalid" },
-            { style: "oblique calc(50deg)",     expectedResult: true,  message: "'oblique' followed by calc is valid" },
-            { style: "oblique calc(-120deg)",   expectedResult: true,  message: "'oblique' followed by calc is valid even if it must be clamped (no computation)" },
-            { style: "oblique calc(6 * 20deg)", expectedResult: true,  message: "'oblique' followed by calc is valid even if it must be clamped (with computation)" },
-            { style: "oblique calc(0.1rad + 1deg)", expectedResult: true,  message: "'oblique' followed by calc is valid even if it mixes units (with computation)" }
+            { style: "italic",                      expectedResult: true,   message: "'italic' is valid" },
+            { style: "italic 20deg",                expectedResult: false,  message: "'italic' followed by angle is invalid" },
+            { style: "italic a",                    expectedResult: false,  message: "'italic' followed by non-number is invalid" },
+            { style: "oblique",                     expectedResult: true,   message: "'oblique' is valid" },
+            { style: "oblique 0deg",                expectedResult: true,   message: "'oblique' followed by zero degrees is valid" },
+            { style: "oblique 20deg",               expectedResult: true,   message: "'oblique' followed by positive angle in degrees is valid" },
+            { style: "oblique 0.5rad",              expectedResult: true,   message: "'oblique' followed by positive angle in radians is valid",    expectedValue: "oblique 28.6479deg" },
+            { style: "oblique 20grad",              expectedResult: true,   message: "'oblique' followed by positive angle in gradians is valid",   expectedValue: "oblique 18deg" },
+            { style: "oblique 0.1turn",             expectedResult: true,   message: "'oblique' followed by positive angle in turns is valid",      expectedValue: "oblique 36deg" },
+            { style: "oblique 20px",                expectedResult: false,  message: "'oblique' followed by number with invalid unit type is in valid" },
+            { style: "oblique -20deg",              expectedResult: true,   message: "'oblique' followed by negative angle is valid" },
+            { style: "oblique 20.5deg",             expectedResult: true,   message: "'oblique' followed by fractional angle is valid" },
+            { style: "oblique 90deg",               expectedResult: true,   message: "'oblique' followed by maxumum 90 degree angle is valid" },
+            { style: "oblique -90deg",              expectedResult: true,   message: "'oblique' followed by minimum -90 degree angle is valid" },
+            { style: "oblique 90.01deg",            expectedResult: false,  message: "'oblique' followed by positive out of range angle is in invalid" },
+            { style: "oblique -90.01deg",           expectedResult: false,  message: "'oblique' followed by negative out of range angle is in invalid" },
+            { style: "oblique 10",                  expectedResult: false,  message: "'oblique' followed by unit-less value is invalid" },
+            { style: "oblique 30deg",               expectedResult: true,   message: "'oblique' followed by positive angle is valid" },
+            { style: "oblique a",                   expectedResult: false,  message: "'oblique' followed by non-number is invalid" },
+            { style: "oblique 20deg a",             expectedResult: false,  message: "'oblique' and angle followed by non-number is invalid" },
+            { style: "oblique -",                   expectedResult: false,  message: "'oblique' followed by isolated minus is invalid" },
+            { style: "oblique - 20deg",             expectedResult: false,  message: "'oblique' followed by minus and angle separated by space is invalid" },
+            { style: "oblique -a",                  expectedResult: false,  message: "'oblique' followed by minus and non-number is invalid" },
+            { style: "oblique calc(50deg)",         expectedResult: true,   message: "'oblique' followed by calc is valid",                         expectedValue: "oblique 50deg" },
+            { style: "oblique calc(-120deg)",       expectedResult: true,   message: "'oblique' followed by calc is valid even if it must be clamped (no computation)",     expectedValue: "oblique -90deg" },
+            { style: "oblique calc(6 * 20deg)",     expectedResult: true,   message: "'oblique' followed by calc is valid even if it must be clamped (with computation)",   expectedValue: "oblique 90deg" },
+            { style: "oblique calc(10grad + 5deg)", expectedResult: true,   message: "'oblique' followed by calc is valid even if it mixes units (with computation)",       expectedValue: "oblique 14deg" }
         ];
 
         testFontStyle.forEach(function (testCase) {
-            test(() => { assert_equals(window.CSS.supports("font-style", testCase.style), testCase.expectedResult, "Font-style: " + testCase.message); }, "Font-style: " + testCase.message);
+            test(() => {
+                assert_equals(window.CSS.supports("font-style", testCase.style), testCase.expectedResult, "Font-style supports: " + testCase.message);
+            }, "Font-style (supports): " + testCase.message);
         });
 
+        testFontStyle.forEach(function (testCase) {
+            if (testCase.expectedResult) {
+                test(() => {
+                    let element = document.getElementById("test");
+                    element.style = "font-style: " + testCase.style;
+                    let expectedValue = (testCase.expectedValue) ? testCase.expectedValue : testCase.style;
+                    assert_equals(window.getComputedStyle(element).fontStyle, expectedValue, "Font-style computed style: " + testCase.message);
+                }, "Font-style (computed): " + testCase.message);
+            }
+        });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file