five-bells-visualization
Version:
Tool to visualize Five Bells payments
143 lines (131 loc) • 4.12 kB
HTML
<!doctype html>
<meta charset="utf-8">
<style>
.target {
border: 3px solid skyblue;
width: 100px;
height: 100px;
background-image: linear-gradient(to right, coral, coral);
background-size: 20px 20px;
background-repeat: no-repeat;
display: inline-block;
}
.replica {
margin-right: 10px;
}
</style>
<body>
<script src="../testharness/testharness.js"></script>
<script src="../testharness/testharnessreport.js"></script>
<script src="resources/interpolation-test.js"></script>
<script>
// left-top
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'left 20px top 20px',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + 5px)'},
{at: 0.50, is: 'calc(25% + 10px) calc(25% + 10px)'},
{at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + 15px)'},
{at: 1, is: 'left 20px top 20px'},
]);
// center-top
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'center top 20px',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: '50% calc(37.5% + 5px)'},
{at: 0.50, is: '50% calc(25% + 10px)'},
{at: 0.75, is: '50% calc(12.5% + 15px)'},
{at: 1, is: 'center top 20px'},
]);
// right-top
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'right 20px top 20px',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + 5px)'},
{at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + 10px)'},
{at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + 15px)'},
{at: 1, is: 'right 20px top 20px'},
]);
// left-center
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'left 20px center',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: 'calc(37.5% + 5px) 50%'},
{at: 0.50, is: 'calc(25% + 10px) 50%'},
{at: 0.75, is: 'calc(12.5% + 15px) 50%'},
{at: 1, is: 'left 20px center'},
]);
// center-center
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'center center',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: '50% 50%'},
{at: 0.50, is: '50% 50%'},
{at: 0.75, is: '50% 50%'},
{at: 1, is: 'center center'}
]);
// right-center
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'right 20px center',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) 50%'},
{at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) 50%'},
{at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) 50%'},
{at: 1, is: 'right 20px center'},
]);
// left-bottom
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'left 20px bottom 20px',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + ((100% - 20px) * 0.25))'},
{at: 0.50, is: 'calc(25% + 10px) calc(25% + ((100% - 20px) * 0.5))'},
{at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + ((100% - 20px) * 0.75))'},
{at: 1, is: 'left 20px bottom 20px'},
]);
// center-bottom
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'center bottom 20px',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: '50% calc(37.5% + ((100% - 20px) * 0.25))'},
{at: 0.50, is: '50% calc(25% + ((100% - 20px) * 0.5))'},
{at: 0.75, is: '50% calc(12.5% + ((100% - 20px) * 0.75))'},
{at: 1, is: 'center bottom 20px'},
]);
// right-bottom
assertInterpolation({
property: 'background-position',
from: 'center center',
to: 'right 20px bottom 20px',
}, [
{at: 0, is: 'center center'},
{at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + ((100% - 20px) * 0.25))'},
{at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + ((100% - 20px) * 0.5))'},
{at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + ((100% - 20px) * 0.75))'},
{at: 1, is: 'right 20px bottom 20px'},
]);
</script>
</body>