OLD | NEW |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
3 | 3 |
4 <html lang="en"> | 4 <html lang="en"> |
5 <head> | 5 <head> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
7 <title>Overflow, positioning and compositing</title> | 7 <title>Overflow, positioning and compositing</title> |
8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
9 .container { | 9 .container { |
10 display: inline-block; | 10 display: inline-block; |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
44 } | 44 } |
45 | 45 |
46 window.addEventListener('load', doTest, false); | 46 window.addEventListener('load', doTest, false); |
47 </script> | 47 </script> |
48 </head> | 48 </head> |
49 | 49 |
50 <body> | 50 <body> |
51 | 51 |
52 <p>All of the boxes should look the same.</p> | 52 <p>All of the boxes should look the same.</p> |
53 <div class="container"> | 53 <div class="container"> |
54 <div class="inner" style="-webkit-transform: translateZ(0)"> | 54 <div class="inner" style="transform: translateZ(0)"> |
55 <p> | 55 <p> |
56 This is the inner div that scrolls. | 56 This is the inner div that scrolls. |
57 </p> | 57 </p> |
58 </div> | 58 </div> |
59 </div> | 59 </div> |
60 | 60 |
61 <div class="container"> | 61 <div class="container"> |
62 <div class="inner" style="position: relative; -webkit-transform: translateZ(
0)"> | 62 <div class="inner" style="position: relative; transform: translateZ(0)"> |
63 <p> | 63 <p> |
64 This is the inner div that scrolls. | 64 This is the inner div that scrolls. |
65 </p> | 65 </p> |
66 </div> | 66 </div> |
67 </div> | 67 </div> |
68 | 68 |
69 <div class="container" style="position: relative"> | 69 <div class="container" style="position: relative"> |
70 <div class="inner" style="-webkit-transform: translateZ(0)"> | 70 <div class="inner" style="transform: translateZ(0)"> |
71 <p> | 71 <p> |
72 This is the inner div that scrolls. | 72 This is the inner div that scrolls. |
73 </p> | 73 </p> |
74 </div> | 74 </div> |
75 </div> | 75 </div> |
76 | 76 |
77 <div class="container" style="position: relative"> | 77 <div class="container" style="position: relative"> |
78 <div class="inner" style="position: relative; -webkit-transform: translateZ(
0)"> | 78 <div class="inner" style="position: relative; transform: translateZ(0)"> |
79 <p> | 79 <p> |
80 This is the inner div that scrolls. | 80 This is the inner div that scrolls. |
81 </p> | 81 </p> |
82 </div> | 82 </div> |
83 </div> | 83 </div> |
84 <br> | 84 <br> |
85 | 85 |
86 <div class="container" style="-webkit-transform: translateZ(0)"> | 86 <div class="container" style="transform: translateZ(0)"> |
87 <div class="inner"> | 87 <div class="inner"> |
88 <p> | 88 <p> |
89 This is the inner div that scrolls. | 89 This is the inner div that scrolls. |
90 </p> | 90 </p> |
91 </div> | 91 </div> |
92 </div> | 92 </div> |
93 | 93 |
94 <div class="container" style="-webkit-transform: translateZ(0)"> | 94 <div class="container" style="transform: translateZ(0)"> |
95 <div class="inner" style="position: relative;"> | 95 <div class="inner" style="position: relative;"> |
96 <p> | 96 <p> |
97 This is the inner div that scrolls. | 97 This is the inner div that scrolls. |
98 </p> | 98 </p> |
99 </div> | 99 </div> |
100 </div> | 100 </div> |
101 | 101 |
102 <div class="container" style="-webkit-transform: translateZ(0)"> | 102 <div class="container" style="transform: translateZ(0)"> |
103 <div class="inner" style="-webkit-transform: translateZ(0)"> | 103 <div class="inner" style="transform: translateZ(0)"> |
104 <p> | 104 <p> |
105 This is the inner div that scrolls. | 105 This is the inner div that scrolls. |
106 </p> | 106 </p> |
107 </div> | 107 </div> |
108 </div> | 108 </div> |
109 | 109 |
110 <div class="container" style="-webkit-transform: translateZ(0)"> | 110 <div class="container" style="transform: translateZ(0)"> |
111 <div class="inner" style="position: relative; -webkit-transform: translateZ(
0)"> | 111 <div class="inner" style="position: relative; transform: translateZ(0)"> |
112 <p> | 112 <p> |
113 This is the inner div that scrolls. | 113 This is the inner div that scrolls. |
114 </p> | 114 </p> |
115 </div> | 115 </div> |
116 </div> | 116 </div> |
117 <br> | 117 <br> |
118 | 118 |
119 | 119 |
120 <div class="container" style="position: relative; -webkit-transform: translate
Z(0)"> | 120 <div class="container" style="position: relative; transform: translateZ(0)"> |
121 <div class="inner"> | 121 <div class="inner"> |
122 <p> | 122 <p> |
123 This is the inner div that scrolls. | 123 This is the inner div that scrolls. |
124 </p> | 124 </p> |
125 </div> | 125 </div> |
126 </div> | 126 </div> |
127 | 127 |
128 <div class="container" style="position: relative; -webkit-transform: translate
Z(0)"> | 128 <div class="container" style="position: relative; transform: translateZ(0)"> |
129 <div class="inner" style="position: relative;"> | 129 <div class="inner" style="position: relative;"> |
130 <p> | 130 <p> |
131 This is the inner div that scrolls. | 131 This is the inner div that scrolls. |
132 </p> | 132 </p> |
133 </div> | 133 </div> |
134 </div> | 134 </div> |
135 | 135 |
136 <div class="container" style="position: relative; -webkit-transform: translate
Z(0)"> | 136 <div class="container" style="position: relative; transform: translateZ(0)"> |
137 <div class="inner" style="-webkit-transform: translateZ(0)"> | 137 <div class="inner" style="transform: translateZ(0)"> |
138 <p> | 138 <p> |
139 This is the inner div that scrolls. | 139 This is the inner div that scrolls. |
140 </p> | 140 </p> |
141 </div> | 141 </div> |
142 </div> | 142 </div> |
143 | 143 |
144 <div class="container" style="position: relative; -webkit-transform: translate
Z(0)"> | 144 <div class="container" style="position: relative; transform: translateZ(0)"> |
145 <div class="inner" style="position: relative; -webkit-transform: translateZ(
0)"> | 145 <div class="inner" style="position: relative; transform: translateZ(0)"> |
146 <p> | 146 <p> |
147 This is the inner div that scrolls. | 147 This is the inner div that scrolls. |
148 </p> | 148 </p> |
149 </div> | 149 </div> |
150 </div> | 150 </div> |
151 | 151 |
152 | 152 |
153 | 153 |
154 | 154 |
155 | 155 |
156 </body> | 156 </body> |
157 </html> | 157 </html> |
158 | 158 |
OLD | NEW |