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 |