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

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: Rebase master and explicit applyTransform parameters 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
« no previous file with comments | « LayoutTests/transforms/scale-parsing.html ('k') | LayoutTests/transforms/transform-properties-mixed-expected.html » ('j') | LayoutTests/transforms/transform-properties-mixed-expected.html » ('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..1d1cab136cbd10635007303340f5c73fc2871eed
--- /dev/null
+++ b/LayoutTests/transforms/transform-properties-mixed.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<style>
+.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;
+ perspective: 500px;
+}
+.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;
+}
+.front {
+ background: rgba(0, 0, 0, 0.3);
+ translate: 0 0 50px;
+}
+.back {
+ background: rgba(0, 255, 0, 1);
+ color: black;
+ translate: 0 0 -50px;
+ rotate: 180deg 0 1 0;
+}
+.right {
+ background: rgba(196, 0, 0, 0.7);
+ translate: 50px 0 0;
+ rotate: 90deg 0 1 0;
+}
+.left {
+ background: rgba(0, 0, 196, 0.7);
+ translate: -50px 0 0;
+ rotate: -90deg 0 1 0;
+}
+.top {
+ background: rgba(196, 196, 0, 0.7);
+ translate: 0 -50px 0;
+ rotate: 90deg 1 0 0;
+}
+.bottom {
+ background: rgba(196, 0, 196, 0.7);
+ translate: 0 50px 0;
+ rotate: -90deg 1 0 0;
+}
+.scaleX {
+ scale: 0.5 1.0 1.0;
+}
+.scaleY {
+ scale: 1.0 0.5 1.0;
+}
+.scaleZ {
+ scale: 1.0 1.0 0.5;
+}
+</style>
+
+<div class="container">
+ <div class="cube scaleY">
+ <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 class="cube scaleX scaleZ">
+ <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>
« no previous file with comments | « LayoutTests/transforms/scale-parsing.html ('k') | LayoutTests/transforms/transform-properties-mixed-expected.html » ('j') | LayoutTests/transforms/transform-properties-mixed-expected.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698