261 lines
12 KiB
HTML
261 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
|
|
<script>
|
|
|
|
async function loadFontFace(fontDeclaration, text, eventName)
|
|
{
|
|
try {
|
|
await document.fonts.load(fontDeclaration, text);
|
|
TestPage.log("PASS: Font should be loaded.");
|
|
} catch {
|
|
TestPage.log("FAIL: Font should be loaded.");
|
|
}
|
|
TestPage.dispatchEventToFrontend(eventName);
|
|
}
|
|
|
|
function test()
|
|
{
|
|
let documentNode;
|
|
|
|
let suite = InspectorTest.createAsyncSuite("WI.Font");
|
|
|
|
function addTestCase({name, description, setup, selector, propertyMapHandlers})
|
|
{
|
|
suite.addTestCase({
|
|
name,
|
|
description,
|
|
setup,
|
|
async test() {
|
|
let nodeId = await documentNode.querySelector(selector);
|
|
let domNode = await WI.domManager.nodeForId(nodeId);
|
|
InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`);
|
|
|
|
let cssStyles = WI.cssManager.stylesForNode(domNode);
|
|
InspectorTest.assert(cssStyles, `Should find CSS Styles for DOM Node.`);
|
|
|
|
await cssStyles.refreshIfNeeded();
|
|
|
|
let {propertiesMap, featuresMap, variationsMap} = cssStyles.computedPrimaryFont.calculateFontProperties(cssStyles);
|
|
|
|
await propertyMapHandlers(propertiesMap, featuresMap, variationsMap);
|
|
},
|
|
});
|
|
}
|
|
|
|
function loadFontFace(fontDeclaration, text, eventName)
|
|
{
|
|
return Promise.all([
|
|
InspectorTest.awaitEvent(eventName),
|
|
InspectorTest.evaluateInPage(`loadFontFace("${fontDeclaration}", "${text}", "${eventName}")`),
|
|
]);
|
|
}
|
|
|
|
addTestCase({
|
|
name: "WI.Font.BasicPropertiesTest",
|
|
description: "Get the basic font properties for the node '#basic-properties-test'.",
|
|
selector: "#basic-properties-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
InspectorTest.expectEqual(propertiesMap.get("font-size").value, '2rem', "Font size property value should be '2rem'.");
|
|
InspectorTest.expectEqual(propertiesMap.get("font-style").value, 'italic', "Font size property value should be 'italic'.");
|
|
InspectorTest.expectEqual(propertiesMap.get("font-weight").value, '700', "Font size property value should be '700'.");
|
|
InspectorTest.expectEqual(propertiesMap.get("font-stretch").value, '150%', "Font size property value should be '150%'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.FeaturePropertyLigaturesTest",
|
|
description: "Get the font ligature property for the node '#feature-property-ligatures-test'.",
|
|
selector: "#feature-property-ligatures-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
let property = propertiesMap.get("font-variant-ligatures");
|
|
InspectorTest.expectEqual(property.value, 'no-common-ligatures', "Property value should be 'no-common-ligatures'.");
|
|
InspectorTest.expectEqual(property.features.get("calt"), 1, "'calt' feature value should be '1'.");
|
|
InspectorTest.expectEqual(property.features.get("dlig"), 1, "'dlig' feature value should be '1'.");
|
|
InspectorTest.expectEqual(property.features.get("hlig"), 1, "'hlig' feature value should be '1'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.FeaturePropertyPositionTest",
|
|
description: "Get the font position property for the node '#feature-property-position-test'.",
|
|
selector: "#feature-property-position-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
let property = propertiesMap.get("font-variant-position");
|
|
InspectorTest.expectEqual(property.value, 'super', "Property value should be 'super'.");
|
|
InspectorTest.expectEqual(property.features.get("sups"), 0, "'sups' feature value should be '0'.");
|
|
InspectorTest.expectEqual(property.features.get("subs"), 1, "'subs' feature value should be '1'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.FeaturePropertyCapitalsTest",
|
|
description: "Get the font capitals property for the node '#feature-property-capitals-test'.",
|
|
selector: "#feature-property-capitals-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
let property = propertiesMap.get("font-variant-caps");
|
|
InspectorTest.expectEqual(property.value, 'all-small-caps', "Property value should be 'all-small-caps'.");
|
|
InspectorTest.expectEqual(property.features.get("c2sc"), 1, "'c2sc' feature value should be '1'.");
|
|
InspectorTest.expectEqual(property.features.get("smcp"), 1, "'smcp' feature value should be '1'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.FeaturePropertyNumericTest",
|
|
description: "Get the font numeric property for the node '#feature-property-numeric-test'.",
|
|
selector: "#feature-property-numeric-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
let property = propertiesMap.get("font-variant-numeric");
|
|
InspectorTest.expectEqual(property.value, 'lining-nums tabular-nums stacked-fractions', "Property value should be 'lining-nums tabular-nums stacked-fractions'.");
|
|
InspectorTest.expectEqual(property.features.get("zero"), 1, "'zero' feature value should be '1'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.FeaturePropertyAlternatesTest",
|
|
description: "Get the font alternates property for the node '#feature-property-alternates-test'.",
|
|
selector: "#feature-property-alternates-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
let property = propertiesMap.get("font-variant-alternates");
|
|
InspectorTest.expectEqual(property.value, 'historical-forms', "Property value should be 'historical-forms'.");
|
|
InspectorTest.expectEqual(property.features.get("hist"), 0, "'hist' feature value should be '1'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.FeaturePropertyEastAsianTest",
|
|
description: "Get the font east asian property for the node '#feature-property-east-asian-test'.",
|
|
selector: "#feature-property-east-asian-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
let property = propertiesMap.get("font-variant-east-asian");
|
|
InspectorTest.expectEqual(property.value, 'jis78 full-width', "Property value should be 'jis78 full-width'.");
|
|
InspectorTest.expectEqual(property.features.get("jp78"), 1, "'jp78' feature value should be '1'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.UnregisteredFeaturePropertyTest",
|
|
description: "Get an unregistered feature property for the node '#unregistered-feature-property-test'.",
|
|
selector: "#unregistered-feature-property-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
InspectorTest.expectEqual(featuresMap.get("appl"), 1, "'appl' feature value should be '1'.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "WI.Font.VariableFontTest",
|
|
description: "Get the font variations axes for the node '#variable-font-test'.",
|
|
async setup() {
|
|
return loadFontFace("normal normal 12px VariableFont", " ", "TestPage-VariableFont1Loaded");
|
|
},
|
|
selector: "#variable-font-test",
|
|
propertyMapHandlers(propertiesMap, featuresMap, variationsMap) {
|
|
let widthProperty = propertiesMap.get("font-stretch");
|
|
InspectorTest.expectEqual(widthProperty.value, '50%', "Width property value should be '50%'.");
|
|
let widthAxis = widthProperty.variations.get("wdth");
|
|
InspectorTest.expectEqual(widthAxis.name, "Width", "Width axis name should be 'Width'.");
|
|
InspectorTest.expectEqual(widthAxis.value, 777, "Width axis value should be '777'.");
|
|
InspectorTest.expectEqual(widthAxis.minimumValue, 0, "Width axis minimum should be '0'.");
|
|
InspectorTest.expectEqual(widthAxis.maximumValue, 1000, "Width axis maximum should be '1000'.");
|
|
InspectorTest.expectEqual(widthAxis.defaultValue, 750, "Width axis default should be '750'.");
|
|
|
|
let descentAxis = variationsMap.get("desc");
|
|
InspectorTest.expectEqual(descentAxis.name, "Descent", "Descent axis name should be 'Descent'.");
|
|
InspectorTest.expectEqual(descentAxis.value, 100, "Descent axis value should be '100'.");
|
|
InspectorTest.expectEqual(descentAxis.minimumValue, 0, "Descent axis minimum should be '0'.");
|
|
InspectorTest.expectEqual(descentAxis.maximumValue, 250, "Descent axis maximum should be '250'.");
|
|
InspectorTest.expectEqual(descentAxis.defaultValue, 0, "Descent axis default should be '0'.");
|
|
|
|
let heightAxis = variationsMap.get("hght");
|
|
InspectorTest.expectEqual(heightAxis.name, "Height", "Height axis name should be 'Height'.");
|
|
InspectorTest.expectEqual(heightAxis.value, undefined, "Height axis value should be 'undefined'.");
|
|
InspectorTest.expectEqual(heightAxis.minimumValue, 0, "Height axis minimum should be '0'.");
|
|
InspectorTest.expectEqual(heightAxis.maximumValue, 1000, "Height axis maximum should be '1000'.");
|
|
InspectorTest.expectEqual(heightAxis.defaultValue, 750, "Height axis default should be '750'.");
|
|
|
|
let trackingAxis = variationsMap.get("trac");
|
|
InspectorTest.expectEqual(trackingAxis.name, "Tracking", "Tracking axis name should be 'Tracking'.");
|
|
InspectorTest.expectEqual(trackingAxis.value, 500, "Descent axis value should be '500'.");
|
|
InspectorTest.expectEqual(trackingAxis.minimumValue, 0, "Tracking axis minimum should be '0'.");
|
|
InspectorTest.expectEqual(trackingAxis.maximumValue, 1000, "Tracking axis maximum should be '1000'.");
|
|
InspectorTest.expectEqual(trackingAxis.defaultValue, 0, "Tracking axis default should be '0'.");
|
|
}
|
|
});
|
|
|
|
WI.domManager.requestDocument((node) => {
|
|
documentNode = node;
|
|
suite.runTestCasesAndFinish();
|
|
});
|
|
}
|
|
</script>
|
|
<style>
|
|
@font-face {
|
|
font-family: "VariableFont";
|
|
src: url("../../animations/font-variations/resources/Boxis-VF.ttf");
|
|
}
|
|
|
|
#basic-properties-test {
|
|
font-size: 2rem;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
font-stretch: extra-expanded;
|
|
}
|
|
|
|
#feature-property-ligatures-test {
|
|
font-variant-ligatures: no-common-ligatures;
|
|
font-feature-settings: 'calt', 'dlig' on, 'hlig' 1;
|
|
}
|
|
|
|
#feature-property-position-test {
|
|
font-variant-position: super;
|
|
font-feature-settings: 'sups' off, 'subs';
|
|
}
|
|
|
|
#feature-property-capitals-test {
|
|
font-variant-caps: all-small-caps;
|
|
font-feature-settings: 'c2sc', 'smcp';
|
|
}
|
|
|
|
#feature-property-numeric-test {
|
|
font-variant-numeric: lining-nums tabular-nums stacked-fractions;
|
|
font-feature-settings: 'zero';
|
|
}
|
|
|
|
#feature-property-alternates-test {
|
|
font-variant-alternates: historical-forms;
|
|
font-feature-settings: 'hist' 0;
|
|
}
|
|
|
|
#feature-property-east-asian-test {
|
|
font-variant-east-asian: jis78 full-width;
|
|
font-feature-settings: 'jp78' 1;
|
|
}
|
|
|
|
#unregistered-feature-property-test {
|
|
font-feature-settings: 'appl';
|
|
}
|
|
|
|
#variable-font-test {
|
|
font-family: VariableFont;
|
|
font-stretch: 50%;
|
|
font-variation-settings: 'wdth' 777, "desc" 100, 'trac' 500;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body onload="runTest();">
|
|
<p>Test for WI.Font.</p>
|
|
<div>
|
|
<div id="basic-properties-test">Basic Properties Test</div>
|
|
<div id="feature-property-ligatures-test">Feature Property Ligatures Test</div>
|
|
<div id="feature-property-position-test">Feature Property Position Test</div>
|
|
<div id="feature-property-capitals-test">Feature Property Capitals Test</div>
|
|
<div id="feature-property-numeric-test">Feature Property Numeric Test</div>
|
|
<div id="feature-property-alternates-test">Feature Property Alternates Test</div>
|
|
<div id="feature-property-east-asian-test">Feature Property East Asian Test</div>
|
|
<div id="unregistered-feature-property-test">Unregisted Feature Property Test</div>
|
|
<div id="variable-font-test" style="">Variable Font Test</div>
|
|
</div>
|
|
</body>
|
|
</html> |