| 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>Compare Compound Transforms (translate scale rotate)</title> | 7 <title>Compare Compound Transforms (translate scale rotate)</title> |
| 8 | 8 |
| 9 <style type="text/css" media="screen"> | 9 <style type="text/css" media="screen"> |
| 10 div { | 10 div { |
| (...skipping 12 matching lines...) Expand all Loading... |
| 23 .box { | 23 .box { |
| 24 background-color: green; | 24 background-color: green; |
| 25 } | 25 } |
| 26 </style> | 26 </style> |
| 27 </head> | 27 </head> |
| 28 <body> | 28 <body> |
| 29 | 29 |
| 30 <p>Test ensures that nested transformed elements produce the same result as a si
ngle compound transform.You should not see any red in the two tests below</p> | 30 <p>Test ensures that nested transformed elements produce the same result as a si
ngle compound transform.You should not see any red in the two tests below</p> |
| 31 <div class="container"> | 31 <div class="container"> |
| 32 <p>Translate first</p> | 32 <p>Translate first</p> |
| 33 <div style="-webkit-transform: translate(75px, 20px)"> | 33 <div style="transform: translate(75px, 20px)"> |
| 34 <div style="-webkit-transform: scale(1.6, 1.6)"> | 34 <div style="transform: scale(1.6, 1.6)"> |
| 35 <div style="-webkit-transform: rotate(45deg)"> | 35 <div style="transform: rotate(45deg)"> |
| 36 <div class="box" style="background-color: red">Individual</div> | 36 <div class="box" style="background-color: red">Individual</div> |
| 37 </div> | 37 </div> |
| 38 </div> | 38 </div> |
| 39 </div> | 39 </div> |
| 40 <div class="box" style="-webkit-transform: translate(75px, 20px) scale(1.6, 1.
6) rotate(45deg);"></div> | 40 <div class="box" style="transform: translate(75px, 20px) scale(1.6, 1.6) rotat
e(45deg);"></div> |
| 41 </div> | 41 </div> |
| 42 | 42 |
| 43 <div class="container"> | 43 <div class="container"> |
| 44 <p>Translate second</p> | 44 <p>Translate second</p> |
| 45 <div style="-webkit-transform: scale(1.6, 1.6)"> | 45 <div style="transform: scale(1.6, 1.6)"> |
| 46 <div style="-webkit-transform: translate(75px, 20px)"> | 46 <div style="transform: translate(75px, 20px)"> |
| 47 <div style="-webkit-transform: rotate(45deg)"> | 47 <div style="transform: rotate(45deg)"> |
| 48 <div class="box" style="background-color: red">Individual</div> | 48 <div class="box" style="background-color: red">Individual</div> |
| 49 </div> | 49 </div> |
| 50 </div> | 50 </div> |
| 51 </div> | 51 </div> |
| 52 <div class="box" style="-webkit-transform: scale(1.6, 1.6) translate(75px, 20p
x) rotate(45deg);"></div> | 52 <div class="box" style="transform: scale(1.6, 1.6) translate(75px, 20px) rotat
e(45deg);"></div> |
| 53 </div> | 53 </div> |
| 54 | 54 |
| 55 </body> | 55 </body> |
| 56 </html> | 56 </html> |
| OLD | NEW |