<html>
<head>
<title>Sprite Hi-Resolution (Retina) Test</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="result/sprites.css">
<script src="demo.js"></script>
</head>
<body>
<div class="cf head">
<div class="row-head box toggle">
<a href="javascript:void(togglePixelRatio());">Toggle</a>
</div>
<div class="cfi">
<div class="cfi">
<div class="col-head box">[Left|px]/[Top|px]</div>
<div class="col-head box"><b>Right</b>/[Top|px]</div>
</div>
<div class="cfi">
<div class="col-head box">[Left|px]/<b>Bottom</b></div>
<div class="col-head box"><b>Right</b>/<b>Bottom</b></div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Fixed WH</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="fixed-a box sprite" title="fixed"></div>
<div class="fixed-b box sprite" title="fixed"></div>
</div>
<div class="cfi">
<div class="fixed-right-a box sprite" title="fixed right"></div>
<div class="fixed-right-b box sprite" title="fixed right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="fixed-bottom-a box sprite" title="fixed bottom"></div>
<div class="fixed-bottom-b box sprite" title="fixed bottom"></div>
</div>
<div class="cfi">
<div class="fixed-right-bottom-a box sprite" title="fixed right bottom"></div>
<div class="fixed-right-bottom-b box sprite" title="fixed right bottom"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible H</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-y-a box flex-y sprite" title="flexible y"></div>
<div class="flexible-y-b box flex-y sprite" title="flexible y"></div>
</div>
<div class="cfi">
<div class="flexible-y-right-a box flex-y sprite" title="flexible y right"></div>
<div class="flexible-y-right-b box flex-y sprite" title="flexible y right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-y-bottom-a box flex-y sprite" title="flexible y bottom"></div>
<div class="flexible-y-bottom-b box flex-y sprite" title="flexible y bottom"></div>
</div>
<div class="cfi">
<div class="flexible-y-right-bottom-a box flex-y sprite" title="flexible y bottom"></div>
<div class="flexible-y-right-bottom-b box flex-y sprite" title="flexible y bottom"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible W</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-x-a box flex-x sprite" title="flexible x"></div>
<div class="flexible-x-b box flex-x sprite" title="flexible x"></div>
</div>
<div class="cfi">
<div class="flexible-x-right-a box flex-x sprite" title="flexible x right"></div>
<div class="flexible-x-right-b box flex-x sprite" title="flexible x right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-x-bottom-a box flex-x sprite" title="flexible x bottom"></div>
<div class="flexible-x-bottom-b box flex-x sprite" title="flexible x bottom"></div>
</div>
<div class="cfi">
<div class="flexible-x-right-bottom-a box flex-x sprite" title="flexible x bottom"></div>
<div class="flexible-x-right-bottom-b box flex-x sprite" title="flexible x bottom"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible WH</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-a box flex-xy sprite" title="flexible y"></div>
<div class="flexible-b box flex-xy sprite" title="flexible y"></div>
</div>
<div class="cfi">
<div class="flexible-right-a box flex-xy sprite" title="flexible y right"></div>
<div class="flexible-right-b box flex-xy sprite" title="flexible y right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-bottom-a box flex-xy sprite" title="flexible y bottom"></div>
<div class="flexible-bottom-b box flex-xy sprite" title="flexible y bottom"></div>
</div>
<div class="cfi">
<div class="flexible-right-bottom-a box flex-xy sprite" title="flexible y bottom"></div>
<div class="flexible-right-bottom-b box flex-xy sprite" title="flexible y bottom"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Fixed WH<br>Repeat X</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="repeat-x-a box sprite" title="repeat x"></div>
<div class="repeat-x-b box sprite" title="repeat x"></div>
</div>
<div class="cfi">
<div class="repeat-x-right-a box sprite" title="repeat x right"></div>
<div class="repeat-x-right-b box sprite" title="repeat x right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="repeat-x-bottom-a box sprite" title="repeat x bottom"></div>
<div class="repeat-x-bottom-b box sprite" title="repeat x bottom"></div>
</div>
<div class="cfi">
<div class="repeat-x-right-bottom-a box sprite" title="repeat x bottom right"></div>
<div class="repeat-x-right-bottom-b box sprite" title="repeat x bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Fixed WH<br>Repeat Y</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="repeat-y-a box sprite" title="repeat y"></div>
<div class="repeat-y-b box sprite" title="repeat y"></div>
</div>
<div class="cfi">
<div class="repeat-y-right-a box sprite" title="repeat y right"></div>
<div class="repeat-y-right-b box sprite" title="repeat y right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="repeat-y-bottom-a box sprite" title="repeat y bottom"></div>
<div class="repeat-y-bottom-b box sprite" title="repeat y bottom"></div>
</div>
<div class="cfi">
<div class="repeat-y-right-bottom-a box sprite" title="repeat y bottom right"></div>
<div class="repeat-y-right-bottom-b box sprite" title="repeat y bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Fixed WH<br>Repeat XY</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="repeat-xy-a box sprite" title="repeat xy"></div>
<div class="repeat-xy-b box sprite" title="repeat xy"></div>
</div>
<div class="cfi">
<div class="repeat-xy-right-a box sprite" title="repeat xy right"></div>
<div class="repeat-xy-right-b box sprite" title="repeat xy right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="repeat-xy-bottom-a box sprite" title="repeat xy bottom"></div>
<div class="repeat-xy-bottom-b box sprite" title="repeat xy bottom"></div>
</div>
<div class="cfi">
<div class="repeat-xy-right-bottom-a box sprite" title="repeat xy bottom right"></div>
<div class="repeat-xy-right-bottom-b box sprite" title="repeat xy bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible H<br>Repeat X</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-y-repeat-x-a box flex-y sprite" title="flexible y repeat x"></div>
<div class="flexible-y-repeat-x-b box flex-y sprite" title="flexible y repeat x"></div>
</div>
<div class="cfi">
<div class="flexible-y-repeat-x-right-a box flex-y sprite" title="flexible y repeat x right"></div>
<div class="flexible-y-repeat-x-right-b box flex-y sprite" title="flexible y repeat x right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-y-repeat-x-bottom-a box flex-y sprite" title="flexible y repeat x bottom"></div>
<div class="flexible-y-repeat-x-bottom-b box flex-y sprite" title="flexible y repeat x bottom"></div>
</div>
<div class="cfi">
<div class="flexible-y-repeat-x-right-bottom-a box flex-y sprite" title="flexible y repeat x bottom right"></div>
<div class="flexible-y-repeat-x-right-bottom-b box flex-y sprite" title="flexible y repeat x bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible H<br>Repeat Y</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-y-repeat-y-a box flex-y sprite" title="flexible y repeat y"></div>
<div class="flexible-y-repeat-y-b box flex-y sprite" title="flexible y repeat y"></div>
</div>
<div class="cfi">
<div class="flexible-y-repeat-y-right-a box flex-y sprite" title="flexible y repeat y right"></div>
<div class="flexible-y-repeat-y-right-b box flex-y sprite" title="flexible y repeat y right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-y-repeat-y-bottom-a box flex-y sprite" title="flexible y repeat y bottom"></div>
<div class="flexible-y-repeat-y-bottom-b box flex-y sprite" title="flexible y repeat y bottom"></div>
</div>
<div class="cfi">
<div class="flexible-y-repeat-y-right-bottom-a box flex-y sprite" title="flexible y repeat y bottom right"></div>
<div class="flexible-y-repeat-y-right-bottom-b box flex-y sprite" title="flexible y repeat y bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible H<br>Repeat XY</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-y-repeat-xy-a box flex-y sprite" title="flexible y repeat xy"></div>
<div class="flexible-y-repeat-xy-b box flex-y sprite" title="flexible y repeat xy"></div>
</div>
<div class="cfi">
<div class="flexible-y-repeat-xy-right-a box flex-y sprite" title="flexible y repeat xy right"></div>
<div class="flexible-y-repeat-xy-right-b box flex-y sprite" title="flexible y repeat xy right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-y-repeat-xy-bottom-a box flex-y sprite" title="flexible y repeat xy bottom"></div>
<div class="flexible-y-repeat-xy-bottom-b box flex-y sprite" title="flexible y repeat xy bottom"></div>
</div>
<div class="cfi">
<div class="flexible-y-repeat-xy-right-bottom-a box flex-y sprite" title="flexible y repeat xy bottom right"></div>
<div class="flexible-y-repeat-xy-right-bottom-b box flex-y sprite" title="flexible y repeat xy bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible W<br>Repeat X</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-x-repeat-x-a box flex-x sprite" title="flexible x repeat x"></div>
<div class="flexible-x-repeat-x-b box flex-x sprite" title="flexible x repeat x"></div>
</div>
<div class="cfi">
<div class="flexible-x-repeat-x-right-a box flex-x sprite" title="flexible x repeat x right"></div>
<div class="flexible-x-repeat-x-right-b box flex-x sprite" title="flexible x repeat x right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-x-repeat-x-bottom-a box flex-x sprite" title="flexible x repeat x bottom"></div>
<div class="flexible-x-repeat-x-bottom-b box flex-x sprite" title="flexible x repeat x bottom"></div>
</div>
<div class="cfi">
<div class="flexible-x-repeat-x-right-bottom-a box flex-x sprite" title="flexible x repeat x bottom right"></div>
<div class="flexible-x-repeat-x-right-bottom-b box flex-x sprite" title="flexible x repeat x bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible W<br>Repeat Y</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-x-repeat-y-a box flex-x sprite" title="flexible x repeat y"></div>
<div class="flexible-x-repeat-y-b box flex-x sprite" title="flexible x repeat y"></div>
</div>
<div class="cfi">
<div class="flexible-x-repeat-y-right-a box flex-x sprite" title="flexible x repeat y right"></div>
<div class="flexible-x-repeat-y-right-b box flex-x sprite" title="flexible x repeat y right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-x-repeat-y-bottom-a box flex-x sprite" title="flexible x repeat y bottom"></div>
<div class="flexible-x-repeat-y-bottom-b box flex-x sprite" title="flexible x repeat y bottom"></div>
</div>
<div class="cfi">
<div class="flexible-x-repeat-y-right-bottom-a box flex-x sprite" title="flexible x repeat y bottom right"></div>
<div class="flexible-x-repeat-y-right-bottom-b box flex-x sprite" title="flexible x repeat y bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible W<br>Repeat XY</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-x-repeat-xy-a box flex-x sprite" title="flexible x repeat xy"></div>
<div class="flexible-x-repeat-xy-b box flex-x sprite" title="flexible x repeat xy"></div>
</div>
<div class="cfi">
<div class="flexible-x-repeat-xy-right-a box flex-x sprite" title="flexible x repeat xy right"></div>
<div class="flexible-x-repeat-xy-right-b box flex-x sprite" title="flexible x repeat xy right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-x-repeat-xy-bottom-a box flex-x sprite" title="flexible x repeat xy bottom"></div>
<div class="flexible-x-repeat-xy-bottom-b box flex-x sprite" title="flexible x repeat xy bottom"></div>
</div>
<div class="cfi">
<div class="flexible-x-repeat-xy-right-bottom-a box flex-x sprite" title="flexible x repeat xy bottom right"></div>
<div class="flexible-x-repeat-xy-right-bottom-b box flex-x sprite" title="flexible x repeat xy bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible WH<br>Repeat X</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-repeat-x-a box flex-xy sprite" title="flexible repeat x"></div>
<div class="flexible-repeat-x-b box flex-xy sprite" title="flexible repeat x"></div>
</div>
<div class="cfi">
<div class="flexible-repeat-x-right-a box flex-xy sprite" title="flexible repeat x right"></div>
<div class="flexible-repeat-x-right-b box flex-xy sprite" title="flexible repeat x right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-repeat-x-bottom-a box flex-xy sprite" title="flexible repeat x bottom"></div>
<div class="flexible-repeat-x-bottom-b box flex-xy sprite" title="flexible repeat x bottom"></div>
</div>
<div class="cfi">
<div class="flexible-repeat-x-right-bottom-a box flex-xy sprite" title="flexible repeat x bottom right"></div>
<div class="flexible-repeat-x-right-bottom-b box flex-xy sprite" title="flexible repeat x bottom right"></div>
</div>
</div>
</div>
</div>
<div class="cf">
<div class="row-head box">Flexible WH<br>Repeat Y</div>
<div class="cfi">
<div class="cfi">
<div class="cfi">
<div class="flexible-repeat-y-a box flex-xy sprite" title="flexible repeat y"></div>
<div class="flexible-repeat-y-b box flex-xy sprite" title="flexible repeat y"></div>
</div>
<div class="cfi">
<div class="flexible-repeat-y-right-a box flex-xy sprite" title="flexible repeat y right"></div>
<div class="flexible-repeat-y-right-b box flex-xy sprite" title="flexible repeat y right"></div>
</div>
</div>
<div class="cfi">
<div class="cfi">
<div class="flexible-repeat-y-bottom-a box flex-xy sprite" title="flexible repeat y bottom"></div>
<div class="flexible-repeat-y-bottom-b box flex-xy sprite" title="flexible repeat y bottom"></div>
</div>
<div class="cfi">
<div class="flexible-repeat-y-right-bottom-a box flex-xy sprite" title="flexible repeat y bottom right"></div>
<div class="flexible-repeat-y-right-bottom-b box flex-xy sprite" title="flexible repeat y bottom right"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="cf">
<div class="sprite-flex-top box sprite" title="flex top"></div>
<div class="sprite-flex-left box sprite" title="flex left"></div>
<div class="sprite-flex-right box sprite" title="flex right"></div>
<div class="sprite-flex-bottom box sprite" title="flex bottom"></div>
<div class="sprite-flex-bottom-right box sprite" title="flex bottom right"></div>
</div>
<div class="cf">
<div class="sprite-flex-top repeat-x box sprite" title="flex top repeat x"></div>
<div class="sprite-flex-left repeat-x box sprite" title="flex left repeat x"></div>
<div class="sprite-flex-right repeat-x box sprite" title="flex right repeat x"></div>
<div class="sprite-flex-bottom repeat-x box sprite" title="flex bottom repeat x"></div>
<div class="sprite-flex-bottom-right repeat-x box sprite" title="flex bottom right repeat x"></div>
</div>
<div class="cf">
<div class="sprite-flex-top repeat-y box sprite" title="flex top repeat y"></div>
<div class="sprite-flex-left repeat-y box sprite" title="flex left repeat y"></div>
<div class="sprite-flex-right repeat-y box sprite" title="flex right repeat y"></div>
<div class="sprite-flex-bottom repeat-y box sprite" title="flex bottom repeat y"></div>
<div class="sprite-flex-bottom-right repeat-y box sprite" title="flex bottom right repeat y"></div>
</div>
<hr/>
<a class="player" href="#">
<span class="icon-play-big sprite">
<span class="sr">Play</span>
</span>
</a>
<div class="cf">
<a class="button record" href="#">
<span class="icon-record sprite"></span>
<span class="icon-text">Record</span>
</a>
<a class="button record-play" href="#">
<span class="icon-record sprite"></span>
<span class="icon-text">Record<br/>& Play</span>
</a>
</div>
<hr/>
<p class="spriteset">
<img src="result/generated-lores.png" style="width:100%;height:auto;">
</p>
</body>
</html>