test/movableCoord.test.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">

<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css">
<!-- user css start -->
<style type="text/css">
	#area {
		position:relative; border:5px solid #444; width:300px; height:400px; color:#aaa; margin:0;
		box-sizing:content-box; z-index:9;
	}
	#dot {
		position:absolute; background-color:#f00; width:9px; height:9px;
		left:200px; top:200px; color:#000; margin:-4px; border-radius:100%;
	}
	#hmove {
		position:relative; border:5px solid #888; background-color:yellowgreen;
		width:300px; height:80px;
	}
	#vmove {
		position:relative; border:5px solid #888; background-color:skyblue;
		width:80px; height:400px; left:310px; top:-500px;
	}
</style>
<!-- user css end -->
<script src="../bower_components/qunit/qunit/qunit.js"></script>
<script src="../bower_components/jquery/jquery.js"></script>
</head>
<body>
 <h1 id="qunit-header">MovableCoord Test</h1>
 <h2 id="qunit-banner"></h2>
 <div id="qunit-testrunner-toolbar"></div>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">
	<!-- UI content Start -->
	<div id="area"><div id="dot"></div></div>
	<div id="hmove"></div><div id="vmove"></div>
	<!-- UI content End -->
 </div>
<!-- user script files start -->
<script src="../bower_components/hammer.js/hammer.js"></script>
<script src="lib/hammerjs-simulator.js"></script>
<script>
    Simulator.setType('touch');
    Simulator.events.touch.fakeSupport();
</script>
<script src="lib/module.js"></script>
<script src="../src/eg.js"></script>
<script src="../src/class.js"></script>
<script src="../src/component.js"></script>
<script src="../src/movableCoord.js"></script>

<!-- test script files start -->
<script src="js/movableCoord.test.js"></script>
<!-- test script files end -->
</body>
</html>