<!DOCTYPE html>
<html class="no-skrollr">
<head>
<meta charset="utf-8" />
<title>skrollr test suite</title>
<link rel="stylesheet" type="text/css" href="qunit.css" />
<style type="text/css">
#qunit {
position:fixed;
bottom:0;
left:0;
right:0;
height:50%;
overflow:auto;
z-index:101;
}
#anchor-1, #anchor-2 {
height:1000px;
background:#ccc;
position:absolute;
top:0;
}
#foreign-anchor {
margin:100px;
padding:100px;
background:#ff0;
position:fixed;
}
#relative-percentage-offset {
top:100%;
}
#float {
position:static !important;
}
div {position:absolute;}
</style>
<script src="../src/skrollr.js" type="text/javascript"></script>
</head>
<body class="notransition">
<div id="end" data-start="font-size:10px;" data-end="font-size:90px;">TEST</div>
<div id="simple-numeric" data-_myconst--300=" left:-100px; top:0px " data-_myconst-200-start=" top:50px; left:100px; ">TEST</div>
<div id="compound-numeric" data-_my500--500="margin:0px 10px 20px 30px;" data-_my500="margin:30px 20px 10px 0px;">TEST</div>
<div id="rgb-color" data-0="color:rgb(0,0,0);" data-500="color:rgb(50,100,150);">TEST</div>
<div id="rgba-color" data-0="color:rgba(0,0,0,.2);" data-500="color:rgba(50,100,150,.5);">TEST</div>
<div id="hsl-color" data-0="color:hsl(0,0%,0%);" data-500="color:hsl(3600,50%,50%);">TEST</div>
<div id="hsla-color" data-0="color:hsla(0,0%,0%,.0);" data-500="color:hsla(3600,50%,50%,.5);">TEST</div>
<div id="no-interpolation" data-0="right:!0px;" data-499="right:!100px;">TEST</div>
<div id="anchor-1" data-top-bottom="right:100px;" data-top="right:0px;">TEST</div>
<div id="anchor-2" data-top="right:0px;" data-top-center="right:200px;">TEST</div>
<div id="foreign-anchor" data-top="padding:200px;" data-top-center="padding:100px;" data-anchor-target="#anchor-2"></div>
<div id="float" data-start="float:none;" data-499="float:left;" style="background:red;">TEST</div>
<svg version="1.1" width="200px" height="200px">
<rect
width="200" height="200" style="fill:#0000ff;fill-rule:evenodd;stroke:none"
id="svg-relative-mode"
data-top="margin:100px;" data-top-bottom="margin:200px;" />
</svg>
<div id="colon-url" data-250="background-image:!none;" data-499='background-image:!url("https://secure.travis-ci.org/Prinzhorn/skrollr.png");'>TEST</div>
<div id="period-number" data-250="background-image:!none;" data-499='background-image:!url("https://secure.travis-ci.org/Prinzhorn/skrollr.png?1337");'>TEST</div>
<div id="easing" data-0="left[half1]:0px;" data-500="left[half1]:50px;">TEST</div>
<div id="easing_with_easing_strategy" data-0="left[half1]:0px;" data-500="left[half1]:50px;" data-edge-strategy="ease">TEST</div>
<div id="reset-strategy" data-0="left:0px;" data-500="left:50px;" data-edge-strategy="reset" style="left:1337px;">TEST</div>
<div id="percentage-offset" data-0="left:0px;" data-200p="left:500px;">TEST</div>
<div id="relative-percentage-offset" data-0="left:0px;" data--100p-bottom-top="left:500px;">TEST</div>
<div id="auto-z-index" data-0="z-index:!1;" data-250="z-index:auto;">TEST</div>
<div id="attr" data-0="@title:500;@data-test:skrollr" data-250="@title:250" data-500="@title:0;@data-test:skrollr-test">TEST</div>
<div id="qunit"></div>
<script src="qunit.js" type="text/javascript"></script>
<script src="qunit-numeric-css-property-equals.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="../src/plugins/skrollr.ie.js"></script>
<![endif]-->
<script src="tests.js" type="text/javascript"></script>
</body>
</html>