Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<title>CSS Test: font-feature-settings descriptor</title>
<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">
<link rel="match" href="font-feature-settings-descriptor-binary-ref.html">
<meta name="assert" content="smcp features should be handled with font-feature-settings defined as font-face rule for base64 encoded fonts.">
<style>
@font-face {
font-family: "Roboto Regular";
src: url(data:font/woff2;base64,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) format("woff2");
font-feature-settings: "smcp" 1;
}
.test {
font-family: "Roboto Regular";
}
.test2 {
font-family: "Roboto Regular";
font-feature-settings: "smcp" 0;
}
</style>
<body>
<p>The test passes if the two lines render differently, demonstrating that the "smcp" (Small Caps) feature correctly transforms lowercase letters into smaller uppercase in first line, and remains unchanged in second line.</p>
<section class="test">
<p>Filler text</p>
</section>
<section class="test2">
<p>Filler text</p>
</section>
</body>