stereo-img
Version:
a web component to display stereographic pictures on web pages, with VR support
75 lines (66 loc) • 2.47 kB
HTML
<html>
<head>
<title>Button Tests for stereo-img</title>
<script type="module" src="stereo-img.js"></script>
<style>
body {
font-family: sans-serif;
max-width: 800px;
margin: 2em auto;
line-height: 1.6;
}
stereo-img {
width: 100%;
height: 400px;
margin-bottom: 1em;
}
.test-case {
margin-bottom: 3em;
border-bottom: 1px solid #ccc;
padding-bottom: 2em;
}
h2 {
color: #333;
}
code {
background-color: #eee;
padding: 2px 4px;
border-radius: 3px;
}
</style>
</head>
<body>
<h1><code><stereo-img></code>: Button Rendering Tests</h1>
<div class="test-case">
<h2>Default Behavior (no <code>controlslist</code>)</h2>
<p>Expect to see the VR button and all four flat mode buttons (left, right, wiggle, and anaglyph), with 'left' as the active mode.</p>
<stereo-img src="examples/GOPR0.left-right.jpg"></stereo-img>
</div>
<div class="test-case">
<h2><code>controlslist="vr"</code></h2>
<p>Expect to see only the VR button.</p>
<stereo-img src="examples/GOPR0.left-right.jpg" controlslist="vr"></stereo-img>
</div>
<div class="test-case">
<h2><code>controlslist="left right wiggle"</code></h2>
<p>Expect to not see the VR button, and see only the left, right, and wiggle buttons in the flat mode group.</p>
<stereo-img src="examples/GOPR0.left-right.jpg" controlslist="left right wiggle"></stereo-img>
</div>
<div class="test-case">
<h2><code>controlslist="wiggle left right"</code> (order insensitive)</h2>
<p>Order insensitive, expect to not see VR, and see only the left, right, and wiggle buttons in the flat mode group.</p>
<stereo-img src="examples/GOPR0.left-right.jpg" controlslist="wiggle left right"></stereo-img>
</div>
<div class="test-case">
<h2><code>controlslist="vr left"</code></h2>
<p>Expect to see the VR button and no flat mode group, since there is only one choice available.</p>
<stereo-img src="examples/GOPR0.left-right.jpg" controlslist="vr left"></stereo-img>
</div>
<div class="test-case">
<h2><code>controlslist="vr left right wiggle anaglyph"</code></h2>
<p>Expect to see the VR button and the left, right, wiggle, and anaglyph buttons in the flat mode group.</p>
<stereo-img src="examples/GOPR0.left-right.jpg" controlslist="vr left right wiggle anaglyph"></stereo-img>
</div>
</body>
</html>