Permalink
Browse files

Prefixing and gradient orientation in test CSS.

  • Loading branch information...
1 parent e4065c4 commit a78dd9e5f1567a69650ea16b4810a512fb0480aa @joseph committed Sep 6, 2012
Showing with 38 additions and 8 deletions.
  1. +17 −0 test/experimental/moz-element-flipper/styles.css
  2. +21 −8 test/showcase/02-dickens/test.css
@@ -6,17 +6,21 @@ section {
position: relative;
background: -moz-linear-gradient(0deg, #FFF, #555, #FFF, #555, #FFF);
background: -webkit-linear-gradient(0deg, #FFF, #555, #FFF, #555, #FFF);
+ background: linear-gradient(90deg, #FFF, #555, #FFF, #555, #FFF);
width: 320px;
height: 380px;
}
.columns {
width: 2700px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
+ column-width: 300px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
+ column-gap: 20px;
-moz-column-fill: auto;
-webkit-column-fill: auto;
+ column-fill: auto;
height: 380px;
}
.colCntr {
@@ -28,6 +32,7 @@ section {
background-color: white;
background-image: -moz-element(#origin);
background-image: -webkit-element(#origin);
+ background-image: element(#origin);
background-repeat: no-repeat;
position: absolute;
width: 160px;
@@ -36,6 +41,7 @@ section {
left: 0;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
background-color: #FFF;
}
#imp1 {
@@ -45,6 +51,7 @@ section {
#imp3 {
-moz-transform: rotateY(180deg) translateZ(1px);
-webkit-transform: rotateY(180deg) translateZ(1px);
+ transform: rotateY(180deg) translateZ(1px);
}
#imp4 {
left: 160px;
@@ -53,8 +60,10 @@ section {
position: absolute;
-moz-transform-origin: 0% 50%;
-webkit-transform-origin: 0% 50%;
+ transform-origin: 0% 50%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
z-index: 1;
top: 0px;
left: 160px;
@@ -66,8 +75,10 @@ section {
.pageTurn #gate{
-moz-transition: -moz-transform linear 600ms;
-webkit-transition: -webkit-transform linear 600ms;
+ transition: -moz-transform linear 600ms;
-moz-transform: perspective(500px) rotateY(-180deg);
-webkit-transform: perspective(500px) rotateY(-180deg);
+ transform: perspective(500px) rotateY(-180deg);
}
@@ -78,25 +89,29 @@ section {
.forwardTurn .pageTurn #imp1 {
-moz-transition: opacity linear 300ms 300ms;
-webkit-transition: opacity linear 300ms 300ms;
+ transition: opacity linear 300ms 300ms;
opacity: 0.25;
}
.forwardTurn .pageTurn #imp4 {
-moz-transition: opacity linear 300ms;
-webkit-transition: opacity linear 300ms;
+ transition: opacity linear 300ms;
opacity: 1;
}
.reverseTurn #gate {
-moz-transform-origin: 100% 50%;
-webkit-transform-origin: 100% 50%;
+ transform-origin: 100% 50%;
left: 0;
}
.reverseTurn .pageTurn #gate {
-moz-transform: perspective(500px) rotateY(180deg);
-webkit-transform: perspective(500px) rotateY(180deg);
+ transform: perspective(500px) rotateY(180deg);
}
.reverseTurn #imp1 {
@@ -110,11 +125,13 @@ section {
.reverseTurn .pageTurn #imp1 {
-moz-transition: opacity linear 300ms;
-webkit-transition: opacity linear 300ms;
+ transition: opacity linear 300ms;
opacity: 1;
}
.reverseTurn .pageTurn #imp4 {
-moz-transition: opacity linear 300ms 300ms;
-webkit-transition: opacity linear 300ms 300ms;
+ transition: opacity linear 300ms 300ms;
opacity: 0.25;
}
@@ -31,17 +31,21 @@ body {
background-color: #FCF6F0;
-webkit-box-shadow: 2px 2px 4px #754;
-moz-box-shadow: 2px 2px 4px #754;
+ box-shadow: 2px 2px 4px #754;
-webkit-border-top-left-radius: 26px 6px;
-webkit-border-bottom-left-radius: 26px 6px;
- -moz-border-radius-topleft: 26px 6px;
- -moz-border-radius-bottomleft: 26px 6px;
+ -moz-border-top-left-radius: 26px 6px;
+ -moz-border-bottom-left-radius: 26px 6px;
+ border-top-left-radius: 26px 6px;
+ border-bottom-left-radius: 26px 6px;
}
.dummyPage + .dummyPage {
top: 16px;
bottom: 16px;
right: 16px;
-webkit-box-shadow: 1px 0 2px #A99;
-moz-box-shadow: 1px 0 2px #A99;
+ box-shadow: 1px 0 2px #A99;
}
.dummyPage + .dummyPage + .dummyPage {
top: 13px;
@@ -67,12 +71,17 @@ body {
left: 65%;
-webkit-box-shadow: -3px 0 3px #311;
-moz-box-shadow: -3px 0 3px #311;
+ box-shadow: -3px 0 3px #311;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
- -moz-border-radius-topright: 3px;
- -moz-border-radius-bottomright: 3px;
+ -moz-border-top-right-radius: 3px;
+ -moz-border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
background-color: #F7F7F7;
- background: -webkit-gradient(linear, left top, right bottom, from(#FFF), to(#DDD));
+ background: -webkit-linear-gradient(0deg, #DDD, #FFF);
+ background: -moz-linear-gradient(0deg , #DDD, #FFF);
+ background: linear-gradient(90deg, #DDD, #FFF);
}
.board {
position: absolute;
@@ -129,6 +138,7 @@ body {
-moz-box-shadow: 1px 2px 2px #652;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
+ border-radius: 10px;
overflow-y: auto;
color: #432;
font: 11pt Georgia, serif;
@@ -193,11 +203,14 @@ div.monelem_page {
box-shadow: 1px 0 2px #CBA;
-webkit-border-top-left-radius: 26px 4px;
-webkit-border-bottom-left-radius: 26px 4px;
- -moz-border-radius-topleft: 26px 4px;
- -moz-border-radius-bottomleft: 26px 4px;
+ -moz-border-top-left-radius: 26px 4px;
+ -moz-border-bottom-left-radius: 26px 4px;
+ border-top-left-radius: 26px 4px;
+ border-bottom-left-radius: 26px 4px;
background-color: #FFFFFE;
+ background-image: -webkit-linear-gradient(0deg, #EDEAE8 0px, #FFFFFE 24px);
background-image: -moz-linear-gradient(0deg, #EDEAE8 0px, #FFFFFE 24px);
- background: -webkit-gradient(linear, 0 0, 24 0, from(#EDEAE8), to(#FFFFFE));
+ background-image: linear-gradient(90deg, #EDEAE8 0px, #FFFFFE 24px);
}
div.monelem_sheaf {

0 comments on commit a78dd9e

Please sign in to comment.