Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(115)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/transforms/transform-properties-mixed.html

Issue 1158603003: CSS Independent Transform Properties (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Correct equality operators and remove dependencies on size() in parser Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« LayoutTests/transforms/rotate.html ('K') | « LayoutTests/transforms/scale-parsing.html ('k') | LayoutTests/transforms/transform-properties-mixed-expected.txt » ('j') | Source/core/animation/KeyframeEffect.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/transforms/transform-properties-mixed.html
diff --git a/LayoutTests/transforms/transform-properties-mixed.html b/LayoutTests/transforms/transform-properties-mixed.html
new file mode 100644
index 0000000000000000000000000000000000000000..cc6d48c19c4cf7379ec9a6290fef30cd2f879f98
--- /dev/null
+++ b/LayoutTests/transforms/transform-properties-mixed.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<style>
+.pers250 {
+ perspective: 250px;
+ -webkit-perspective: 250px;
+}
+.pers350 {
+ perspective: 350px;
+ -webkit-perspective: 350px;
+}
+.pers500 {
+ perspective: 500px;
+ -webkit-perspective: 500px;
+}
+
+.container {
+ width: 200px;
+ height: 200px;
+ margin: 75px 0 0 75px;
+ border: none;
+}
+
+.cube {
+ width: 100%;
+ height: 100%;
+ backface-visibility: visible;
+ perspective-origin: 150% 150%;
+ transform-style: preserve-3d;
+ -webkit-backface-visibility: visible;
+ -webkit-perspective-origin: 150% 150%;
+ -webkit-transform-style: preserve-3d;
+}
+
+.face {
+ display: block;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border: none;
+ line-height: 100px;
+ font-family: sans-serif;
+ font-size: 60px;
+ color: white;
+ text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+ background: rgba(0, 0, 0, 0.3);
+ transform: translateZ(50px);
Eric Willigers 2015/06/11 02:15:19 Where are the new transform properties being used?
+ -webkit-transform: translateZ(50px);
+}
+.back {
+ background: rgba(0, 255, 0, 1);
+ color: black;
+ transform: rotateY(180deg) translateZ(50px);
+ -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+ background: rgba(196, 0, 0, 0.7);
+ transform: rotateY(90deg) translateZ(50px);
+ -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+ background: rgba(0, 0, 196, 0.7);
+ transform: rotateY(-90deg) translateZ(50px);
+ -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+ background: rgba(196, 196, 0, 0.7);
+ transform: rotateX(90deg) translateZ(50px);
+ -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+.bottom {
+ background: rgba(196, 0, 196, 0.7);
+ transform: rotateX(-90deg) translateZ(50px);
+ -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+ background-color: #EEEEEE;
+ padding: 10px;
+ font-family: sans-serif;
+ text-align: left;
+}
+</style>
+</head>
+
+<body>
+<table>
+ <tbody>
+ <tr>
+ <th><code>perspective: 250px;</code>
+ </th>
+ <th><code>perspective: 350px;</code>
+ </th>
+ <th><code>perspective: 500px;</code>
+ </th>
+ </tr>
+ <tr>
+ <td>
+ <div class="container">
+ <div class="cube pers250">
+ <div class="face front">1</div>
+ <div class="face back">2</div>
+ <div class="face right">3</div>
+ <div class="face left">4</div>
+ <div class="face top">5</div>
+ <div class="face bottom">6</div>
+ </div>
+ </div>
+ </td>
+ <td>
+ <div class="container">
+ <div class="cube pers350">
+ <div class="face front">1</div>
+ <div class="face back">2</div>
+ <div class="face right">3</div>
+ <div class="face left">4</div>
+ <div class="face top">5</div>
+ <div class="face bottom">6</div>
+ </div>
+ </div>
+ </td>
+ <td>
+ <div class="container">
+ <div class="cube pers500">
+ <div class="face front">1</div>
+ <div class="face back">2</div>
+ <div class="face right">3</div>
+ <div class="face left">4</div>
+ <div class="face top">5</div>
+ <div class="face bottom">6</div>
+ </div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+</table>
+</div>
+</body>
+</html>
« LayoutTests/transforms/rotate.html ('K') | « LayoutTests/transforms/scale-parsing.html ('k') | LayoutTests/transforms/transform-properties-mixed-expected.txt » ('j') | Source/core/animation/KeyframeEffect.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698