| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <style type="text/css" media="screen"> | 3 <style type="text/css" media="screen"> |
| 4 | 4 |
| 5 div:hover { | 5 div:hover { |
| 6 outline: 2px solid orange; | 6 outline: 2px solid orange; |
| 7 } | 7 } |
| 8 #container { | 8 #container { |
| 9 width: 200px; | 9 width: 200px; |
| 10 height: 200px; | 10 height: 200px; |
| 11 border: 1px solid black; | 11 border: 1px solid black; |
| 12 -webkit-perspective: 500px; | 12 -webkit-perspective: 500px; |
| 13 } | 13 } |
| 14 | 14 |
| 15 .box { | 15 .box { |
| 16 width: 200px; | 16 width: 200px; |
| 17 height: 200px; | 17 height: 200px; |
| 18 position: absolute; | 18 position: absolute; |
| 19 background-color: gray; | 19 background-color: gray; |
| 20 } | 20 } |
| 21 | 21 |
| 22 .middle { | 22 .middle { |
| 23 -webkit-transform-origin: 10% 50%; | 23 -webkit-transform-origin: 10% 50%; |
| 24 -webkit-transform: rotateY(40deg); | 24 transform: rotateY(40deg); |
| 25 } | 25 } |
| 26 | 26 |
| 27 .box:hover { | 27 .box:hover { |
| 28 background-color: orange !important; | 28 background-color: orange !important; |
| 29 } | 29 } |
| 30 | 30 |
| 31 .child { | 31 .child { |
| 32 position: absolute; | 32 position: absolute; |
| 33 top: 100px; | 33 top: 100px; |
| 34 left: 100px; | 34 left: 100px; |
| 35 background-color: blue; | 35 background-color: blue; |
| 36 -webkit-transform: translateZ(1px); | 36 transform: translateZ(1px); |
| 37 } | 37 } |
| 38 | 38 |
| 39 #results { | 39 #results { |
| 40 margin-top: 100px; | 40 margin-top: 100px; |
| 41 } | 41 } |
| 42 </style> | 42 </style> |
| 43 <script src="resources/hit-test-utils.js"></script> | 43 <script src="resources/hit-test-utils.js"></script> |
| 44 <script> | 44 <script> |
| 45 const hitTestData = [ | 45 const hitTestData = [ |
| 46 { 'point': [30, 30], 'target' : 'box1' }, | 46 { 'point': [30, 30], 'target' : 'box1' }, |
| 47 { 'point': [80, 100], 'target' : 'box1' }, | 47 { 'point': [80, 100], 'target' : 'box1' }, |
| 48 { 'point': [100, 120], 'target' : 'box2' }, | 48 { 'point': [100, 120], 'target' : 'box2' }, |
| 49 { 'point': [200, 250], 'target' : 'box2' }, | 49 { 'point': [200, 250], 'target' : 'box2' }, |
| 50 ]; | 50 ]; |
| 51 window.addEventListener('load', runTest, false); | 51 window.addEventListener('load', runTest, false); |
| 52 </script> | 52 </script> |
| 53 </head> | 53 </head> |
| 54 <body> | 54 <body> |
| 55 | 55 |
| 56 <div id="container"> | 56 <div id="container"> |
| 57 <div class="middle box" id="box1"> | 57 <div class="middle box" id="box1"> |
| 58 <div class="child box" id="box2"></div> | 58 <div class="child box" id="box2"></div> |
| 59 </div> | 59 </div> |
| 60 </div> | 60 </div> |
| 61 | 61 |
| 62 <div id="results"></div> | 62 <div id="results"></div> |
| 63 </body> | 63 </body> |
| 64 </html> | 64 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 637763002:
Unprefix usage of -webkit-transform in tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master