-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
78 lines (71 loc) · 2.4 KB
/
example.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
<!doctype html>
<html>
<head>
<style>
.gallery {
display: flex;
width: 100%;
flex-wrap: wrap;
}
.gallery img {
max-height: 20vh;
margin: 20px;
transition: transform 0.25s, dynamic-range-limit 0.25s;
dynamic-range-limit: standard;
}
.gallery img:hover {
transform: scale(1.15);
dynamic-range-limit: high;
}
.gallery img:active {
transform: scale(1.25);
dynamic-range-limit: high;
}
</style>
<script>
let tick = function() {
window.requestAnimationFrame(tick);
// To verify that the computed value returns dynamic-range-mix.
// console.log(window.getComputedStyle(Image01).getPropertyValue('dynamic-range-limit'));
}
let main = function() {
if (`dynamicRangeLimit` in Image01.style) {
Status.innerText += ' present';
Status.style.color = 'green';
} else {
Status.innerText += ' absent';
Status.style.color = 'red';
}
window.requestAnimationFrame(tick);
Image01.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/01.jpg";
Image02.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/02.jpg";
Image03.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/03.jpg";
Image04.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/04.jpg";
Image05.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/05.jpg";
Image06.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/06.jpg";
Image07.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/07.jpg";
Image08.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/08.jpg";
Image09.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/09.jpg";
Image10.src = "https://people.csail.mit.edu/ericchan/hdr/gain_map_images/10.jpg";
}
</script>
</head>
<body onload='main();'>
<p>CSS property dynamic-range-limit is available in Chrome Canary >= 120.0.6062.0.</p>
<p>Enable "Experimental Web Platform Features" in chrome://flags to use the feature.</p>
<p>Images are hosted at: <a href="https://people.csail.mit.edu/ericchan/hdr/jpeg-gain-map.php">https://people.csail.mit.edu/ericchan/hdr/jpeg-gain-map.php</a></p>
<p id="Status">dynamic-range-limit: </p>
<div class="gallery">
<img id="Image01">
<img id="Image02"/>
<img id="Image03"/>
<img id="Image04"/>
<img id="Image05"/>
<img id="Image06"/>
<img id="Image07"/>
<img id="Image08"/>
<img id="Image09"/>
<img id="Image10"/>
</div>
</body>
</html>