<!DOCTYPE html>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../resources/picker-common.js"></script>
<style>
.font1 { font-family: TestFont; }
.font2 { font-family: "TestFont 2"; }
</style>
<select>
<option>select</option>
<option class="font1">font 1</option>
<option class="font2">font 2</option>
</select>
<script>
var face1 = new FontFace("TestFont", "local(Arial), local(Arimo Regular)");
var face2 = new FontFace("TestFont 2", "local(Arial), local(Arimo Regular)");
document.fonts.add(face1);
document.fonts.add(face2);
async_test(function(test) {
// Fonts are not loaded yet.
assert_equals(face1.status, "unloaded", "face1 should be unloaded");
assert_equals(face2.status, "unloaded", "face2 should be unloaded");
openPickerDeprecatedJsTest(document.querySelector('select'), function() {
document.fonts.ready.then(test.step_func(function() {
assert_equals(face1.status, "loaded", "face1 should be loaded");
assert_equals(face2.status, "loaded", "face2 should be loaded");
test.done();
}), 0);
}, test.step_func(function() {
// Do nothing on Mac and Android.
test.done();
}));
}, '<option> can be styled with web fonts');
</script>
</body>