You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
ant-design-vue/components/carousel/__tests__/__snapshots__/demo.test.js.snap

431 lines
20 KiB

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">
<div class="slick-list">
<div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li>
<li class=""><button class="">3</button></li>
<li class=""><button class="">4</button></li>
</ul>
</div>
</div>
`;
exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">
<div class="slick-list">
<div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li>
<li class=""><button class="">3</button></li>
<li class=""><button class="">4</button></li>
</ul>
</div>
</div>
`;
exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">
<div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><i class="anticon anticon-left-circle"></i></div>
<div class="slick-list">
<div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
</div>
</div>
<div class="custom-slick-arrow slick-arrow slick-next" style="right: 10px; display: block;"><i class="anticon anticon-right-circle"></i></div>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li>
<li class=""><button class="">3</button></li>
<li class=""><button class="">4</button></li>
</ul>
</div>
</div>
`;
exports[`renders ./components/carousel/demo/customPaging.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized"><button type="button" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
<div class="slick-list">
<div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg"></div>
</div>
</div>
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg"></div>
</div>
</div>
</div>
</div><button type="button" class="slick-arrow slick-next" style="display: block;"> Next</button>
<ul class="slick-dots slick-thumb" style="display: block;">
<li class="slick-active"><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract01.jpg"></a></li>
<li class=""><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract02.jpg"></a></li>
<li class=""><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract03.jpg"></a></li>
<li class=""><a class=""><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/abstract04.jpg"></a></li>
</ul>
</div>
</div>
`;
exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
<div class="ant-carousel">
<div class="slick-slider slick-initialized">
<div class="slick-list">
<div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%; position: relative; left: 0px; opacity: 1;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -11px; opacity: 0;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -22px; opacity: 0;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -33px; opacity: 0;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li>
<li class=""><button class="">3</button></li>
<li class=""><button class="">4</button></li>
</ul>
</div>
</div>
`;
exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
<div class="ant-carousel ant-carousel-vertical">
<div class="slick-slider slick-vertical slick-initialized">
<div class="slick-list">
<div class="slick-track" style="width: 900%; left: -100%;">
<div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="0" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>1</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>2</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>3</h3>
</div>
</div>
</div>
<div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
<div>
<div tabindex="-1" class="" style="width: 100%; display: inline-block;">
<h3>4</h3>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button class="">1</button></li>
<li class=""><button class="">2</button></li>
<li class=""><button class="">3</button></li>
<li class=""><button class="">4</button></li>
</ul>
</div>
</div>
`;