| OLD | NEW |
| 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" | 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" |
| 2 "http://www.w3.org/TR/html4/strict.dtd"> | 2 "http://www.w3.org/TR/html4/strict.dtd"> |
| 3 <html> | 3 <html> |
| 4 <head> | 4 <head> |
| 5 <title>Test for Bugs 39295 and 39297</title> | 5 <title>Test for Bugs 39295 and 39297</title> |
| 6 <meta http-equiv="refresh" content="5"> | 6 <meta http-equiv="refresh" content="5"> |
| 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 8 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> | 8 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> |
| 9 <style type="text/css"> | 9 <style type="text/css"> |
| 10 | 10 |
| (...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 104 use that on the whole set of objects. The second and third | 104 use that on the whole set of objects. The second and third |
| 105 animations will perform a full rotation on the y-axis in | 105 animations will perform a full rotation on the y-axis in |
| 106 opposite directions, alternating directions between rows. | 106 opposite directions, alternating directions between rows. |
| 107 | 107 |
| 108 Note that you currently have to specify an intermediate step | 108 Note that you currently have to specify an intermediate step |
| 109 for rotations even when you are using individual transformation | 109 for rotations even when you are using individual transformation |
| 110 constructs. | 110 constructs. |
| 111 | 111 |
| 112 */ | 112 */ |
| 113 @-webkit-keyframes x-spin { | 113 @-webkit-keyframes x-spin { |
| 114 0% { -webkit-transform: rotateX(0deg); } | 114 0% { transform: rotateX(0deg); } |
| 115 50% { -webkit-transform: rotateX(180deg); } | 115 50% { transform: rotateX(180deg); } |
| 116 100% { -webkit-transform: rotateX(360deg); } | 116 100% { transform: rotateX(360deg); } |
| 117 } | 117 } |
| 118 | 118 |
| 119 @-webkit-keyframes y-spin { | 119 @-webkit-keyframes y-spin { |
| 120 0% { -webkit-transform: rotateY(0deg); } | 120 0% { transform: rotateY(0deg); } |
| 121 50% { -webkit-transform: rotateY(180deg); } | 121 50% { transform: rotateY(180deg); } |
| 122 100% { -webkit-transform: rotateY(360deg); } | 122 100% { transform: rotateY(360deg); } |
| 123 } | 123 } |
| 124 | 124 |
| 125 @-webkit-keyframes back-y-spin { | 125 @-webkit-keyframes back-y-spin { |
| 126 0% { -webkit-transform: rotateY(360deg); } | 126 0% { transform: rotateY(360deg); } |
| 127 50% { -webkit-transform: rotateY(180deg); } | 127 50% { transform: rotateY(180deg); } |
| 128 100% { -webkit-transform: rotateY(0deg); } | 128 100% { transform: rotateY(0deg); } |
| 129 } | 129 } |
| 130 </style> | 130 </style> |
| 131 | 131 |
| 132 <script type="text/javascript"> | 132 <script type="text/javascript"> |
| 133 | 133 |
| 134 const POSTERS_PER_ROW = 12; | 134 const POSTERS_PER_ROW = 12; |
| 135 const RING_RADIUS = 200; | 135 const RING_RADIUS = 200; |
| 136 | 136 |
| 137 function setup_posters (row) | 137 function setup_posters (row) |
| 138 { | 138 { |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 177 <div id="rotate"> | 177 <div id="rotate"> |
| 178 <div id="ring-1" class="ring"></div> | 178 <div id="ring-1" class="ring"></div> |
| 179 <div id="ring-2" class="ring"></div> | 179 <div id="ring-2" class="ring"></div> |
| 180 <div id="ring-3" class="ring"></div> | 180 <div id="ring-3" class="ring"></div> |
| 181 </div> | 181 </div> |
| 182 </div> | 182 </div> |
| 183 | 183 |
| 184 </body> | 184 </body> |
| 185 | 185 |
| 186 </html> | 186 </html> |
| OLD | NEW |