<!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>