| 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 Bug 39139</title> | 5 <title>Test for Bug 39139</title> |
| 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 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> | 7 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> |
| 8 <style type="text/css"> | 8 <style type="text/css"> |
| 9 | 9 |
| 10 body { | 10 body { |
| (...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 103 use that on the whole set of objects. The second and third | 103 use that on the whole set of objects. The second and third |
| 104 animations will perform a full rotation on the y-axis in | 104 animations will perform a full rotation on the y-axis in |
| 105 opposite directions, alternating directions between rows. | 105 opposite directions, alternating directions between rows. |
| 106 | 106 |
| 107 Note that you currently have to specify an intermediate step | 107 Note that you currently have to specify an intermediate step |
| 108 for rotations even when you are using individual transformation | 108 for rotations even when you are using individual transformation |
| 109 constructs. | 109 constructs. |
| 110 | 110 |
| 111 */ | 111 */ |
| 112 @-webkit-keyframes x-spin { | 112 @-webkit-keyframes x-spin { |
| 113 0% { -webkit-transform: rotateX(0deg); } | 113 0% { transform: rotateX(0deg); } |
| 114 50% { -webkit-transform: rotateX(180deg); } | 114 50% { transform: rotateX(180deg); } |
| 115 100% { -webkit-transform: rotateX(360deg); } | 115 100% { transform: rotateX(360deg); } |
| 116 } | 116 } |
| 117 | 117 |
| 118 @-webkit-keyframes y-spin { | 118 @-webkit-keyframes y-spin { |
| 119 0% { -webkit-transform: rotateY(0deg); } | 119 0% { transform: rotateY(0deg); } |
| 120 50% { -webkit-transform: rotateY(180deg); } | 120 50% { transform: rotateY(180deg); } |
| 121 100% { -webkit-transform: rotateY(360deg); } | 121 100% { transform: rotateY(360deg); } |
| 122 } | 122 } |
| 123 | 123 |
| 124 @-webkit-keyframes back-y-spin { | 124 @-webkit-keyframes back-y-spin { |
| 125 0% { -webkit-transform: rotateY(360deg); } | 125 0% { transform: rotateY(360deg); } |
| 126 50% { -webkit-transform: rotateY(180deg); } | 126 50% { transform: rotateY(180deg); } |
| 127 100% { -webkit-transform: rotateY(0deg); } | 127 100% { transform: rotateY(0deg); } |
| 128 } | 128 } |
| 129 </style> | 129 </style> |
| 130 | 130 |
| 131 <script type="text/javascript"> | 131 <script type="text/javascript"> |
| 132 | 132 |
| 133 const POSTERS_PER_ROW = 12; | 133 const POSTERS_PER_ROW = 12; |
| 134 const RING_RADIUS = 200; | 134 const RING_RADIUS = 200; |
| 135 | 135 |
| 136 function setup_posters (row) | 136 function setup_posters (row) |
| 137 { | 137 { |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 174 <div id="rotate"> | 174 <div id="rotate"> |
| 175 <div id="ring-1" class="ring"></div> | 175 <div id="ring-1" class="ring"></div> |
| 176 <div id="ring-2" class="ring"></div> | 176 <div id="ring-2" class="ring"></div> |
| 177 <div id="ring-3" class="ring"></div> | 177 <div id="ring-3" class="ring"></div> |
| 178 </div> | 178 </div> |
| 179 </div> | 179 </div> |
| 180 | 180 |
| 181 </body> | 181 </body> |
| 182 | 182 |
| 183 </html> | 183 </html> |
| OLD | NEW |