blob: 71f1a125df9a4e57bb8617a0ad5597daa8f926f4 [file] [log] [blame]
<!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>