/
reflection-overflow-scroll.html
80 lines (70 loc) · 1.75 KB
/
reflection-overflow-scroll.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
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="resources/js-test-style.css">
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<div id="main">
<p>
There should be horizontal scroll bar.
<div id="horizontal" style="overflow-x:scroll; width:150px;">
<div style="-webkit-box-reflect:right; width:150px;">
Madam, I am Adam.
</div>
</div>
<p>
Also, there should be vertical scroll bar.
<div id="vertical" style="overflow-y:scroll; width:150px; height:80px;">
<div style="-webkit-box-reflect:below; height:80px;">
Madam,<br>
I<br>
am<br>
Adam.
</div>
</div>
<p>
With flexbox. There should be horizontal scroll bar.
<div id="horizontal_flex" style="overflow-x:scroll; width:150px;">
<div style="display:-webkit-box; -webkit-box-reflect:right; width:150px;">
Madam, I am Adam.
</div>
</div>
<p>
With flexbox. There should be vertical scroll bar.
<div id="vertical_flex" style="overflow-y:scroll; width:150px; height:80px;">
<div style="display:-webkit-box; -webkit-box-reflect:below; height:80px;">
Madam,<br>
I<br>
am<br>
Adam.
</div>
</div>
<p>
With table. There should be horizontal scroll bar.
<div id="horizontal_table" style="overflow-x:scroll; width:150px;">
<table style="-webkit-box-reflect:right; width:150px;">
<tr><td>
Madam, I am Adam.
</tr></td>
</table>
</div>
<p>
With table. There should be vertical scroll bar.
<div id="vertical_table" style="overflow-y:scroll; width:150px; height:80px;">
<table style="-webkit-box-reflect:below; height:80px;">
<tr><td>
Madam,<br>
I<br>
am<br>
Adam.
</tr></td>
</table>
</div>
</div>
<script src="resources/reflection-overflow-scroll.js"></script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>