LayoutTests/transforms/transform-properties-mixed.html - Issue 1158603003: CSS Independent Transform Properties

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side 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: Add combined tests with motion-path and transform 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 unified diff | Download patch

« no previous file with comments | « LayoutTests/transforms/scale-parsing.html ('k') | LayoutTests/transforms/transform-properties-mixed-expected.html » ('j') | Source/core/css/resolver/StyleBuilderConverter.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

	4 <style>

	5 .container {

	6 width: 200px;

	7 height: 200px;

	8 margin: 75px 0 0 75px;

	9 border: none;

	10 }

	11 .cube {

	12 width: 100%;

	13 height: 100%;

	14 backface-visibility: visible;

	15 perspective-origin: 150% 150%;

	16 transform-style: preserve-3d;

	17 perspective: 500px;

	18 }

	19 .face {

	20 display: block;

	21 position: absolute;

	22 width: 100px;

	23 height: 100px;

	24 border: none;

	25 line-height: 100px;

	26 font-family: sans-serif;

	27 font-size: 60px;

	28 color: white;

	29 text-align: center;

	30 }

	31 .front {

	32 background: rgba(0, 0, 0, 0.3);

	33 translate: 0 0 50px;

	34 }

	35 .back {

	36 background: rgba(0, 255, 0, 1);

	37 color: black;

	38 translate: 0 0 -50px;

	39 rotate: 180deg 0 1 0;

	40 }

	41 .right {

	42 background: rgba(196, 0, 0, 0.7);

	43 translate: 50px 0 0;

	44 rotate: 90deg 0 1 0;

	45 }

	46 .left {

	47 background: rgba(0, 0, 196, 0.7);

	48 translate: -50px 0 0;

	49 rotate: -90deg 0 1 0;

	50 }

	51 .top {

	52 background: rgba(196, 196, 0, 0.7);

	53 translate: 0 -50px 0;

	54 rotate: 90deg 1 0 0;

	55 }

	56 .bottom {

	57 background: rgba(196, 0, 196, 0.7);

	58 translate: 0 50px 0;

	59 rotate: -90deg 1 0 0;

	60 }

	61 .scaleX {

	62 scale: 0.5 1.0 1.0;

	63 }

	64 .scaleY {

	65 scale: 1.0 0.5 1.0;

	66 }

	67 .scaleZ {

	68 scale: 1.0 1.0 0.5;

	69 }

	70 </style>

	71 </head>

	72 <body>

	73 <div class="container">

	74 <div class="cube scaleY">

	75 <div class="face front">1</div>

	76 <div class="face back">2</div>

	77 <div class="face right">3</div>

	78 <div class="face left">4</div>

	79 <div class="face top">5</div>

	80 <div class="face bottom">6</div>

	81 </div>

	82 <div class="cube scaleX scaleZ">

	83 <div class="face front">1</div>

	84 <div class="face back">2</div>

	85 <div class="face right">3</div>

	86 <div class="face left">4</div>

	87 <div class="face top">5</div>

	88 <div class="face bottom">6</div>

	89 </div>

	90 </div>

	91 </body>

	92 </html>

OLD	NEW