-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest.php
More file actions
113 lines (100 loc) · 4.65 KB
/
Copy pathtest.php
File metadata and controls
113 lines (100 loc) · 4.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<meta charset="utf-8">
<style>
h4 { margin: 1ex 0; text-decoration: none; font-family: Arial Narrow, Arial; }
p { margin: 1ex 0; }
ol { padding-left: 1em; }
</style>
<!--- TEST... ---------------------------------------------------------------->
<?php //!!?? This still isn't solved with WHATWG's HTML?!
print file_get_contents('component.htpl');
print "<script>" . file_get_contents('component.js') . "</script>";
?>
<style>
z-img.spaced { background: red; /*!!DEBUG!!*/
margin: 2px 0.25ex;
}
z-img.block { background: yellow; /*!!DEBUG!!*/
display: block;
--thumb-w: 50px;
}
z-img.big {
--thumb-w: 200px;
/*--zoomv-w: 25%;*/
--zoomv-w: 1000px;
}
z-img.framed {
border: 2px solid pink;
margin: 0;
--zoomv-border-w: 2px;
--zoomv-border-c: green;
--zoomv-border-s: solid;
--zoomv-border-r: 5px;
}
</style>
<ol>
<li>
<h4> All defaults </h4>
<p> EXPECTED: popup mode, thumb width ~100px, zoom width ~500px, 1px grey borders </p>
<z-img src="img/example.jpg">
<hr>
<li>
<h4> Explicitly set modes (+ title attr. for "tooltips")</h4>
<p> EXPECTED: basic, inplace, popup modes (in this order). And no space between them.
<br> Also: tooltip messages should appear on hover, indicating the zoom mode. </p>
<z-img class="basic" src="img/example.jpg" title="basic mode">
</z-img><z-img class="inplace" src="img/example.jpg" title="inplace mode">
</z-img><z-img class="popup" src="img/example.jpg" title="popup mode"></z-img>
<li>
<h4> All defaults (but various modes), with some explicit margin (0.25ex) </h4>
<p> EXPECTED: thumb width ~100px, zoom width ~500px, 1px grey borders, even spacing </p>
<z-img class="basic spaced" src="img/example.jpg">BASIC in-place mode
</z-img><z-img class="inplace spaced" src="img/example.jpg">IN-PLACE mode
</z-img><z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img><z-img class="basic spaced" src="img/example.jpg">BASIC in-place mode
</z-img><z-img class="inplace spaced" src="img/example.jpg">IN-PLACE mode
</z-img><z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img><z-img class="basic spaced" src="img/example.jpg">BASIC in-place mode
</z-img><z-img class="popup spaced" src="img/example.jpg">BASIC in-place mode
</z-img><z-img class="inplace spaced" src="img/example.jpg">in-place mode
</z-img><z-img class="inplace spaced" src="img/example.jpg">in-place mode
</z-img><z-img class="inplace spaced" src="img/example.jpg">in-place mode</z-img>
<br> <z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img><z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img><z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img><z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img><z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img><z-img class="popup spaced" src="img/example.jpg">POPUP mode
</z-img>
<hr>
<li>
<h4> Block mode, small thumbs (50px), no margin </h4>
<p> EXPECTED: yellow full-width stripes (as box bgnd.), magnifier icon within the thumbnail rect. </p>
<z-img class="basic block" src="img/example.jpg">BASIC in-place mode
</z-img><z-img class="inplace block" src="img/example.jpg">IN-PLACE mode
</z-img><z-img class="popup block" src="img/example.jpg">POPUP mode</z-img>
<hr>
<li>
<h4> 200px thumb width, variable heights; 1000px zoom width </h4>
<p> EXPECTED: panning disabled for images < 1000px, full-size images stretched to fill the zoom view </p>
<z-img class="basic big" src="img/martinet-gh.jpg">BASIC in-place mode</z-img>
<z-img class="inplace big" src="img/martinet-toad.jpg">IN-PLACE mode</z-img>
<z-img class="popup big" src="img/martinet-wasp.jpg">POPUP mode</z-img>
<hr>
<li>
<h4> Default thumb/zoom width, default zero margin, custom border, magnif. icon restyle </h4>
<p> EXPECTED: 2px pink border, neither horiz. nor vert. space between the images,
mag. icon: green for the grassh., pink for the toad, yellow for the wasp,
and the magnifier is darker grey for the latter two.
<br> Also: an ugly 2px green, rounded frame around the zoom view. </p>
<!--p> NOTE: Some mysterious margin used to be there, which suddenly disappeared by some change, only to reappear again...:-o
But that was just the linefeeds between the tags!</p-->
<z-img class="inplace framed" src="img/martinet-toad.jpg"
style="--magicon-bg: pink; --magicon-c: black; --magicon-op: 0.5;">>IN-PLACE mode
</z-img><z-img class="basic framed" src="img/martinet-gh.jpg"
style="--magicon-bg: lightgreen; --magicon-c: black;">BASIC in-place mode
</z-img>
<br> <z-img class="popup framed" src="img/martinet-wasp.jpg"
style="--magicon-bg: yellow; --magicon-c: black; --magicon-op: 0.5;">POPUP mode</z-img>
<hr>
</ol>