| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 <title>More point mapping through 3D transform hierarchies</title> | 3 <title>More point mapping through 3D transform hierarchies</title> |
| 4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> | 4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> |
| 5 <script type="text/javascript" charset="utf-8"> | 5 <script type="text/javascript" charset="utf-8"> |
| 6 | 6 |
| 7 function test() | 7 function test() |
| 8 { | 8 { |
| 9 // Scroll so that frame view offsets are non-zero | 9 // Scroll so that frame view offsets are non-zero |
| 10 // window.scrollTo(20, 100); | 10 // window.scrollTo(20, 100); |
| (...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 82 border: 1px solid black; | 82 border: 1px solid black; |
| 83 background-color: #AA7994; | 83 background-color: #AA7994; |
| 84 -webkit-transform-style: flat; | 84 -webkit-transform-style: flat; |
| 85 -webkit-box-sizing: border-box; | 85 -webkit-box-sizing: border-box; |
| 86 } | 86 } |
| 87 | 87 |
| 88 .inner { | 88 .inner { |
| 89 background-color: blue; | 89 background-color: blue; |
| 90 height: 90px; | 90 height: 90px; |
| 91 width: 90px; | 91 width: 90px; |
| 92 -webkit-transform: rotateY(30deg); | 92 transform: rotateY(30deg); |
| 93 } | 93 } |
| 94 | 94 |
| 95 #results { | 95 #results { |
| 96 position: absolute; | 96 position: absolute; |
| 97 left: 30px; | 97 left: 30px; |
| 98 top: 500px; | 98 top: 500px; |
| 99 } | 99 } |
| 100 | 100 |
| 101 #mousepos { | 101 #mousepos { |
| 102 position: absolute; | 102 position: absolute; |
| 103 left: 430px; | 103 left: 430px; |
| 104 top: 400px; | 104 top: 400px; |
| 105 color: gray; | 105 color: gray; |
| 106 font-size: smaller; | 106 font-size: smaller; |
| 107 } | 107 } |
| 108 </style> | 108 </style> |
| 109 </head> | 109 </head> |
| 110 <body onclick="clicked(event)"> | 110 <body onclick="clicked(event)"> |
| 111 | 111 |
| 112 <div id="results"></div> | 112 <div id="results"></div> |
| 113 | 113 |
| 114 <div class="test"> | 114 <div class="test"> |
| 115 <!-- preserve-3d element with no transform--> | 115 <!-- preserve-3d element with no transform--> |
| 116 <div class="container box" id="box1"> | 116 <div class="container box" id="box1"> |
| 117 <div class="transformed-3d box" style="-webkit-transform: rotateY(-30deg);"
id="box2"> | 117 <div class="transformed-3d box" style="transform: rotateY(-30deg);" id="box2
"> |
| 118 <div class="transformed-3d box" id="box3"> | 118 <div class="transformed-3d box" id="box3"> |
| 119 <div class="inner box" id="box4"> | 119 <div class="inner box" id="box4"> |
| 120 </div> | 120 </div> |
| 121 </div> | 121 </div> |
| 122 </div> | 122 </div> |
| 123 </div> | 123 </div> |
| 124 </div> | 124 </div> |
| 125 | 125 |
| 126 <div class="test"> | 126 <div class="test"> |
| 127 <!-- layer with no transform--> | 127 <!-- layer with no transform--> |
| 128 <div class="container box" id="box5"> | 128 <div class="container box" id="box5"> |
| 129 <div class="transformed-3d box" style="-webkit-transform: rotateY(-30deg);"
id="box6"> | 129 <div class="transformed-3d box" style="transform: rotateY(-30deg);" id="box6
"> |
| 130 <div class="box" style="position: relative; padding-left: 20px" id="box7"> | 130 <div class="box" style="position: relative; padding-left: 20px" id="box7"> |
| 131 <div class="inner box" id="box8"> | 131 <div class="inner box" id="box8"> |
| 132 </div> | 132 </div> |
| 133 </div> | 133 </div> |
| 134 </div> | 134 </div> |
| 135 </div> | 135 </div> |
| 136 </div> | 136 </div> |
| 137 | 137 |
| 138 <div class="test"> | 138 <div class="test"> |
| 139 <!-- non-layer with no transform--> | 139 <!-- non-layer with no transform--> |
| 140 <div class="container box" id="box9"> | 140 <div class="container box" id="box9"> |
| 141 <div class="transformed-3d box" style="-webkit-transform: rotateY(-30deg);"
id="box10"> | 141 <div class="transformed-3d box" style="transform: rotateY(-30deg);" id="box1
0"> |
| 142 <div class="box" style="padding-left: 20px" id="box11"> | 142 <div class="box" style="padding-left: 20px" id="box11"> |
| 143 <div class="inner box" id="box12"> | 143 <div class="inner box" id="box12"> |
| 144 </div> | 144 </div> |
| 145 </div> | 145 </div> |
| 146 </div> | 146 </div> |
| 147 </div> | 147 </div> |
| 148 </div> | 148 </div> |
| 149 | 149 |
| 150 <div id="mousepos"></div> | 150 <div id="mousepos"></div> |
| 151 | 151 |
| 152 </body> | 152 </body> |
| 153 </html> | 153 </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