-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjpeg_test.html
152 lines (138 loc) · 5.92 KB
/
jpeg_test.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="styles/common.css" />
<style type="text/css">
.startrek_background {
background: url(images/jpg_dxt1/startrek_icons.jpg);
}
.circle {
background-image: url(images/jpg_dxt1/circles.jpg);
}
.repeat {
background-image: url(images/jpg_dxt1/green-24x24.jpg);
}
.google_jpg {
background-image: url(images/jpg_dxt1/google.jpg);
}
</style>
<title>DXT5 Compression problems</title>
</head>
<body onload="drawImages()">
<div>
<a href="index.html">Main Page</a><br>
</div>
<div>
<img class="google_logo google_jpg" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Google" title="Google" />
</div>
<br>
<div>
<span class="staff_icon">
<img class="staff_image" src="images/jpg_dxt1/256.jpg" alt="">
</span>
</div>
<br>
<div>
<h4>Animated text over image</h4>
<img src="images/jpg_dxt1/256.jpg" />
<div class="mvY">
Just text!
</div>
<div class="mvX">
Another text!
</div>
</div>
<div>
<h4>Simple Non Power of Two PNG</h4>
<img src="images/jpg_dxt1/npot.jpg" />
</div>
<div>
<h4>2 opacity images</h4>
<img style="opacity:0.5" src="images/jpg_dxt1/npot.jpg" />
<img style="opacity:0.5; transform: translate(-180px, -150px);" src="images/jpg_dxt1/alpha.jpg" />
</div>
<div>
<h4>CSS transform</h4>
Should be 3 different startrek icons.<br>
<img class="priority_normal startrek_background" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="normal" title="normal" />
<img class="priority_critical" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="critical" title="critical" />
<img class="priority_blocker" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="blocker" title="blocker" />
<br>Should be 3 different startrek icons. Scale 0.9<br>
<img class="priority_normal startrek_background scale09" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="normal" title="normal" />
<img class="priority_critical scale09" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="critical" title="critical" />
<img class="priority_blocker scale09" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="blocker" title="blocker" />
<br>Should be 3 different startrek icons. Scale 1.1<br>
<img class="priority_normal startrek_background scale11" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="normal" title="normal" />
<img class="priority_critical startrek_background scale11" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="critical" title="critical" />
<img class="priority_blocker startrek_background scale11" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="blocker" title="blocker" />
<br>
Should be 5 circles of different color.<br>
<img class="circle circle_black" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
<img class="circle circle_red" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
<img class="circle circle_green" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
<img class="circle circle_blue" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
<img class="circle circle_yellow" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>
<div>
<h4>Background-repeat</h4>
<div class="repeat" style="background-repeat: repeat repeat;"></div>
<div class="repeat" style="background-repeat: repeat space;"></div>
<div class="repeat" style="background-repeat: repeat round;"></div>
<br>
<div class="repeat" style="background-repeat: space repeat;"></div>
<div class="repeat" style="background-repeat: space space;"></div>
<div class="repeat" style="background-repeat: space round;"></div>
<br>
<div class="repeat" style="background-repeat: round repeat;"></div>
<div class="repeat" style="background-repeat: round space;"></div>
<div class="repeat" style="background-repeat: round round;"></div>
<br>
The above images should look exactly like the image below. </br>
<img src="images/jpg_dxt1/repeat_expected.jpg" />
</div>
<div>
<h4>Progressive images</h4>
Progressive jpg<br>
<img src="images/jpg_dxt1/progressive_jpg.jpg" />
</div>
<div>
<h4>CMYK color profile</h4>
<img src="images/jpg_dxt1/cmyk.jpg" />
<br>
<img src="images/jpg_dxt1/JCS_CMYK_35100.jpg" />
</div>
<div>
<h4>Canvas</h4>
<canvas id="canvas" width=500 height=300 style="height: 300px; width: 500px; top: 0px; left: 0px; transform: translate3d(0px, 0px, 0px) scale(1, 1); z-index: 2500; cursor: default;"></canvas>
<br>
The above images should be the second image below on top of the first image below, shifted to the right.
<br>
<img id="source256" src="images/jpg_dxt1/256.jpg">
<img id="source" src="images/jpg_dxt1/pastebin_logo_side_outline.jpg">
</div>
<div>
<h4>Miscellaneous</h4>
<img src="images/jpg_dxt1/achievement.jpg" />
</div>
<div>
<h4>PNG with alpha and scale</h4>
<img src="images/jpg_dxt1/alpha.jpg" />
<img class="scale05" src="images/jpg_dxt1/alpha.jpg" />
<img class="scale15" src="images/jpg_dxt1/alpha.jpg" />
</div>
<div>
<h4>Scaled PNG</h4>
<img style="width:100%" src="images/jpg_dxt1/npot.jpg" />
</div>
<script type="text/javascript">
function drawImages() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = document.getElementById('source');
var image256 = document.getElementById('source256');
ctx.drawImage(image256, 10, 0);
ctx.drawImage(image, 150, 0);
}
</script>
</body>
</html>