157 lines
3.8 KiB
HTML
157 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@font-face {
|
|
font-family: "WebFont";
|
|
src: url("../../resources/Ahem.otf") format("woff-variations"), local("Helvetica");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont2";
|
|
src: url("../../resources/Ahem.otf") format("truetype-variations"), local("Helvetica");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont3";
|
|
src: url("../../resources/Ahem.otf") format("opentype-variations"), local("Helvetica");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "WebFont4";
|
|
font-weight: 100;
|
|
font-weight: 332;
|
|
src: url("../../resources/Ahem.otf");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont4";
|
|
font-weight: 200;
|
|
src: local("Helvetica");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont5";
|
|
font-weight: 700;
|
|
src: url("../../resources/Ahem.otf");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont5";
|
|
font-weight: 400;
|
|
src: local("Helvetica");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "WebFont6";
|
|
font-stretch: ultra-expanded;
|
|
font-stretch: 110%;
|
|
src: url("../../resources/Ahem.otf");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont6";
|
|
font-stretch: expanded;
|
|
src: local("Helvetica");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont7";
|
|
font-stretch: extra-expanded;
|
|
src: url("../../resources/Ahem.otf");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont7";
|
|
font-stretch: semi-expanded;
|
|
src: local("Helvetica");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "WebFont8";
|
|
font-style: oblique;
|
|
src: url("../../resources/Ahem.otf");
|
|
}
|
|
@font-face {
|
|
font-family: "WebFont8";
|
|
font-style: normal;
|
|
src: local("Helvetica");
|
|
}
|
|
|
|
#supportsTest1 {
|
|
font-family: "Helvetica";
|
|
}
|
|
@supports (font-variation-settings: 'abcd' 3) {
|
|
#supportsTest1 {
|
|
font-family: "Ahem";
|
|
}
|
|
}
|
|
#supportsTest2 {
|
|
font-family: "Helvetica";
|
|
}
|
|
@supports (font-weight: 401) {
|
|
#supportsTest2 {
|
|
font-family: "Ahem";
|
|
}
|
|
}
|
|
#supportsTest3 {
|
|
font-family: "Helvetica";
|
|
}
|
|
@supports (font-stretch: 101%) {
|
|
#supportsTest3 {
|
|
font-family: "Ahem";
|
|
}
|
|
}
|
|
#supportsTest4 {
|
|
font-family: "Helvetica";
|
|
}
|
|
@supports (font-style: oblique 21deg) {
|
|
#supportsTest4 {
|
|
font-family: "Ahem";
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
This test makes sure that font-variations can be feature-detected on OSes which don't support it.
|
|
<div id="container" style="font-size: 36px;">
|
|
<span style="font-family: 'WebFont';">Hello</span>
|
|
<span style="font-family: 'WebFont2';">Hello</span>
|
|
<span style="font-family: 'WebFont3';">Hello</span>
|
|
<span style="font-family: 'WebFont4';">Hello</span>
|
|
<span style="font-family: 'WebFont5'; font-weight: 899;">Hello</span>
|
|
<span style="font-family: 'WebFont6';">Hello</span>
|
|
<span style="font-family: 'WebFont7'; font-stretch: 200%;">Hello</span>
|
|
<span style="font-family: 'WebFont7'; font-style: italic 80deg;">Hello</span>
|
|
<span id="supportsTest1">Hello</span>
|
|
<span id="supportsTest2">Hello</span>
|
|
<span id="supportsTest3">Hello</span>
|
|
<span id="supportsTest4">Hello</span>
|
|
<span id="result1"></span>
|
|
<span id="result2"></span>
|
|
<span id="result3"></span>
|
|
<span id="result4"></span>
|
|
<span id="result5"></span>
|
|
</div>
|
|
<script>
|
|
var container = document.getElementById("container");
|
|
var result1 = document.getElementById("result1");
|
|
var result2 = document.getElementById("result2");
|
|
var result3 = document.getElementById("result3");
|
|
var result4 = document.getElementById("result4");
|
|
var result5 = document.getElementById("result5");
|
|
if (!CSS.supports("font-variation-settings", "'abcd' 3"))
|
|
result1.textContent = "Pass";
|
|
else
|
|
result1.textContent = "Fail";
|
|
if (!CSS.supports("font-weight", "401"))
|
|
result2.textContent = "Pass";
|
|
else
|
|
result2.textContent = "Fail";
|
|
if (!CSS.supports("font-stretch", "101%"))
|
|
result3.textContent = "Pass";
|
|
else
|
|
result3.textContent = "Fail";
|
|
if (!CSS.supports("font-style", "oblique 21deg"))
|
|
result4.textContent = "Pass";
|
|
else
|
|
result4.textContent = "Fail";
|
|
if (!window.getComputedStyle(container).getPropertyValue("font-variation-settings"))
|
|
result5.textContent = "Pass";
|
|
else
|
|
result5.textContent = "Fail";
|
|
</script>
|
|
</body>
|
|
</html> |