mirror of
https://github.com/servo/servo.git
synced 2025-08-14 18:05:36 +01:00
Update web-platform-tests to revision 4a5223502fa660ce03e470af6a61c8bc26c5a8ee
This commit is contained in:
WPT Sync Bot
parent
c5f7c9ccf3
commit
e891345f26
1328 changed files with 36632 additions and 20588 deletions
|
|
@ -2,9 +2,10 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>CSS Test: font-variant in @font-face rule is overriden by equivalent style rules</title>
|
||||
<title>CSS Test: font-variant descriptor in @font-face rule is overriden by equivalent style rules</title>
|
||||
<link rel="author" title="Mike Bremford" href="mike@bfo.com" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-prop" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-rend-desc" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop" />
|
||||
<link rel="match" href="font-variant-05-ref.xht" />
|
||||
<meta name="assert" content="Setting ‘font-variant-ligatures’ properties will override the same properties set in the @font-face rule. But properties set there and not explicitly turned off or on later remain set." />
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>CSS Test: font-variant in @font-face rule is overriden by equivalent style rules</title>
|
||||
<title>CSS Test: font-variant descriptor in @font-face rule is overriden by equivalent style rules</title>
|
||||
<link rel="author" title="Mike Bremford" href="mike@bfo.com" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-prop" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-rend-desc" />
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#feature-precedence" />
|
||||
<link rel="match" href="font-variant-06-ref.xht" />
|
||||
<meta name="assert" content="‘font-variant-numeric’ cannot turn OFF features turned ON in @font-face" />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>CSS Test: font-variant: normal; low level equivalence</title>
|
||||
<link rel="author" title="Chris Lilley" href="chris@w3.org">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: fwf;
|
||||
src: url(support/fonts/FontWithFancyFeatures.otf);
|
||||
}
|
||||
.test {
|
||||
font-family: fwf;
|
||||
font-size: 2.4em;
|
||||
line-height: 1.1;
|
||||
color: purple;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<p>Test passes if the three lines below are identical, with (in purple) eight check marks (✓)</p>
|
||||
<section class="test">
|
||||
<p class="ref">AAAAAAAA</p>
|
||||
<p class="ref">AAAAAAAA</p>
|
||||
<p class="ref">AAAAAAAA</p>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>CSS Test: font-variant: normal; low level equivalence</title>
|
||||
<link rel="author" title="Chris Lilley" href="chris@w3.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-variant-prop">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-3/#font-rend-desc">
|
||||
<link rel="match" href="font-variant-descriptor-01-ref.html">
|
||||
<meta name="assert" content="These descriptors define initial settings that apply when the font defined by an @font-face rule is rendered">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: fwf;
|
||||
src: url(support/fonts/FontWithFancyFeatures.otf);
|
||||
}
|
||||
@font-face {
|
||||
font-family: fwf2;
|
||||
src: url(support/fonts/FontWithFancyFeatures.otf);
|
||||
font-variant: common-ligatures discretionary-ligatures historical-ligatures contextual oldstyle-nums small-caps jis90;
|
||||
}
|
||||
.test {
|
||||
font-family: fwf;
|
||||
font-size: 2.4em;
|
||||
line-height: 1.1;
|
||||
color: purple;
|
||||
}
|
||||
.property {
|
||||
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
|
||||
font-variant-numeric: oldstyle-nums;
|
||||
font-variant-caps: small-caps;
|
||||
font-variant-east-asian: jis90;
|
||||
}
|
||||
.test>p.descriptor {
|
||||
font-family: fwf2;
|
||||
}
|
||||
.child {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<p>Test passes if the three lines below are identical, with (in purple) eight check marks (✓)</p>
|
||||
<section class="test">
|
||||
<p class="descriptor">CDGFEJQa</p>
|
||||
<p class="property">CDGFEJQa</p>
|
||||
<p class="ref">AAAAAAAA</p>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing @font-face descriptor values introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-face-rule" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style id="testStyle">
|
||||
@font-face { font-family: Test; src: local('Courier New'), local('Courier'); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>@font-face descriptor tests</div>
|
||||
<script>
|
||||
|
||||
function updateFontFaceRule(descriptorName, descriptorValue) {
|
||||
let testRule = document.getElementById("testStyle").sheet.cssRules[0];
|
||||
|
||||
testRule.style.fontWeight = "normal";
|
||||
testRule.style.fontStyle = "normal";
|
||||
testRule.style.fontStretch = "normal";
|
||||
assert_equals(testRule.style.fontWeight, "normal", "Can't clear @font-face.");
|
||||
assert_equals(testRule.style.fontStyle, "normal", "Can't clear @font-face.");
|
||||
assert_equals(testRule.style.fontStretch, "normal", "Can't clear @font-face.");
|
||||
|
||||
testRule.style.fontWeight = "";
|
||||
testRule.style.fontStyle = "";
|
||||
testRule.style.fontStretch = "";
|
||||
assert_true(!testRule.style.fontWeight, "", "Can't clear @font-face.");
|
||||
assert_true(!testRule.style.fontStyle, "", "Can't clear @font-face.");
|
||||
assert_true(!testRule.style.fontStretch, "", "Can't clear @font-face.");
|
||||
|
||||
testRule.style[descriptorName] = descriptorValue;
|
||||
|
||||
return testRule;
|
||||
}
|
||||
|
||||
function testDescriptor(descriptorName, testCases) {
|
||||
var propertyName = { 'font-weight':'fontWeight', 'font-stretch':'fontStretch', 'font-style':'fontStyle' }[descriptorName];
|
||||
testCases.forEach(function (testCase) {
|
||||
test(() => {
|
||||
let rule = updateFontFaceRule(descriptorName, testCase.value);
|
||||
|
||||
if (testCase.isValid) {
|
||||
assert_not_equals(rule.style[propertyName], "", "Valid value should be accepted.");
|
||||
|
||||
let expectedValue = (testCase.expectedValue) ? testCase.expectedValue : testCase.value;
|
||||
assert_equals(rule.style[propertyName], expectedValue, "Unexpected resulting value.");
|
||||
}
|
||||
else {
|
||||
assert_equals(rule.style[propertyName], "", "No properties should be set.");
|
||||
}
|
||||
}, descriptorName + (testCase.isValid ? "(valid): " : "(invalid): ") + testCase.description + ": " + testCase.value);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
testDescriptor("font-weight", [
|
||||
// Single value, keyword
|
||||
{ value: "normal", isValid: true, description: "'normal' keyword" },
|
||||
{ value: "bold", isValid: true, description: "'bold' keyword" },
|
||||
{ value: "lighter", isValid: false, description: "'lighter' keyword iside @font-face" },
|
||||
{ value: "bolder", isValid: false, description: "'lighter' keyword iside @font-face" },
|
||||
{ value: "bold a", isValid: false, description: "Extra content after keyword" },
|
||||
|
||||
// Single value, number
|
||||
{ value: "401", isValid: true, description: "Values that are not multiple of 100 should be parsed successfully" },
|
||||
{ value: "400.1", isValid: true, description: "Non-integer values should be parsed successfully" },
|
||||
{ value: "1", isValid: true, description: "Minimum allowed value should be parsed successfully" },
|
||||
{ value: "0.999", isValid: false, description: "Values below minimum should be rejected" },
|
||||
{ value: "-100", isValid: false, description: "Values below zero should be rejected" },
|
||||
{ value: "1000", isValid: true, description: "Maximum allowed value should be parsed successfully" },
|
||||
{ value: "1000.001", isValid: false, description: "Values above maximum should be rejected" },
|
||||
{ value: "100 a", isValid: false, description: "Extra content after value" },
|
||||
|
||||
// Single value, calc
|
||||
{ value: "calc(100.5)", isValid: true, expectedValue: "100.5", description: "Simple calc value" },
|
||||
{ value: "calc(1001)", isValid: false, description: "Out-of-range simple calc value" },
|
||||
{ value: "calc(100.5*3 + 50.5)", isValid: true, expectedValue: "352", description: "Valid calc expression" },
|
||||
{ value: "calc(100.5*3 + 800)", isValid: false, description: "Valid calc expression with out-of-range value" },
|
||||
{ value: "calc(100.5px + 50.5px)", isValid: false, description: "Valid calc expression with units" },
|
||||
|
||||
// Value range
|
||||
{ value: "100 900", isValid: true, description: "Simple range" },
|
||||
{ value: "500 500", isValid: true, expectedValue: "500", description: "Simple range with equal upper and lower bounds" },
|
||||
{ value: "0.9 100", isValid: false, description: "Lower bound out of range" },
|
||||
{ value: "100 1001", isValid: false, description: "Upper bound out of range" },
|
||||
{ value: "calc(100 + 100) 400", isValid: true, expectedValue: "200 400", description: "Lower bound calc()" },
|
||||
{ value: "200 calc(200 + 200)", isValid: true, expectedValue: "200 400", description: "Upper bound calc()" },
|
||||
{ value: "calc(100 + 100) calc(200 + 200)", isValid: true, expectedValue: "200 400", description: "Both bounds are calc()" },
|
||||
{ value: "400 200", isValid: true, expectedValue: "200 400", description: "Bounds out of order are valid" },
|
||||
{ value: "100 200 300", isValid: false, description: "Extra content after upper bound" },
|
||||
]);
|
||||
|
||||
testDescriptor("font-stretch", [
|
||||
// Single value, keyword
|
||||
{ value: "ultra-condensed", isValid: true, description: "'ultra-condensed' keyword" },
|
||||
{ value: "extra-condensed", isValid: true, description: "'extra-condensed' keyword" },
|
||||
{ value: "condensed", isValid: true, description: "'condensed' keyword" },
|
||||
{ value: "semi-condensed", isValid: true, description: "'semi-condensed' keyword" },
|
||||
{ value: "normal", isValid: true, description: "'normal' keyword" },
|
||||
{ value: "semi-expanded", isValid: true, description: "'semi-expanded' keyword" },
|
||||
{ value: "expanded", isValid: true, description: "'expanded' keyword" },
|
||||
{ value: "extra-expanded", isValid: true, description: "'extra-expanded' keyword" },
|
||||
{ value: "ultra-expanded", isValid: true, description: "'ultra-expanded' keyword" },
|
||||
{ value: "expanded a", isValid: false, description: "Extra content after value" },
|
||||
|
||||
// Single value, number
|
||||
{ value: "1%", isValid: true, description:"Legal percentage" },
|
||||
{ value: "10.5%", isValid: true, description:"Legal percentage" },
|
||||
{ value: "100%", isValid: true, description:"Legal percentage" },
|
||||
{ value: "1000%", isValid: true, description:"Legal percentage" },
|
||||
{ value: "100", isValid: false, description:"Only percentages, not numbers allowed" },
|
||||
{ value: "-1%", isValid: false, description:"Negative values are illegal" },
|
||||
{ value: "0%", isValid: true, description:"Zero is legal" },
|
||||
{ value: "100% a", isValid: false, description:"Extra content after value" },
|
||||
|
||||
// Single value, calc
|
||||
{ value: "calc(200.5%)", isValid: true, expectedValue: "200.5%", description: "Simple calc value" },
|
||||
{ value: "calc(50%*2 - 20%)", isValid: true, expectedValue: "80%", description: "Valid calc expression" },
|
||||
{ value: "calc(-100%)", isValid: false, description: "Negative calc value" },
|
||||
{ value: "calc(50% - 50%*2)", isValid: false, description: "Negative calc expression" },
|
||||
{ value: "calc(100)", isValid: false, description: "Unit-less calc value" },
|
||||
{ value: "calc(100px)", isValid: false, description: "Calc value with units" },
|
||||
|
||||
// Value range
|
||||
{ value: "100% 200%", isValid: true, description: "Simple range" },
|
||||
{ value: "100% 100%", isValid: true, expectedValue: "100%", description: "Simple range with equal upper and lower bounds" },
|
||||
{ value: "-100% 100%", isValid: false, description: "Lower bound out of range" },
|
||||
{ value: "calc(10% + 10%) 30%", isValid: true, expectedValue: "20% 30%", description: "Lower bound calc()" },
|
||||
{ value: "10% calc(10% + 10%)", isValid: true, expectedValue: "10% 20%", description: "Upper bound calc()" },
|
||||
{ value: "calc(10% + 10%) calc(20% + 20%)", isValid: true, expectedValue: "20% 40%", description: "Both bounds are calc()" },
|
||||
{ value: "200% 100%", isValid: true, expectedValue: "100% 200%", description: "Bounds out of order" },
|
||||
{ value: "100% 200% 300%", isValid: false, description: "Extra content after upper bound" },
|
||||
]);
|
||||
|
||||
testDescriptor("font-style", [
|
||||
// Single value, keyword
|
||||
{ value: "normal", isValid: true, description: "'normal' keyword" },
|
||||
{ value: "italic", isValid: true, description: "'italic' keyword" },
|
||||
{ value: "oblique", isValid: true, description: "'oblique' keyword" },
|
||||
|
||||
// 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 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" },
|
||||
|
||||
// Value range
|
||||
{ value: "oblique 10deg 20deg", isValid: true, description: "Simple range" },
|
||||
{ value: "oblique 10deg 10deg", isValid: true, expectedValue: "oblique 10deg", description: "Simple range with equal upper and lower bounds" },
|
||||
{ value: "oblique 20deg 20deg", isValid: true, expectedValue: "oblique", description: "Simple range with default angle for both bounds" },
|
||||
{ value: "oblique 20deg 10deg", isValid: true, expectedValue: "oblique 10deg 20deg", description: "Bounds out of order" },
|
||||
{ value: "oblique -100deg 20deg", isValid: false, description: "Lower bound out of range" },
|
||||
{ value: "oblique 20deg 100deg", isValid: false, description: "Upper bound out of range" },
|
||||
{ value: "oblique 10deg 20deg 30deg", isValid: false, description: "Extra content after upper bound" },
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing @font-face font matching logic introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.test
|
||||
{
|
||||
float:left;
|
||||
border:1px solid red;
|
||||
font-size:24pt;
|
||||
white-space: nowrap;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
@font-face { font-family: W100; src: url('./resources/csstest-weights-100-kerned.ttf'); }
|
||||
@font-face { font-family: W200; src: url('./resources/csstest-weights-200-kerned.ttf'); }
|
||||
@font-face { font-family: W300; src: url('./resources/csstest-weights-300-kerned.ttf'); }
|
||||
|
||||
|
||||
@font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-100-kerned.ttf'); font-stretch : 125%; }
|
||||
@font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-200-kerned.ttf'); font-style: italic; }
|
||||
@font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-300-kerned.ttf'); font-weight: 350; }
|
||||
</style>
|
||||
<style id="dynamicStyles">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<span style="position: absolute; top: -100vh;">
|
||||
<span style="font-family: 'W100';">A</span>
|
||||
<span style="font-family: 'W200';">A</span>
|
||||
<span style="font-family: 'W300';">A</span>
|
||||
</span>
|
||||
|
||||
<div id="master" class="test">A1 A2 A2 A3 A3 A3</div>
|
||||
<div id="test" class="test">A1 A2 A2 A3 A3 A3</div>
|
||||
<div style="clear:both"></div>
|
||||
<script>
|
||||
|
||||
// wait for the fonts to load
|
||||
// -- this should not be necessary if the fonts are installed as required
|
||||
// -- but if they are not, the test is otherwise unstable
|
||||
var once_fonts_are_ready = (document.fonts ? document.fonts.ready : new Promise(function(ready) { window.onload = time => [...document.querySelectorAll('body > span:nth-child(1) > span')].every(e => e.offsetWidth > 20) ? ready() : requestAnimationFrame(window.onload) }));
|
||||
|
||||
var masterElement = document.getElementById("master");
|
||||
var testElement = document.getElementById("test");
|
||||
var dynamicStyles = document.getElementById("dynamicStyles");
|
||||
|
||||
function verifyFont(testFamily, testWeight, testStyle, testStretch, expectedFamily) {
|
||||
|
||||
testElement.style.fontWeight = "normal";
|
||||
testElement.style.fontStyle = "normal";
|
||||
testElement.style.fontStretch = "normal";
|
||||
|
||||
masterElement.style.fontFamily = expectedFamily;
|
||||
let masterWidth = masterElement.offsetWidth;
|
||||
|
||||
testElement.style.fontFamily = expectedFamily;
|
||||
assert_equals(masterWidth, testElement.offsetWidth, "Sanity test: same family name gets same width" + dynamicStyles.innerHTML);
|
||||
|
||||
testElement.style.fontFamily = "serif";
|
||||
assert_not_equals(masterWidth, testElement.offsetWidth, "Sanity test: different family get different width");
|
||||
|
||||
testElement.style.fontWeight = testWeight;
|
||||
testElement.style.fontStyle = testStyle;
|
||||
testElement.style.fontStretch = testStretch;
|
||||
testElement.style.fontFamily = testFamily;
|
||||
|
||||
assert_true(masterWidth == testElement.offsetWidth, "Unexpected font on test element");
|
||||
}
|
||||
|
||||
var descriptorPriorityCases = [
|
||||
{ weight: "normal", style: "oblique -5deg", stretch: "125%", expectedFamily: "'W100'", description: "Stretch has higher priority than style"},
|
||||
{ weight: "350", style: "normal", stretch: "125%", expectedFamily: "'W100'", description: "Stretch has higher priority than weight"},
|
||||
{ weight: "350", style: "oblique -5deg", stretch: "normal", expectedFamily: "'W200'", description: "Style has higher priority than weight"}
|
||||
];
|
||||
|
||||
descriptorPriorityCases.forEach(function (testCase) {
|
||||
promise_test(
|
||||
assert => once_fonts_are_ready.then(assert => {
|
||||
verifyFont("descriptorPriorityTest", testCase.weight, testCase.style, testCase.stretch, testCase.expectedFamily);
|
||||
}),
|
||||
"Descriptor mathcing priority: " + testCase.description
|
||||
);
|
||||
});
|
||||
|
||||
function createFontFaceRules(fontFaceFamily, descriptorName, expectedMatch, unexpectedMatch) {
|
||||
dynamicStyles.innerHTML =
|
||||
"@font-face { font-family: " + fontFaceFamily + "; src: url('./resources/csstest-weights-100-kerned.ttf'); "+ descriptorName + ": " + expectedMatch + "; }" +
|
||||
"@font-face { font-family: " + fontFaceFamily + "; src: url('./resources/csstest-weights-200-kerned.ttf'); " + descriptorName + ": " + unexpectedMatch + "; }";
|
||||
}
|
||||
|
||||
function testDescriptor(descriptorName, testCases) {
|
||||
testCases.forEach(function (testCase) {
|
||||
// Go though test cases, checking each descriptor has higher priority than next in the list
|
||||
for(let i = 0; i < testCase.testDescriptors.length - 1; i++) {
|
||||
let expectedMatch = testCase.testDescriptors[i];
|
||||
let unexpectedMatch = testCase.testDescriptors[i + 1];
|
||||
promise_test(
|
||||
assert => once_fonts_are_ready.then(assert => {
|
||||
createFontFaceRules("MatchTestFamily", descriptorName, expectedMatch, unexpectedMatch);
|
||||
|
||||
let testWeight = (descriptorName == "font-weight") ? testCase.value : "normal";
|
||||
let testStyle = (descriptorName == "font-style") ? testCase.value : "normal";
|
||||
let testStretch = (descriptorName == "font-stretch") ? testCase.value : "normal";
|
||||
|
||||
verifyFont("MatchTestFamily", testWeight, testStyle, testStretch, "'W100'");
|
||||
}),
|
||||
"Matching " + descriptorName + ": '" + testCase.value + "' should prefer '" + expectedMatch + "' over '" + unexpectedMatch + "'");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Each case defines property value being tested and set of descriptor values in order of matching priority from highest to lowest
|
||||
|
||||
testDescriptor("font-weight", [
|
||||
{ value: "400", testDescriptors: ["400", "450 460", "500", "350 399", "351 398", "501 550", "502 560"] },
|
||||
{ value: "430", testDescriptors: ["420 440", "450 460", "500", "400 425", "350 399", "340 398", "501 550", "502 560"] },
|
||||
{ value: "500", testDescriptors: ["500", "450 460", "400", "350 399", "351 398", "501 550", "502 560"] },
|
||||
{ value: "501", testDescriptors: ["501", "502 510", "503 520", "500", "450 460", "390 410", "300 350"] },
|
||||
{ value: "399", testDescriptors: ["350 399", "340 360", "200 300", "400", "450 460", "500 501", "502 510"] }
|
||||
]);
|
||||
|
||||
testDescriptor("font-stretch", [
|
||||
{ value: "100%", testDescriptors: ["100%", "110% 120%", "115% 116%"] },
|
||||
{ value: "110%", testDescriptors: ["110% 120%", "115% 116%", "105%", "100%", "50% 80%", "60% 70%"] },
|
||||
{ value: "90%", testDescriptors: ["90% 100%", "50% 80%", "60% 70%", "110% 140%", "120% 130%"] },
|
||||
]);
|
||||
|
||||
testDescriptor("font-style", [
|
||||
{ value: "normal", testDescriptors: ["normal", "oblique 0deg", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
|
||||
{ value: "italic", testDescriptors: ["italic", "oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 5deg 10deg", "oblique 5deg", "normal", "oblique 0deg", "oblique -60deg -30deg", "oblique -50deg -40deg" ] },
|
||||
{ value: "oblique 20deg", testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
|
||||
{ value: "oblique 21deg", testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
|
||||
{ value: "oblique 10deg", testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
|
||||
{ value: "oblique 0deg", testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
|
||||
{ value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "italic", "oblique 0deg 10deg", "oblique 40deg 50deg" ] },
|
||||
{ value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
|
||||
{ value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
|
||||
]);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing support for OpenType collections in @font-face rules</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#src-desc" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: OpenType;
|
||||
src: url(/fonts/Ahem.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: OpenType-Collection;
|
||||
src: url(./resources/ahem.ttc);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="test()">
|
||||
<div id="opentype" style="display:inline-block; font-family:OpenType,Georgia;">Test</div><br>
|
||||
<div id="collection" style="display:inline-block; font-family:OpenType-Collection,Verdana;">Test</div>
|
||||
<script>
|
||||
|
||||
var opentypeElement = document.getElementById("opentype");
|
||||
var collectionElement = document.getElementById("collection");
|
||||
|
||||
var loadTest = async_test("Verify that collection font is loaded");
|
||||
|
||||
function test() {
|
||||
if (opentypeElement.offsetWidth == collectionElement.offsetWidth) {
|
||||
loadTest.done();
|
||||
}
|
||||
else {
|
||||
window.requestAnimationFrame(test);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -20,6 +20,8 @@ var styleValidTests = {
|
|||
'850.3',
|
||||
'calc(100 + 300)',
|
||||
'calc(0.2 + 205.5)',
|
||||
'calc(0 - 100)',
|
||||
'calc(200 + 801)',
|
||||
],
|
||||
'stretch': ['51%', '199%', 'calc(10% + 20%)'],
|
||||
'style' : [ 'normal', 'italic', 'oblique', 'oblique 50deg', 'oblique -90deg', 'oblique 90deg',
|
||||
|
|
@ -27,7 +29,7 @@ var styleValidTests = {
|
|||
};
|
||||
|
||||
var styleInvalidTests = {
|
||||
'weight': ['100 400', 'calc(0 - 100)', 'calc(200 + 801)'],
|
||||
'weight': ['100 400'],
|
||||
'stretch': ['100% 110%', '0%', '100% 150%', 'calc(1 + 10%)'],
|
||||
'style' : [ 'normal 10deg', 'italic 10deg', 'oblique -91deg', 'oblique 91deg', 'oblique calc(90deg + 20deg)']
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing font shorthand for new values introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-prop" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="shorthand-test">Shorthand test</div>
|
||||
|
||||
<script>
|
||||
|
||||
testFontShorthand = [
|
||||
{ value: "calc(24px) Arial", isValid:true, message: "Font size specified as calc()" },
|
||||
|
||||
// font-weight as number
|
||||
{ value: "700.5 24px Arial", isValid:true, expectedWeight:"700.5", message: "Font weight specified as number" },
|
||||
{ value: "0.9 24px Arial", isValid:false, message: "Font weight specified as number, value less than 1" },
|
||||
{ value: "1700.5 24px Arial", isValid:false, message: "Font weight specified as number, value greater than 1000" },
|
||||
|
||||
// font-weight as calc()
|
||||
{ value: "calc(900.7 - 200.1 * 2) calc(12px + 12px) Arial", isValid:true, expectedWeight:"500.5", message: "Font weight specified as calc()" },
|
||||
{ value: "calc(400.5 - 200.1 * 2) 24px Arial", isValid:true, expectedWeight:"1", message: "Font weight specified as calc(), value smaller than 1" },
|
||||
{ value: "calc(400.5 + 300.1 * 2) 24px Arial", isValid:true, expectedWeight:"1000", message: "Font weight specified as calc(), value greater than 1000" },
|
||||
|
||||
// font-style
|
||||
{ value: "oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", message: "'oblique' with positive angle" },
|
||||
{ value: "oblique -45deg 24px Arial", isValid:true, expectedStyle: "oblique -45deg", message: "'oblique' with negative angle" },
|
||||
{ value: "oblique 24px Arial", isValid:true, expectedStyle: "oblique", message: "'oblique' without slant angle" },
|
||||
{ value: "oblique 100deg 24px Arial", isValid:false, message: "'oblique' with positive angle, value out of range" },
|
||||
{ value: "oblique -100deg 24px Arial", isValid:false, message: "'oblique' with negative angle, value out of range" },
|
||||
|
||||
// font-weight and font-style combined
|
||||
{ value: "oblique 50 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"50", message: "'oblique' followed by valid small weight" },
|
||||
{ value: "oblique 500 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid large weight" },
|
||||
{ value: "oblique 45deg 500 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "'oblique' with positive angle followed by valid weight" },
|
||||
{ value: "oblique -45deg 500 24px Arial", isValid:true, expectedStyle: "oblique -45deg", expectedWeight:"500", message: "'oblique' with negative angle followed by valid weight" },
|
||||
|
||||
// font-weight and font-style combined, with calc()
|
||||
{ value: "oblique calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "'oblique' followed by valid calc() weight" },
|
||||
{ value: "oblique 30deg calc(200 + 300) 24px Arial", isValid:true, expectedStyle: "oblique 30deg", expectedWeight:"500", message: "'oblique' with angle followed by valid calc() weight" },
|
||||
{ value: "oblique calc(900 + 300) 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"1000", message: "'oblique' followed by a to-be-clamped calc() weight" },
|
||||
{ value: "calc(200 + 300) oblique 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"500", message: "calc() weight folowed by 'oblique'" },
|
||||
{ value: "calc(200 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique 45deg", expectedWeight:"500", message: "calc() weight folowed by 'oblique' and slant angle" },
|
||||
{ value: "calc(900 + 300) oblique 45deg 24px Arial", isValid:true, expectedStyle: "oblique", expectedWeight:"1000", message: "To-be-clamped calc() weight folowed by 'oblique' and slant angle" },
|
||||
];
|
||||
|
||||
testFontShorthand.forEach(function (testCase) {
|
||||
test(() => {
|
||||
assert_equals(window.CSS.supports("font", testCase.value), testCase.isValid, "Font shorthand: " + testCase.message);
|
||||
|
||||
let expectedStyle = (testCase.expectedStyle) ? testCase.expectedStyle : "normal";
|
||||
let expectedWeight = (testCase.expectedWeight) ? testCase.expectedWeight : "400";
|
||||
let expectedSize = (testCase.isValid) ? "24px" : "16px";
|
||||
|
||||
var testElement = document.getElementById("shorthand-test");
|
||||
testElement.setAttribute("style", "font:" + testCase.value);
|
||||
var style = window.getComputedStyle(testElement);
|
||||
assert_equals(style.fontStyle, expectedStyle, "Font shorthand expected style: " + testCase.message);
|
||||
assert_equals(style.fontWeight, expectedWeight, "Font shorthand expected weight: " + testCase.message);
|
||||
assert_equals(style.fontSize, expectedSize, "Font shorthand expected size: " + testCase.message);
|
||||
}, "Font shorthand: " + testCase.message);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing new font-stretch values introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-stretch-prop" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="computedStyleTest">Abc</span></div>
|
||||
<div id="inheritanceTest"><span style="font-stretch:125%;">Abc</span><span style="font-stretch:expanded;">Abc</span><span style="font-weight: 700;">Abc</span></div>
|
||||
<script>
|
||||
|
||||
testStretchValues = [
|
||||
{ stretch: "100", expectedComputedStretch: "100%" , expectedIsSupported: false, message: "only percentages, not numbers allowed" },
|
||||
{ stretch: "-1%", expectedComputedStretch: "" , expectedIsSupported: false, message: "negative values are illegal" },
|
||||
{ stretch: "0%", expectedComputedStretch: "0%", expectedIsSupported: true, message: "zero is legal" },
|
||||
{ stretch: "1%", expectedComputedStretch: "1%", expectedIsSupported: true, message: "legal percentage" },
|
||||
{ stretch: "10%", expectedComputedStretch: "10%", expectedIsSupported: true, message: "legal percentage" },
|
||||
{ stretch: "100%", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal percentage" },
|
||||
{ stretch: "1000%", expectedComputedStretch: "1000%", expectedIsSupported: true, message: "legal percentage" },
|
||||
{ stretch: "1e9%", expectedComputedStretch: "1e+009%", expectedIsSupported: true, message: "huge legal percentage" },
|
||||
{ stretch: "ultra-condensed", expectedComputedStretch: "50%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "extra-condensed", expectedComputedStretch: "62.5%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "condensed", expectedComputedStretch: "75%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "semi-condensed", expectedComputedStretch: "87.5%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "normal", expectedComputedStretch: "100%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "semi-expanded", expectedComputedStretch: "112.5%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "expanded", expectedComputedStretch: "125%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "extra-expanded", expectedComputedStretch: "150%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "ultra-expanded", expectedComputedStretch: "200%", expectedIsSupported: true, message: "legal enum" },
|
||||
{ stretch: "narrower", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" },
|
||||
{ stretch: "wider", expectedComputedStretch: "", expectedIsSupported: false, message: "deprecated" },
|
||||
{ stretch: "calc(200.5%)", expectedComputedStretch: "200.5%", expectedIsSupported: true, message: "Simple calc value" },
|
||||
{ stretch: "calc(50%*2 - 20%)", expectedComputedStretch: "80%", expectedIsSupported: true, message: "Valid calc expression" },
|
||||
{ stretch: "calc(-100%)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc value (to be clamped)" },
|
||||
{ stretch: "calc(50% - 50%*2)", expectedComputedStretch: "0%", expectedIsSupported: true, message: "Negative calc expression (to be clamped)" },
|
||||
{ stretch: "calc(100)", expectedComputedStretch: "", expectedIsSupported: false, message: "Unit-less calc value" },
|
||||
{ stretch: "calc(100px)", expectedComputedStretch: "", expectedIsSupported: false, message: "Calc value with units" },
|
||||
{ stretch: "100% 700%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra percentage after numeric value" },
|
||||
{ stretch: "100% 100", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after numeric value" },
|
||||
{ stretch: "condensed expanded",expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after keyword value" },
|
||||
{ stretch: "calc(100%) 100%", expectedComputedStretch: "", expectedIsSupported: false, message: "Extra content after calc value" }
|
||||
];
|
||||
|
||||
testStretchValues.forEach(function (element) {
|
||||
test(() => { assert_equals(window.CSS.supports("font-stretch", element.stretch), element.expectedIsSupported, element.message); }, "@supports: " + element.stretch + " - " + element.message);
|
||||
|
||||
// If supported, verify the computed style.
|
||||
if (element.expectedIsSupported)
|
||||
{
|
||||
var testSpan = document.getElementById("computedStyleTest");
|
||||
testSpan.style.fontStretch = element.stretch;
|
||||
var actualStretch = window.getComputedStyle(testSpan).fontStretch;
|
||||
|
||||
test(() => { assert_equals(actualStretch, element.expectedComputedStretch, element.message); }, "@getComputedStyle: " + element.stretch + " - " + element.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Verify computed inheritance of nested elements.
|
||||
{
|
||||
var base = document.getElementById("inheritanceTest");
|
||||
var parentStretch = "condensed";
|
||||
base.style.fontStretch = parentStretch;
|
||||
|
||||
test(() => {
|
||||
var actualStretch = window.getComputedStyle(base.children[0]).fontStretch;
|
||||
assert_equals(actualStretch, "125%", "Overridden value for " + parentStretch + " should match expected value.");
|
||||
}, "Test font-stretch for overridden number " + parentStretch);
|
||||
|
||||
test(() => {
|
||||
var actualStretch = window.getComputedStyle(base.children[1]).fontStretch;
|
||||
assert_equals(actualStretch, "125%", "Inherited value " + parentStretch + " should match expected value.");
|
||||
}, "Test font-stretch for overridden enum name resolved to number " + parentStretch);
|
||||
|
||||
test(() => {
|
||||
var actualStretch = window.getComputedStyle(base.children[2]).fontStretch;
|
||||
assert_equals(actualStretch, "75%", "Inherited value " + parentStretch + " should match expected value.");
|
||||
}, "Test font-stretch for inherited named enum resolved to number " + parentStretch);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing the interpolation of 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>
|
||||
<style>
|
||||
@keyframes fontStyleAnimation {
|
||||
from { font-style: oblique -12deg; }
|
||||
to { font-style: oblique 12deg; }
|
||||
}
|
||||
|
||||
#animation-test.animate {
|
||||
animation: fontStyleAnimation 1s infinite alternate;
|
||||
}
|
||||
|
||||
#transition-test {
|
||||
font-style: oblique -12deg;
|
||||
transition-property: font-style;
|
||||
transition-duration: 10s;
|
||||
}
|
||||
|
||||
#transition-test.animate {
|
||||
font-style: oblique 12deg;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="font-family: serif;">
|
||||
<div id="animation-test">Animation test</div>
|
||||
<div id="transition-test">Transition test</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
async_test(function (test) {
|
||||
var animationElement = document.getElementById("animation-test");
|
||||
|
||||
// Verify starting value
|
||||
assert_equals(window.getComputedStyle(animationElement).fontStyle, "normal", "Font style before animation");
|
||||
|
||||
// Start animation
|
||||
animationElement.classList.add("animate");
|
||||
|
||||
var waitForAnimationStep = test.step_func(function() {
|
||||
var computedFontStyle = window.getComputedStyle(animationElement).fontStyle;
|
||||
if (computedFontStyle != "normal" &&
|
||||
computedFontStyle != "oblique -12deg" &&
|
||||
computedFontStyle != "oblique 12deg") {
|
||||
test.done();
|
||||
}
|
||||
else {
|
||||
window.requestAnimationFrame(waitForAnimationStep);
|
||||
}
|
||||
});
|
||||
waitForAnimationStep();
|
||||
|
||||
}, "font-style animation");
|
||||
|
||||
async_test(function (test) {
|
||||
var transitionElement = document.getElementById("transition-test");
|
||||
|
||||
// Verify starting value
|
||||
assert_equals(window.getComputedStyle(transitionElement).fontStyle, "oblique -12deg", "Font style before transition");
|
||||
|
||||
// Start transition
|
||||
transitionElement.classList.add("animate");
|
||||
|
||||
var waitForTransitionStep = test.step_func(function() {
|
||||
var computedFontStyle = window.getComputedStyle(transitionElement).fontStyle;
|
||||
if (computedFontStyle != "normal" &&
|
||||
computedFontStyle != "oblique -12deg" &&
|
||||
computedFontStyle != "oblique 12deg") {
|
||||
test.done();
|
||||
}
|
||||
else {
|
||||
window.requestAnimationFrame(waitForTransitionStep);
|
||||
}
|
||||
});
|
||||
waitForTransitionStep();
|
||||
|
||||
}, "font-style transition");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<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>
|
||||
|
||||
<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)" }
|
||||
];
|
||||
|
||||
testFontStyle.forEach(function (testCase) {
|
||||
test(() => { assert_equals(window.CSS.supports("font-style", testCase.style), testCase.expectedResult, "Font-style: " + testCase.message); }, "Font-style: " + testCase.message);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing the inheritance of the font-variation-settings property</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variation-settings" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="inheritanceTestParent" style="font-variation-settings: 'xxxx' 1, 'xxxx' 2;">
|
||||
<span id="inheritanceTestChildInherited">Abc</span>
|
||||
<span id="inheritanceTestChildOverride" style="font-variation-settings: 'cccc' 1, 'bbbb' 2, 'aaaa' 3, 'aaaa' calc(2 + 2);">Abc</span>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
// Verify computed inheritance of nested elements.
|
||||
var elementParent = document.getElementById("inheritanceTestParent");
|
||||
var elementChildInherited = document.getElementById("inheritanceTestChildInherited");
|
||||
var elementChildOverride = document.getElementById("inheritanceTestChildOverride");
|
||||
|
||||
var parentValue = "'yyyy' 1, 'yyyy' 2";
|
||||
elementParent.style.fontVariationSettings = parentValue;
|
||||
|
||||
test(() => {
|
||||
var actualValue = window.getComputedStyle(elementParent).fontVariationSettings;
|
||||
// The following strict test is subject to debate; softening for now:
|
||||
// assert_equals(actualValue, "\"yyyy\" 2", "Duplicate axis tags should be removed, favoring the latter axis tag's value.");
|
||||
assert_equals((/.*(?:"|')yyyy(?:"|') (\d)/.exec(actualValue)||[])[1], '2', "Child should override parent value.");
|
||||
}, "Test font-variation-settings for duplicates using " + parentValue);
|
||||
|
||||
test(() => {
|
||||
var actualValue = window.getComputedStyle(elementChildInherited).fontVariationSettings;
|
||||
// The following strict test is subject to debate; softening for now:
|
||||
// assert_equals(actualValue, "\"yyyy\" 2", "Child should inherit the parent value directly.");
|
||||
assert_equals((/.*(?:"|')yyyy(?:"|') (\d)/.exec(actualValue)||[])[1], '2', "Child should override parent value.");
|
||||
}, "Test font-variation-settings for child inheritance");
|
||||
|
||||
test(() => {
|
||||
var actualValue = window.getComputedStyle(elementChildOverride).fontVariationSettings;
|
||||
// The following strict test is subject to debate; softening for now:
|
||||
// assert_equals(actualValue, "\"aaaa\" 4, \"bbbb\" 2, \"cccc\" 1", "Child should override parent value.");
|
||||
assert_equals((/.*(?:"|')aaaa(?:"|') (\d)/.exec(actualValue)||[])[1], '4', "Child should override parent value.");
|
||||
assert_equals((/.*(?:"|')yyyy(?:"|') (\d)/.exec(actualValue)||[])[1], undefined, "Child should override parent value.");
|
||||
}, "Test font-variation-settings for child override");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing the parsing of the font-variation-settings property</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-variation-settings" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="value-parser-test"></div>
|
||||
<script>
|
||||
|
||||
var valueParserTests = [
|
||||
{ value: "'wght' 1000, '9 ~A' -45", expectedComputedValue: "\"wght\" 1000, \"9 ~A\" -45", isValid: true, message: "Axis tag with valid non-letter ascii characters" },
|
||||
{ value: "'\u001Fbdc' 123", expectedComputedValue: "", isValid: false, message: "Invalid character below allowed range (first char)"},
|
||||
{ value: "'abc\u007F' 123", expectedComputedValue: "", isValid: false, message: "Invalid character above allowed range (mid char)"},
|
||||
{ value: "'wght' 1e3, 'slnt' -450.0e-1 ", expectedComputedValue: "\"wght\" 1000, \"slnt\" -45", isValid: true, message: "Axis values in scientific form are valid" },
|
||||
{ value: "normal", expectedComputedValue: "normal", isValid: true, message: "'normal' value is valid" },
|
||||
{ value: "'a' 1234", expectedComputedValue: "", isValid: false, message: "Tag with less than 4 characters is invalid"},
|
||||
{ value: "'abcde' 1234", expectedComputedValue: "", isValid: false, message: "Tag with more than 4 characters is invalid"},
|
||||
{ value: "'wght' 200, ", expectedComputedValue: "", isValid: false, message: "Trailing comma is invalid"},
|
||||
{ value: "abcd 123", expectedComputedValue: "", isValid: false, message: "Unquoted tags are invalid"},
|
||||
{ value: "'abcd\" 123", expectedComputedValue: "", isValid: false, message: "Unmatched quotes around tag are invalid" },
|
||||
{ value: "'abcd'", expectedComputedValue: "", isValid: false, message: "Tag without value isinvalid"},
|
||||
{ value: "123", expectedComputedValue: "", isValid: false, message: "Value without tag is invalid"},
|
||||
{ value: "123 'abcd'", expectedComputedValue: "", isValid: false, message: "Value before tag is invalid"},
|
||||
{ value: "'wght' 200 'abcd' 400", expectedComputedValue: "", isValid: false, message: "Missing comma between axes is invalid"},
|
||||
{ value: "'wght' calc(100 + 200)", expectedComputedValue: "\"wght\" 300", isValid: true, message: "Calculations should be supported" },
|
||||
{ value: "'wght' 100px", expectedComputedValue: "", isValid: false, message: "Units should not be supported" },
|
||||
{ value: "'wght' calc(100px + 200px)", expectedComputedValue: "", isValid: false, message: "Units should not be supported (in calc)" },
|
||||
{ value: "'wght' 42%", expectedComputedValue: "", isValid: false, message: "Percentages should not be supported" },
|
||||
{ value: "'wght' calc(100%)", expectedComputedValue: "", isValid: false, message: "Percentages should not be supported (in calc)" },
|
||||
];
|
||||
|
||||
valueParserTests.forEach(function (testCase) {
|
||||
test(() => {
|
||||
var element = document.getElementById("value-parser-test");
|
||||
// Reset to empty in order for testing to continue in case the next test would not parse as valid
|
||||
element.style.fontVariationSettings = "";
|
||||
element.style.fontVariationSettings = testCase.value;
|
||||
var computed = window.getComputedStyle(element).fontVariationSettings;
|
||||
if (testCase.isValid) {
|
||||
assert_equals(computed, testCase.expectedComputedValue, testCase.message);
|
||||
}
|
||||
else {
|
||||
assert_equals(computed, "normal", testCase.message);
|
||||
}
|
||||
|
||||
element.style.fontVariationSettings = "";
|
||||
}, "Property value: " + testCase.message);
|
||||
});
|
||||
|
||||
valueParserTests.forEach(function (testCase) {
|
||||
test(() => { assert_equals(window.CSS.supports("font-variation-settings", testCase.value), testCase.isValid, testCase.message); }, "@supports: " + testCase.message);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing the interpolation of new font-weight values introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@keyframes fontWeightAnimation {
|
||||
from { font-weight: 100; }
|
||||
to { font-weight: 900; }
|
||||
}
|
||||
|
||||
#animation-test.animate {
|
||||
animation: fontWeightAnimation 1s infinite alternate;
|
||||
}
|
||||
|
||||
#transition-test {
|
||||
font-weight: 100;
|
||||
transition-property: font-weight;
|
||||
transition-duration: 10s;
|
||||
}
|
||||
|
||||
#transition-test.animate {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="font-family: 'CSSTest Weights Full';">
|
||||
<div id="animation-test">A</div>
|
||||
<div id="transition-test">A</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
async_test(function (test) {
|
||||
var animationElement = document.getElementById("animation-test");
|
||||
|
||||
// Verify starting value
|
||||
assert_equals(window.getComputedStyle(animationElement).fontWeight, "400", "Font weight before animation");
|
||||
|
||||
// Start animation
|
||||
animationElement.classList.add("animate");
|
||||
|
||||
var waitForAnimationStep = test.step_func(function() {
|
||||
var computedFontWeight = window.getComputedStyle(animationElement).fontWeight;
|
||||
if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100
|
||||
test.done();
|
||||
}
|
||||
else {
|
||||
window.requestAnimationFrame(waitForAnimationStep);
|
||||
}
|
||||
});
|
||||
waitForAnimationStep();
|
||||
|
||||
}, "font-weight animation");
|
||||
|
||||
async_test(function (test) {
|
||||
var transitionElement = document.getElementById("transition-test");
|
||||
|
||||
// Verify starting value
|
||||
assert_equals(window.getComputedStyle(transitionElement).fontWeight, "100", "Font weight before transition");
|
||||
|
||||
// Start transition
|
||||
transitionElement.classList.add("animate");
|
||||
|
||||
var waitForTransitionStep = test.step_func(function() {
|
||||
var computedFontWeight = window.getComputedStyle(transitionElement).fontWeight;
|
||||
if (computedFontWeight[1] != "0" || computedFontWeight[2] != 0) { // the value should eventually not be a multiple of 100
|
||||
test.done();
|
||||
}
|
||||
else {
|
||||
window.requestAnimationFrame(waitForTransitionStep);
|
||||
}
|
||||
});
|
||||
waitForTransitionStep();
|
||||
|
||||
}, "font-weight transition");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing new font-weight lighter/bolder table introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="testcases">
|
||||
<div class="testcase" style="font-family: 'CSSTest Weights Full';">
|
||||
<span style="font-weight:lighter;color:red;">A</span>A<span style="font-weight:bolder;color:red;">A</span>
|
||||
<span style="font: menu; font-size: 10px;">(default)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
testRelativeWeights = [
|
||||
{ baseWeight: 99, lighter: "99", bolder: "400" },
|
||||
{ baseWeight: 100, lighter: "100", bolder: "400" },
|
||||
{ baseWeight: 349, lighter: "100", bolder: "400" },
|
||||
{ baseWeight: 350, lighter: "100", bolder: "700" },
|
||||
{ baseWeight: 549, lighter: "100", bolder: "700" },
|
||||
{ baseWeight: 550, lighter: "400", bolder: "900" },
|
||||
{ baseWeight: 749, lighter: "400", bolder: "900" },
|
||||
{ baseWeight: 750, lighter: "700", bolder: "900" },
|
||||
{ baseWeight: 899, lighter: "700", bolder: "900" },
|
||||
{ baseWeight: 900, lighter: "700", bolder: "900" },
|
||||
{ baseWeight: 901, lighter: "700", bolder: "901" },
|
||||
];
|
||||
|
||||
var testcases = document.getElementById("testcases");
|
||||
var testcase_template = testcases.firstElementChild; testcases.removeChild(testcase_template);
|
||||
testRelativeWeights.forEach(function(element) {
|
||||
|
||||
var base = testcase_template.cloneNode(true);
|
||||
base.children[2].textContent = element.baseWeight;
|
||||
base.style.fontWeight = element.baseWeight;
|
||||
testcases.appendChild(base);
|
||||
|
||||
test(() => {
|
||||
var actualLighter = window.getComputedStyle(base.children[0]).fontWeight;
|
||||
assert_equals(actualLighter, element.lighter, "Lighter value for " + element.baseWeight + " should match expected value.");
|
||||
base.children[0].style.color = 'green';
|
||||
}, "Test lighter font-weight for base weight " + element.baseWeight);
|
||||
|
||||
test(() => {
|
||||
var actualBolder = window.getComputedStyle(base.children[1]).fontWeight;
|
||||
assert_equals(actualBolder, element.bolder, "Bolder value " + element.baseWeight + " should match expected value.");
|
||||
base.children[1].style.color = 'green';
|
||||
}, "Test bolder font-weight for base weight " + element.baseWeight);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing new font-matching algorithm for font-weight values introduced in CSS Fonts level 4 (for system fonts)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<!-- THIS TEST REQUIRES THAT YOU INSTALL THE [csstest-*.ttf] FONTS OF THE [resources] FOLDER -->
|
||||
<meta name="flags" content="font" />
|
||||
<style>
|
||||
|
||||
.testcase {
|
||||
float:left;
|
||||
margin: 5px;
|
||||
font-size:48pt;
|
||||
font-feature-settings: "kern" 1;
|
||||
color: rgba(0,0,0,0.5);
|
||||
background: linear-gradient(to left, lime 0%, lime 91px, red 91px);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 900');
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 800');
|
||||
font-weight: 250;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 700');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 600');
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 300');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 200');
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 100');
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<span style="position: absolute; top: -100vh;">
|
||||
<span style="font-family: fontMatch; font-weight: 100;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 250;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 400;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 450;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 500;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 750;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 900;">A</span>
|
||||
</span>
|
||||
|
||||
<div id="testcases" style="overflow: hidden">
|
||||
<!--
|
||||
These testcases work using the new kerned CSSTest Weights fonts.
|
||||
The letter A and its corresponding numeric digit kern as one character.
|
||||
-->
|
||||
<div class="testcase" style="font-family:'CSSTest Weights W2569'; font-weight: 375;">
|
||||
A2
|
||||
</div>
|
||||
<div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 375;">
|
||||
A3
|
||||
</div>
|
||||
<div class="testcase" style="font-family:'CSSTest Weights W1479'; font-weight: 475;">
|
||||
A4
|
||||
</div>
|
||||
<div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 425;">
|
||||
A5
|
||||
</div>
|
||||
<div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 525;">
|
||||
A6
|
||||
</div>
|
||||
<div class="testcase" style="font-family:'CSSTest Weights Full'; font-weight: 675;">
|
||||
A7
|
||||
</div>
|
||||
<br clear="all">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var base_testcases = document.querySelectorAll('.testcase');
|
||||
for(var i = 0; i < base_testcases.length; i++) {
|
||||
test(
|
||||
assert => { assert_approx_equals(base_testcases[i].getBoundingClientRect().width, 90, 2, "@font-face should be mapped to " + base_testcases[i].style.fontFamily + "."); },
|
||||
"Test native font matching on " + base_testcases[i].style.fontFamily + " for weight " + base_testcases[i].style.fontWeight
|
||||
);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing new font-matching algorithm for font-weight values introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
|
||||
.testcase {
|
||||
float:left;
|
||||
margin: 5px;
|
||||
font-size:48pt;
|
||||
font-feature-settings: "kern" 1;
|
||||
color: rgba(0,0,0,0.5);
|
||||
background: linear-gradient(to left, lime 0%, lime 91px, red 91px);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 900'), url('./resources/csstest-weights-900-kerned.ttf');
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 800'), url('./resources/csstest-weights-800-kerned.ttf');
|
||||
font-weight: 250;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 700'), url('./resources/csstest-weights-700-kerned.ttf');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 600'), url('./resources/csstest-weights-600-kerned.ttf');
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 300'), url('./resources/csstest-weights-300-kerned.ttf');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 200'), url('./resources/csstest-weights-200-kerned.ttf');
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: fontMatch;
|
||||
src: local('CSSTest Weights 100'), url('./resources/csstest-weights-100-kerned.ttf');
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<span style="position: absolute; top: -100vh;">
|
||||
<span style="font-family: fontMatch; font-weight: 100;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 250;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 400;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 450;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 500;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 750;">A</span>
|
||||
<span style="font-family: fontMatch; font-weight: 900;">A</span>
|
||||
</span>
|
||||
|
||||
<div id="testcases" style="overflow: hidden">
|
||||
<!--
|
||||
These testcases work using the new kerned CSSTest Weights fonts.
|
||||
The letter A and its corresponding numeric digit kern as one character.
|
||||
-->
|
||||
<div class="testcase" style="font-family:'CSSTest Weights W2569'; font-weight: 375;">
|
||||
A2
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
var testFontFaceMatch = [
|
||||
{ weight: 99, expectedFont: "CSSTest Weights 900" },
|
||||
{ weight: 100, expectedFont: "CSSTest Weights 900" },
|
||||
{ weight: 249, expectedFont: "CSSTest Weights 900" },
|
||||
{ weight: 250, expectedFont: "CSSTest Weights 800" },
|
||||
{ weight: 399, expectedFont: "CSSTest Weights 800" },
|
||||
{ weight: 400, expectedFont: "CSSTest Weights 700" },
|
||||
{ weight: 420, expectedFont: "CSSTest Weights 600" },
|
||||
{ weight: 470, expectedFont: "CSSTest Weights 300" },
|
||||
{ weight: 500, expectedFont: "CSSTest Weights 300" },
|
||||
{ weight: 600, expectedFont: "CSSTest Weights 200" },
|
||||
{ weight: 750, expectedFont: "CSSTest Weights 200" },
|
||||
{ weight: 751, expectedFont: "CSSTest Weights 100" },
|
||||
{ weight: 900, expectedFont: "CSSTest Weights 100" },
|
||||
{ weight:1000, expectedFont: "CSSTest Weights 100" },
|
||||
];
|
||||
|
||||
// wait for the fonts to load
|
||||
// -- this should not be necessary if the fonts are installed as required
|
||||
// -- but if they are not, the test is otherwise unstable
|
||||
var once_fonts_are_ready = (document.fonts ? document.fonts.ready : new Promise(function(ready) { window.onload = time => [...document.querySelectorAll('body > span:nth-child(1) > span')].every(e => e.offsetWidth > 20) ? ready() : requestAnimationFrame(window.onload) }));
|
||||
|
||||
var testcases = document.querySelector("#testcases");
|
||||
var testcaseTemplate = document.querySelector('.testcase'); testcaseTemplate.remove();
|
||||
testFontFaceMatch.forEach(function(element) {
|
||||
|
||||
var testcase = testcaseTemplate.cloneNode(true);
|
||||
|
||||
// setup the test case style
|
||||
testcase.style.fontFamily = 'fontMatch';
|
||||
testcase.style.fontWeight = element.weight;
|
||||
|
||||
// create the assertion
|
||||
var assertText = 'A' + /\d/.exec(element.expectedFont)[0];
|
||||
testcase.textContent = assertText;
|
||||
|
||||
// append the testcase
|
||||
testcases.appendChild(testcase);
|
||||
|
||||
// verify the testcase
|
||||
promise_test(
|
||||
assert => once_fonts_are_ready.then(assert => { assert_approx_equals(testcase.getBoundingClientRect().width, 90, 2, "@font-face should be mapped to " + element.expectedFont + "."); }),
|
||||
"Test @font-face matching for weight " + element.weight
|
||||
);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Testing the new font-weight values introduced in CSS Fonts level 4</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-weight-prop" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="computedStyleTest">A</div>
|
||||
|
||||
<script>
|
||||
|
||||
var testContinuousWeights = [
|
||||
{ weight: "401", isValid: true, message: "Values that are not multiple of 100 should be parsed successfully" },
|
||||
{ weight: "400.5", isValid: true, message: "Non-integer Values should be parsed successfully" },
|
||||
{ weight: "1", isValid: true, message: "Minimum allowed value should be parsed successfully" },
|
||||
{ weight: "0.999", isValid: false, message: "Values below minimum should be rejected" },
|
||||
{ weight: "-100", isValid: false, message: "Values below zero should be rejected" },
|
||||
{ weight: "1000", isValid: true, message: "Maximum allowed value should be parsed successfully" },
|
||||
{ weight: "1000.001", isValid: false, message: "Values above maximum should be rejected" },
|
||||
{ weight: "calc(100.5)", isValid: true, expectedWeight: "100.5", message: "Simple calc value" },
|
||||
{ weight: "calc(-100)", isValid: true, expectedWeight: "1", message: "Negative simple calc value (to be clamped)" },
|
||||
{ weight: "calc(1001)", isValid: true, expectedWeight: "1000", message: "Out-of-range simple calc value (to be clamped)" },
|
||||
{ weight: "calc(100.5*3 + 50.5)", isValid: true, expectedWeight: "352", message: "Valid calc expression" },
|
||||
{ weight: "calc(100.5*3 + 800)", isValid: true, expectedWeight: "1000", message: "Valid calc expression with out-of-range value (to be clamped)" },
|
||||
{ weight: "calc(100.5px + 50.5px)", isValid: false, message: "Valid calc expression with units" },
|
||||
{ weight: "400 700", isValid: false, message: "Extra number after numeric value" },
|
||||
{ weight: "400 10px", isValid: false, message: "Extra content after numeric value" },
|
||||
{ weight: "bold 400", isValid: false, message: "Extra content after keyword value" },
|
||||
{ weight: "calc(100.5) 400", isValid: false, message: "Extra content after calc value" }
|
||||
];
|
||||
|
||||
testContinuousWeights.forEach(function (element) {
|
||||
test(() => { assert_equals(window.CSS.supports("font-weight", element.weight), element.isValid, element.message); }, "@supports: " + element.message);
|
||||
});
|
||||
|
||||
testContinuousWeights.forEach(function (element) {
|
||||
var testElement = document.getElementById("computedStyleTest");
|
||||
|
||||
if (element.isValid) {
|
||||
testElement.style.fontWeight = "300";
|
||||
testElement.style.fontWeight = element.weight;
|
||||
var expectedWeight = (element.expectedWeight) ? element.expectedWeight : element.weight;
|
||||
|
||||
test(() => { assert_equals(window.getComputedStyle(testElement).fontWeight, expectedWeight, element.message); }, "Computed style: " + element.message);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue