Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 

302 строки
8.0 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Outlayer tests</title>
  6. <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" />
  7. <link rel="stylesheet" href="tests.css" />
  8. <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
  9. <script src="../bower_components/get-size/get-size.js"></script>
  10. <script src="../bower_components/matches-selector/matches-selector.js"></script>
  11. <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
  12. <script src="../bower_components/qunit/qunit/qunit.js"></script>
  13. <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  14. <script src="../bower_components/jquery-bridget/jquery-bridget.js"></script>
  15. <script src="../item.js"></script>
  16. <script src="../outlayer.js"></script>
  17. <script src="helpers.js"></script>
  18. <script src="../sandbox/cells-by-row.js"></script>
  19. <script src="unit/basics.js"></script>
  20. <script src="unit/defaults.js"></script>
  21. <script src="unit/options.js"></script>
  22. <script src="unit/filter-find.js"></script>
  23. <script src="unit/remove.js"></script>
  24. <script src="unit/add-items.js"></script>
  25. <script src="unit/prepend.js"></script>
  26. <script src="unit/stamp.js"></script>
  27. <script src="unit/offset.js"></script>
  28. <!-- <script src="item-on-transition-end.js"></script> -->
  29. <!-- with CellsByRow -->
  30. <script src="unit/create.js"></script>
  31. <script src="unit/layout.js"></script>
  32. <script src="unit/percent-position.js"></script>
  33. <script src="unit/hide-reveal.js"></script>
  34. <script src="unit/get-measurements.js"></script>
  35. <script src="unit/origin.js"></script>
  36. <script src="unit/transition-duration.js"></script>
  37. <script src="unit/container-size.js"></script>
  38. <script src="unit/destroy.js"></script>
  39. <script src="unit/declarative.js"></script>
  40. <script src="unit/jquery-plugin.js"></script>
  41. </head>
  42. <body>
  43. <h1>Outlayer tests</h1>
  44. <div id="qunit"></div>
  45. <div id="empty"></div>
  46. <h2>Defaults</h2>
  47. <div id="defaults" class="container">
  48. <div class="item"></div>
  49. </div>
  50. <h2>Options</h2>
  51. <div id="options" class="container">
  52. <div class="item"></div>
  53. </div>
  54. <h2>filter find</h2>
  55. <div id="children">
  56. <div class="item"></div>
  57. <div class="item"></div>
  58. <div class="item"></div>
  59. </div>
  60. <div id="filtered" class="container">
  61. <div class="item w2"></div>
  62. <div class="item h2"></div>
  63. <div></div>
  64. <div class="item w2"></div>
  65. <div class="item h2"></div>
  66. <div class="item"></div>
  67. <div class="item"></div>
  68. <div class="foobar"></div>
  69. </div>
  70. <div id="found" class="container">
  71. <div><div class="item w2"></div></div>
  72. <div><div class="item h2"></div></div>
  73. <div><div class="item w2"></div></div>
  74. <div><div class="item"></div></div>
  75. </div>
  76. <div id="filter-found" class="container">
  77. <div class="item h2"></div>
  78. <div class="item"></div>
  79. <div class="item"></div>
  80. <div class="foobar"></div>
  81. <div><div class="item w2"></div></div>
  82. <div><div class="item"></div></div>
  83. </div>
  84. <h2>remove</h2>
  85. <div id="remove" class="container">
  86. <div class="item"></div>
  87. <div class="item w2"></div>
  88. <div class="item"></div>
  89. <div class="item"></div>
  90. <div class="item w2"></div>
  91. <div class="item w2"></div>
  92. <div class="item"></div>
  93. <div class="item h2"></div>
  94. <div class="item h2"></div>
  95. <div class="item"></div>
  96. </div>
  97. <h2>Adding</h2>
  98. <div id="add-items" class="container">
  99. <div class="item"></div>
  100. <div class="item"></div>
  101. </div>
  102. <h2>Prepend</h2>
  103. <div id="prepend" class="container">
  104. <div class="item"></div>
  105. <div class="item"></div>
  106. </div>
  107. <h2>stamp</h2>
  108. <div id="stamps1" class="container">
  109. <div class="stamp stamp1"></div>
  110. <div class="stamp stamp2"></div>
  111. <div class="item"></div>
  112. <div class="item"></div>
  113. <div class="item"></div>
  114. <div class="item"></div>
  115. </div>
  116. <h2>layout</h2>
  117. <div id="layout" class="container">
  118. <div class="item"></div>
  119. <div class="item"></div>
  120. <div class="item"></div>
  121. <div class="item"></div>
  122. <div class="item"></div>
  123. <div class="item"></div>
  124. </div>
  125. <h2>percentPosition</h2>
  126. <div id="percent-position" class="container">
  127. <div class="item"></div>
  128. <div class="item"></div>
  129. <div class="item"></div>
  130. <div class="item"></div>
  131. <div class="item"></div>
  132. <div class="item"></div>
  133. </div>
  134. <h2>hide/reveal</h2>
  135. <div id="hide-reveal" class="container">
  136. <div class="item"></div>
  137. <div class="item hideable"></div>
  138. <div class="item"></div>
  139. <div class="item hideable"></div>
  140. <div class="item hideable"></div>
  141. <div class="item hideable"></div>
  142. </div>
  143. <h2>getMeasurements</h2>
  144. <div id="get-measurements" class="container">
  145. <div class="grid-sizer"></div>
  146. <div class="item"></div>
  147. <div class="item"></div>
  148. <div class="item"></div>
  149. <div class="item"></div>
  150. <div class="item"></div>
  151. <div class="item"></div>
  152. </div>
  153. <h2>_getElementOffset</h2>
  154. <div id="offset" class="container">
  155. <div class="stamp stamp1"></div>
  156. <div class="stamp stamp2"></div>
  157. </div>
  158. <!-- <h2>item onTransitionEnd</h2>
  159. <div id="item-on-transition-end" class="container">
  160. <div class="item"></div>
  161. </div> -->
  162. <h2>origin</h2>
  163. <div id="origin" class="container">
  164. <div class="item item1"></div>
  165. <div class="item item2"></div>
  166. <div class="item item3"></div>
  167. </div>
  168. <h2>transitionDuration</h2>
  169. <div id="transition-duration" class="container">
  170. <div class="item"></div>
  171. <div class="item"></div>
  172. <div class="item"></div>
  173. <div class="item"></div>
  174. </div>
  175. <h2>destroy</h2>
  176. <div id="destroy" class="container">
  177. <div class="item item1"></div>
  178. <div class="item item2"></div>
  179. <div class="item item3"></div>
  180. </div>
  181. <h2>Declarative</h2>
  182. <div id="declarative-attr" class="container" data-cells-by-row>
  183. <div class="item w2"></div>
  184. <div class="item h2"></div>
  185. <div class="item w2"></div>
  186. <div class="item h2"></div>
  187. <div class="item"></div>
  188. <div class="item"></div>
  189. </div>
  190. <!-- wrong quote marks for JSON -->
  191. <div id="declarative-attr-bad-json" class="container" data-cells-by-row="{ 'columnWidth': 30 }">
  192. <div class="item w2"></div>
  193. <div class="item h2"></div>
  194. <div class="item w2"></div>
  195. <div class="item h2"></div>
  196. <div class="item"></div>
  197. <div class="item"></div>
  198. </div>
  199. <div id="declarative-attr-good-json" class="container" data-cells-by-row='{ "columnWidth": 25, "rowHeight": 30, "isResizable": false, "foo": "bar" }'>
  200. <div class="item w2"></div>
  201. <div class="item h2"></div>
  202. <div class="item w2"></div>
  203. <div class="item h2"></div>
  204. <div class="item"></div>
  205. <div class="item"></div>
  206. </div>
  207. <div id="declarative-js-class" class="container js-cells-by-row">
  208. <div class="item w2"></div>
  209. <div class="item h2"></div>
  210. <div class="item w2"></div>
  211. <div class="item h2"></div>
  212. <div class="item"></div>
  213. <div class="item"></div>
  214. </div>
  215. <!-- wrong quote marks for JSON -->
  216. <div id="declarative-js-class-bad-json" class="container js-cells-by-row" data-cells-by-row-options="{ 'columnWidth': 30 }">
  217. <div class="item w2"></div>
  218. <div class="item h2"></div>
  219. <div class="item w2"></div>
  220. <div class="item h2"></div>
  221. <div class="item"></div>
  222. <div class="item"></div>
  223. </div>
  224. <div id="declarative-js-class-good-json" class="container js-cells-by-row" data-cells-by-row-options='{ "columnWidth": 25, "rowHeight": 30, "isResizable": false, "foo": "bar" }'>
  225. <div class="item w2"></div>
  226. <div class="item h2"></div>
  227. <div class="item w2"></div>
  228. <div class="item h2"></div>
  229. <div class="item"></div>
  230. <div class="item"></div>
  231. </div>
  232. <h2>container size</h2>
  233. <div id="container-size" class="container"></div>
  234. <h2>jQuery plugin</h2>
  235. <div id="jquery">
  236. <div class="item"></div>
  237. <div class="item"></div>
  238. <div class="item"></div>
  239. <div class="item"></div>
  240. <div class="item"></div>
  241. <div class="item"></div>
  242. </div>
  243. </body>
  244. </html>