Autoprefixer 测试用例

prefix.css

/**
 * Autoprefixer 测试用例
 * @author:   一丝
 * @update:   2014-2-21 11:26:44;   
 */

/* ==========================================================================
   常用属性测试
   ========================================================================== */

.display {
    display: inline-block;
}

/* background */
.bg {
    box-shadow:1px 0 0 #ccc;
    border-radius: 8px;
    background-size: 10px 20%;
    background-origin: border-box;
    background-clip: border-box;

}

.image {
    object-fit: cover;
    object-position: 50% 30px;
}

.ui {
    box-sizing: border-box;
    text-overflow: ellipsis;
}

/* transition */

.transition {
    transition: 1s 2s width linear;
}

/* animation */
.animation {
    animation: foo 1s 2s infinite linear alternate both;
}

@keyframes foo {
    0% {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

/* transform */
.transform {
    transform: translate3d(50px, -24px, 5px) rotate3d(1, 2, 3, 180deg) scale3d(-1, 0, .5);
}

.text {
    hyphens: auto;
    text-align-last: justify;
    text-justify: inter-word;
}


/* ==========================================================================
   flex 测试
   ========================================================================== */
/**
 * IE Doc: http://msdn.microsoft.com/zh-cn/library/ie/hh673531(v=vs.85).aspx
 */

.flex {
    display: flex;
    display: inline-flex;
}

.flex {
    align-content: flex-start;
    align-content: space-between;
}

.flex {
    justify-content: flex-end;
    justify-content: space-around;
}

.flex {
    align-items: flex-start;
}

.flex {
     align-self: flex-end; 
}


.flex{
    flex-flow:row nowrap;
}

.flex {
    flex-wrap: wrap-reverse;
}

.flex{
    flex-direction: column-reverse;
}

.flex {
    order: 5;
}

.flex {
    flex-basis: 10px;
    flex-grow: 5;
    flex-shrink: 9;
}

.flex {
    flex: 5 9 10%;
}