five-bells-visualization
Version:
Tool to visualize Five Bells payments
94 lines (89 loc) • 2.64 kB
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>