| 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: 300px; } | |
| 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 src="../bootstrap.js"></script> | |
| 52 <script> | |
| 53 'use strict'; | |
| 54 var perspectiveTestCases = [ | |
| 55 '150px', | |
| 56 '1000px', | |
| 57 'none', | |
| 58 '4px', | |
| 59 ]; | |
| 60 perspectiveTestCases.forEach(function(testCase) { | |
| 61 var test = createBoxedItem('test', testCase); | |
| 62 test.animate({perspective: testCase}, {duration: 2 * 1000, fill: 'forwards'}); | |
| 63 testContainer.appendChild(test); | |
| 64 | |
| 65 var expectation = createBoxedItem('expectation', testCase); | |
| 66 expectation.style.perspective = expectation.style.webkitPerspective = testCase
; | |
| 67 expectationContainer.appendChild(expectation); | |
| 68 }); | |
| 69 | |
| 70 function createBoxedItem(type, text) { | |
| 71 var box = document.createElement('div'); | |
| 72 box.classList.add('box', type); | |
| 73 box.textContent = text; | |
| 74 var item = document.createElement('div'); | |
| 75 item.classList.add('item'); | |
| 76 box.appendChild(item); | |
| 77 return box; | |
| 78 } | |
| 79 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master