kevin
/
Popsu-coloque


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
							<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />

  <title>Flickity tests</title>

  <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" media="screen" />
  <link rel="stylesheet" href="test.css" media="screen" />
  <link rel="stylesheet" href="../css/flickity.css" media="screen" />

  <script src="../bower_components/qunit/qunit/qunit.js"></script>

  <!-- dependencies -->
  <script src="../bower_components/get-size/get-size.js"></script>
<!-- <script src="../bower_components/imagesloaded/imagesloaded.js"></script> -->
  <script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
  <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
  <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
  <script src="../bower_components/unipointer/unipointer.js"></script>
  <script src="../bower_components/unidragger/unidragger.js"></script>
  <!-- Flickity source -->
  <script src="../js/cell.js"></script>
  <script src="../js/slide.js"></script>
  <script src="../js/animate.js"></script>
  <script src="../js/flickity.js"></script>
  <script src="../js/drag.js"></script>
  <script src="../js/prev-next-button.js"></script>
  <script src="../js/page-dots.js"></script>
  <script src="../js/player.js"></script>
  <script src="../js/add-remove-cell.js"></script>
  <script src="../js/lazyload.js"></script>
  <!-- turn off accessibility for these tests
    was causing bugs with dragging tests -->
  <script>
    Flickity.defaults.accessibility = false;
  </script>
  <!-- unit tests -->
  <script src="unit/init.js"></script>
  <script src="unit/cell-selector.js"></script>
  <script src="unit/empty.js"></script>
  <script src="unit/get-parent-cell.js"></script>
  <script src="unit/position-cells.js"></script>
  <script src="unit/contain.js"></script>
  <!-- drag tests are buggy. moved to drag.html -->
  <!-- <script src="unit/drag.js"></script> -->
  <script src="unit/auto-play.js"></script>
  <script src="unit/prev-next-buttons.js"></script>
  <script src="unit/page-dots.js"></script>
  <script src="unit/get-wrap-cells.js"></script>
  <script src="unit/watch.js"></script>
  <script src="unit/resize.js"></script>
  <script src="unit/add-remove-cells.js"></script>
  <script src="unit/destroy.js"></script>
  <script src="unit/lazyload.js"></script>
  <script src="unit/lazyload-srcset.js"></script>
  <script src="unit/group-cells.js"></script>
  <script src="unit/adaptive-height.js"></script>
  <script src="unit/select-cell.js"></script>
  <script src="unit/change.js"></script>
  <script src="unit/initial-index.js"></script>

</head>
<body>

  <div id="qunit"></div>

  <h2>Init</h2>

  <div id="init" class="gallery">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>cellSelector</h2>

  <div id="cell-selector" class="gallery">
    <p class="not-cell not-cell1">not cell 1</p>
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <p class="not-cell not-cell2">not cell 2</p>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>empty</h2>

  <div id="empty" class="gallery"></div>

  <h2>getParentCell</h2>

  <div id="get-parent-cell" class="gallery">
    <div class="cell cell1"><span class="child1">1</span></div>
    <div class="cell"><div><span class="child2">2</span></div></div>
    <div class="cell cell3">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
  <div class="outside"></div>

  <h2>position cells</h2>

  <div id="position-cells" class="gallery variable-width">
    <div class="cell width2">1</div>
    <div class="cell">2</div>
    <div class="cell width3">3</div>
    <div class="cell width2">4</div>
    <div class="cell width3">5</div>
    <div class="cell">6</div>
  </div>

  <h2>contain</h2>

  <div id="contain" class="gallery variable-width">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell width3">3</div>
    <div class="cell width2">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>auto-play</h2>
  <div id="auto-play" class="gallery">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>

  <h2>prev/next buttons</h2>
  <div id="prev-next-buttons" class="gallery">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>page dots</h2>
  <div id="page-dots" class="gallery">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>getWrapCells</h2>
  <div id="get-wrap-cells" class="gallery variable-width">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>watch</h2>
  <div id="watch" class="gallery">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>resize</h2>
  <div id="resize" class="gallery">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>add/remove-cells</h2>
  <div id="add-remove-cells" class="gallery variable-width">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>destroy</h2>
  <div id="destroy" class="gallery">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>

  <h2>lazyload</h2>
  <div id="lazyload" class="gallery">
    <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
    <img class="img-cell" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
    <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
    <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
    <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
    <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
    <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
    <img class="img-cell" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
    <div class="cell"><img data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
  </div>

  <h2>lazyload srcset</h2>
  <div id="lazyload-srcset" class="gallery">
    <div class="cell">
      <img data-flickity-lazyload-src="https://picsum.photos/360/270/?image=718"
        data-flickity-lazyload-srcset="
          https://picsum.photos/720/540/?image=718 720w,
          https://picsum.photos/360/270/?image=718 360w"
        sizes="(min-width: 1024px) 720px, 360px" />
    </div>
    <img class="img-cell"
      data-flickity-lazyload-srcset="
        https://picsum.photos/720/540/?image=517 720w,
        https://picsum.photos/360/270/?image=517 360w"
      sizes="(min-width: 1024px) 720px, 360px"
      />
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

  <h2>groupCells</h2>
  <div id="group-cells" class="gallery">
    <div class="cell"></div>
    <div class="cell cell--width2"></div>
    <div class="cell"></div>

    <div class="cell cell--width3"></div>
    <div class="cell"></div>

    <div class="cell cell--width2"></div>
    <div class="cell cell--width2"></div>

    <div class="cell cell--width2"></div>

    <div class="cell cell--width4"></div>

    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell cell--width2"></div>

    <div class="cell"></div>
    <div class="cell"></div>
  </div>

  <h2>adaptiveHeight</h2>
  <div id="adaptive-height" class="gallery">
    <div class="cell cell--height2"></div>
    <div class="cell"></div>
    <div class="cell cell--height3"></div>

    <div class="cell"></div>
    <div class="cell cell--height4"></div>
    <div class="cell cell--height2"></div>

    <div class="cell"></div>
    <div class="cell cell--height2"></div>
  </div>

  <h2>selectCell</h2>
  <div id="select-cell" class="gallery">
    <div class="cell select-cell__0">0</div>
    <div class="cell select-cell__1">1</div>
    <div class="cell select-cell__2">2</div>
    <div class="cell select-cell__3">3</div>
    <div class="cell select-cell__4">4</div>
    <div class="cell select-cell__5">5</div>
    <div class="cell select-cell__6">6</div>
    <div class="cell select-cell__7">7</div>
  </div>

  <h2>change</h2>
  <div id="change" class="gallery">
    <div class="cell">0</div>
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
  </div>

  <h2>initialIndex</h2>
  <div id="initial-index" class="gallery variable-width">
    <div class="cell">0</div>
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell cell--initial">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
  </div>

</body>
</html>