packery
Version:
bin-packing layout library
312 lines (265 loc) • 8.86 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Packery tests</title>
<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
<link rel="stylesheet" href="test.css" />
<script src="../bower_components/qunit/qunit/qunit.js"></script>
</head>
<body>
<h1>Packery tests</h1>
<div id="qunit"></div>
<div id="empty" class="container"></div>
<div id="default">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<div id="filtered" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="foobar"></div>
</div>
<div id="found" class="container">
<div><div class="item w2"></div></div>
<div><div class="item h2"></div></div>
<div><div class="item w2"></div></div>
<div><div class="item"></div></div>
</div>
<div id="filter-found" class="container">
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="foobar"></div>
<div><div class="item w2"></div></div>
<div><div class="item"></div></div>
</div>
<div id="layout" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Layout extra big</h2>
<div id="layout-extra-big" class="container">
<div class="item w5"></div>
<div class="item w2"></div>
<div class="item w5"></div>
<div class="item w2"></div>
<div class="item w2"></div>
</div>
<h2>Consecutive</h2>
<div id="consecutive" class="container">
<div class="item i0"></div>
<div class="item i1"></div>
<div class="item i2"></div>
<div class="item i3"></div>
</div>
<div id="gridded1" class="container gridded">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
</div>
<div id="gridded2" class="container gridded">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
</div>
<div id="container-size" class="container">
<div class="item"></div>
<div class="item h2"></div>
</div>
<div id="add-remove" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item"></div>
</div>
<div id="stamped1" class="container has-stamps place-stamps">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
</div>
<div id="stamped2" class="container has-stamps">
<div class="item stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item stamp stamp2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="stamped3" class="container has-stamps place-stamps">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
</div>
<div id="stamped4" class="container has-stamps place-stamps">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="stamp stamp2"></div>
<div class="item"></div>
</div>
<h2>Placed borders</h2>
<div id="stamped-borders" class="container has-stamps">
<div class="stamp stamp1"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Adding</h2>
<div id="adding" class="container">
<div class="item"></div>
<div class="item"></div>
</div>
<h2>Prepend</h2>
<div id="prepend" class="container">
<div class="item"></div>
<div class="item"></div>
</div>
<div id="drag1" class="container">
<div class="item i0"></div>
<div class="item i1"></div>
<div class="item i2"></div>
<div class="item i3 dragger"></div>
<div class="item i4"></div>
<div class="item i5"></div>
<div class="item i6"></div>
<div class="item i7"></div>
</div>
<h2>Fitting</h2>
<div id="fitting" class="container">
<div class="item i0"></div>
<div class="item i1"></div>
<div class="item i2"></div>
<div class="item i3"></div>
<div class="item i4"></div>
<div class="item i5"></div>
<div class="item i6"></div>
<div class="item i7"></div>
</div>
<h2>Declarative</h2>
<div id="declarative" class="container js-packery">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- wrong quote marks for JSON -->
<div id="declarative-bad-json" class="container js-packery" data-packery-options="{ 'columnWidth': 30 }">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="declarative-good-json" class="container js-packery" data-packery-options='{ "columnWidth": 25, "rowHeight": 30, "transitionDuration": "1.2s", "isResizable": false }'>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h2>jQuery</h2>
<div id="jquery" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<h2>isInitLayout option</h2>
<div id="is-init-layout" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
<!-- <h2>isLayoutInstant option</h2>
<div id="is-layout-instant" class="container">
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
</div> -->
<div id="hidden-items" class="container">
<div class="item w2 h2 hidden"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/classie/classie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.js"></script>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../js/rect.js"></script>
<script src="../js/packer.js"></script>
<script src="../js/item.js"></script>
<script src="../js/packery.js"></script>
<script src="helpers.js"></script>
<script src="test-rect.js"></script>
<script src="test-packer.js"></script>
<script src="basics.js"></script>
<script src="defaults-empty.js"></script>
<script src="get-items.js"></script>
<script src="layout.js"></script>
<script src="layout-extra-big.js"></script>
<script src="consecutive.js"></script>
<script src="grid.js"></script>
<script src="container-size.js"></script>
<script src="remove.js"></script>
<script src="stamped.js"></script>
<script src="add-items.js"></script>
<script src="prepend.js"></script>
<script src="draggable.js"></script>
<script src="fit.js"></script>
<script src="jquery-plugin.js"></script>
<script src="declarative.js"></script>
<script src="is-init-layout.js"></script>
<script src="hidden-items.js"></script>
</body>
</html>