| Index: LayoutTests/transforms/transform-properties-mixed-expected.html
|
| diff --git a/LayoutTests/transforms/transform-properties-mixed-expected.html b/LayoutTests/transforms/transform-properties-mixed-expected.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..acbb90f7dd526330f93617dc23e4a270f88fd482
|
| --- /dev/null
|
| +++ b/LayoutTests/transforms/transform-properties-mixed-expected.html
|
| @@ -0,0 +1,82 @@
|
| +<!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);
|
| + transform: translate3d(0, 0, 50px);
|
| +}
|
| +.back {
|
| + background: rgba(0, 255, 0, 1);
|
| + color: black;
|
| + transform: translate3d(0, 0, -50px) rotate3d(0, 1, 0, 180deg);
|
| +}
|
| +.right {
|
| + background: rgba(196, 0, 0, 0.7);
|
| + transform: translate3d(50px, 0, 0) rotate3d(0, 1, 0, 90deg);
|
| +}
|
| +.left {
|
| + background: rgba(0, 0, 196, 0.7);
|
| + transform: translate3d(-50px, 0, 0) rotate3d(0, 1, 0, -90deg);
|
| +}
|
| +.top {
|
| + background: rgba(196, 196, 0, 0.7);
|
| + transform: translate3d(0, -50px, 0) rotate3d(1, 0, 0, 90deg);
|
| +}
|
| +.bottom {
|
| + background: rgba(196, 0, 196, 0.7);
|
| + transform: translate3d(0, 50px, 0) rotate3d(1, 0, 0, -90deg);
|
| +}
|
| +.scaleX {
|
| + transform: scale3d(0.5, 1, 1);
|
| +}
|
| +.scaleY {
|
| + transform: scale3d(1, 0.5, 1);
|
| +}
|
| +.scaleZ {
|
| + transform: scale3d(1, 1, 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>
|
|
|
Chromium Code Reviews
Issue 1158603003:
CSS Independent Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master