<!doctype html>
<style>
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 100;
        src:  url('../../resources/WebKitWeightWatcher100.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 200;
        src:  url('../../resources/WebKitWeightWatcher200.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 300;
        src:  url('../../resources/WebKitWeightWatcher300.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 400;
        src:  url('../../resources/WebKitWeightWatcher400.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 500;
        src:  url('../../resources/WebKitWeightWatcher500.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 600;
        src:  url('../../resources/WebKitWeightWatcher600.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 700;
        src:  url('../../resources/WebKitWeightWatcher700.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 800;
        src:  url('../../resources/WebKitWeightWatcher800.ttf');
    }
    @font-face {
        font-family: 'WebKit WeightWatcher';
        font-weight: 900;
        src:  url('../../resources/WebKitWeightWatcher900.ttf');
    }

    .target {
        display: inline-block;
        font-family: 'WebKit WeightWatcher';
        font-size: 20px;
    }
    .replica {
        color: green;
        margin-right: 30px;
    }

</style>
<template id="target-template">A</template>
<script src="../testharness/testharness.js"></script>
<script src="../testharness/testharnessreport.js"></script>
<script src="resources/interpolation-test.js"></script>
<script>
    assertInterpolation({
        property: 'font-weight',
        from: '100',
        to: '900'
        }, [
        {at: 0/8, is: '100'},
        {at: 1/8, is: '200'},
        {at: 2/8, is: '300'},
        {at: 3/8, is: '400'},
        {at: 4/8, is: '500'},
        {at: 5/8, is: '600'},
        {at: 6/8, is: '700'},
        {at: 7/8, is: '800'},
        {at: 8/8, is: '900'},

        {at: 0.10/8, is: '100'},
        {at: 0.49/8, is: '100'},
        {at: 0.50/8, is: '200'},
        {at: 0.51/8, is: '200'},
        {at: 0.90/8, is: '200'},
        {at: 7.10/8, is: '800'},
        {at: 7.49/8, is: '800'},
        {at: 7.50/8, is: '900'},
        {at: 7.51/8, is: '900'},

        {at: -0.1, is: '100'},
        {at: 1.1, is: '900'},
    ]);
</script>