| OLD | NEW |
| (Empty) |
| 1 <!-- | |
| 2 Copyright 2014 Google Inc. All Rights Reserved. | |
| 3 | |
| 4 Licensed under the Apache License, Version 2.0 (the "License"); | |
| 5 you may not use this file except in compliance with the License. | |
| 6 You may obtain a copy of the License at | |
| 7 | |
| 8 http://www.apache.org/licenses/LICENSE-2.0 | |
| 9 | |
| 10 Unless required by applicable law or agreed to in writing, software | |
| 11 distributed under the License is distributed on an "AS IS" BASIS, | |
| 12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| 13 See the License for the specific language governing permissions and | |
| 14 limitations under the License. | |
| 15 --> | |
| 16 | |
| 17 <!DOCTYPE html><meta charset="UTF-8"> | |
| 18 <style> | |
| 19 .container { | |
| 20 position: absolute; | |
| 21 top: 10px; | |
| 22 left: 100px; | |
| 23 } | |
| 24 .box { | |
| 25 width: 100px; | |
| 26 height: 100px; | |
| 27 margin: 20px; | |
| 28 margin-bottom: 100px; | |
| 29 display: inline-block; | |
| 30 -webkit-perspective: 500px; | |
| 31 perspective: 500px; | |
| 32 } | |
| 33 .item { | |
| 34 width: 80px; | |
| 35 height: 80px; | |
| 36 margin: 10px; | |
| 37 border-style: solid; | |
| 38 white-space: pre; | |
| 39 -webkit-transform: translateZ(50px) rotateX(30deg) rotateY(30deg); | |
| 40 transform: translateZ(50px) rotateX(30deg) rotateY(30deg); | |
| 41 } | |
| 42 .test > .item { border-color: green; } | |
| 43 .expectation > .item { color: red; } | |
| 44 #spacer { height: 500px; } | |
| 45 </style> | |
| 46 | |
| 47 <div id="spacer"></div> | |
| 48 <div id="expectationContainer" class="container"></div> | |
| 49 <div id="testContainer" class="container"></div> | |
| 50 | |
| 51 <script> | |
| 52 var expected_failures = [ | |
| 53 { | |
| 54 browser_configurations: [{ chrome: true, version: '34|35' }], | |
| 55 tests: ['tests at t=(1000|1500)ms'], | |
| 56 message: '-webkit-perspective-origin shorthand behaviour is broken: crbug.co
m/361944', | |
| 57 } | |
| 58 ]; | |
| 59 </script> | |
| 60 <script src="../bootstrap.js"></script> | |
| 61 <script> | |
| 62 'use strict'; | |
| 63 var perspectiveOrignTestCases = [ | |
| 64 '0 0', | |
| 65 'left', | |
| 66 'right', | |
| 67 'top', | |
| 68 'bottom', | |
| 69 'center', | |
| 70 '0 0', | |
| 71 '80px 80px', | |
| 72 '20% 60%', | |
| 73 'calc(25px - 25%) calc(25px + 75%)', | |
| 74 ]; | |
| 75 perspectiveOrignTestCases.forEach(function(testCase) { | |
| 76 var test = createBoxedItem('test', testCase); | |
| 77 test.animate({perspectiveOrigin: testCase}, {duration: 2 * 1000, fill: 'forwar
ds'}); | |
| 78 testContainer.appendChild(test); | |
| 79 | |
| 80 var expectation = createBoxedItem('expectation', testCase); | |
| 81 expectation.style.perspectiveOrigin = expectation.style.webkitPerspectiveOrigi
n = testCase; | |
| 82 expectationContainer.appendChild(expectation); | |
| 83 }); | |
| 84 | |
| 85 function createBoxedItem(type, text) { | |
| 86 var box = document.createElement('div'); | |
| 87 box.classList.add('box', type); | |
| 88 box.textContent = text; | |
| 89 var item = document.createElement('div'); | |
| 90 item.classList.add('item'); | |
| 91 box.appendChild(item); | |
| 92 return box; | |
| 93 } | |
| 94 </script> | |
| OLD | NEW |