Skip to content

Commit

Permalink
Fix very slow tests due to unsplash response times (#32533)
Browse files Browse the repository at this point in the history
  • Loading branch information
Dima Voytenko committed Feb 9, 2021
1 parent e255b6e commit 147e1c3
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 32 deletions.
56 changes: 28 additions & 28 deletions examples/image-slider.amp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,32 +150,32 @@ <h1>Drag/Click Slider with Customizable Labels</h1>

<p>NO labels; NO whatever modifications</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
</amp-image-slider>

<p>Images toggle their own fallback</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="boom" layout="fill">
<amp-img fallback src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img fallback src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
</amp-img>
<amp-img src="boom" layout="fill">
<amp-img fallback src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img fallback src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
</amp-img>
</amp-image-slider>

<p>Labels with NO positioning rules specified (default to both top left)</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>Labels with positioning rules specified</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label left-label-center-xy">BEFORE</div>
<div second class="label right-label-center-xy">AFTER</div>
</amp-image-slider>
Expand All @@ -185,41 +185,41 @@ <h1>Customizable Hints</h1>
<p>Hide hints through display trick</p>
<amp-image-slider class="hint-hidden" tabindex="0" layout="responsive" width="1024" height="600"
disable-hint-reappear>
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>Fully customized hint (current reversing the hint logos, changing sizes and margins)</p>
<amp-image-slider class="reversed-hint" tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>Fully customized hint (replace with triangles)</p>
<amp-image-slider class="triangle-hint" tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>Fully customized hint (centering a box)</p>
<amp-image-slider class="centered-hint" tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>

<p>No Reemerging hint</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600"
disable-hint-reappear>
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
Expand All @@ -233,17 +233,17 @@ <h1>Inside Carousel</h1>
type="slides"
controls>
<amp-image-slider layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
</amp-image-slider>
<amp-img src="https://unsplash.it/200/300?image=0"
width="400"
height="300"
layout="responsive"
alt="a sample image"></amp-img>
<amp-image-slider layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
</amp-image-slider>
<amp-img src="https://unsplash.it/200/300?image=1"
width="400"
Expand All @@ -256,8 +256,8 @@ <h1>Accessibility</h1>

<p>Has ARIA labels</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill" alt="Mountain"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill" alt="Ocean"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill" alt="Mountain"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill" alt="Ocean"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
Expand All @@ -266,14 +266,14 @@ <h1>Customization</h1>

<p>Set <code>initial-slider-position</code> to 0.3</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600" initial-slider-position="0.3">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
</amp-image-slider>

<p>Set <code>step-size</code> to 0.2</p>
<amp-image-slider tabindex="0" layout="responsive" width="1024" height="600" step-size="0.2">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
</amp-image-slider>

<h1>Test lightbox overlay</h1>
Expand Down
8 changes: 4 additions & 4 deletions extensions/amp-image-slider/0.1/test/integration/test-amp-image-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@ t.run('amp-image-slider', function () {
const sliderBody = `
<amp-image-slider tabindex="0" id="s1"
layout="responsive" width="1000" height="500">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
<button id="b1" on="tap:s1.seekTo(percent=0.4)">seekTo 10%</button>
<amp-image-slider tabindex="0" id="s2"
layout="responsive" width="1000" height="500" disable-hint-reappear
initial-slider-position="0.6" step-size="0.2">
<amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
<amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
<amp-img src="/examples/img/sea@2x.jpg" layout="fill"></amp-img>
<amp-img src="/examples/img/hero@2x.jpg" layout="fill"></amp-img>
<div first class="label">BEFORE</div>
<div second class="label">AFTER</div>
</amp-image-slider>
Expand Down

0 comments on commit 147e1c3

Please sign in to comment.