Attachment 358973 Details for Bug 193343 – Testcase

Testcase

background-position-animation.html (text/html), 1.17 KB, created by Simon Fraser (smfr) on 2019-01-11 18:57:30 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-01-11 18:57:30 PST

Size: 1.17 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
>    <meta charset="utf-8">
>    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
>    <title>Background position animation</title>
>    <style>
>        .box {
>            position: relative;
>            width: 800px;
>            height: 104px;
>            animation-duration: 2s;
>            animation-fill-mode: forwards;
>            animation-iteration-count: infinite;
>            animation-name: placeHolderShimmer;
>            animation-timing-function: linear;
>            background: linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);
>            background-size: 800px 104px;
>            visibility: hidden;
>        }
>        
>        @keyframes placeHolderShimmer {
>            0% { background-position: -468px 0; }
>            100% { background-position: 468px 0; }
>        }
>        
>        .composited {
>            -webkit-transform: translateZ(0);
>        }
>        
>    </style>
>    
></head>
><body>
>    <p>There is a visibility:hidden box with an animated background here:</p>
>    <div class="box">
>    </div>
>    <div class="name" ontouchstart="(void)0">
>        Touch handler here
>    </div>
></body>
></html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Background position animation</title>
    <style>
        .box {
            position: relative;
            width: 800px;
            height: 104px;
            animation-duration: 2s;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name: placeHolderShimmer;
            animation-timing-function: linear;
            background: linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);
            background-size: 800px 104px;
            visibility: hidden;
        }
        
        @keyframes placeHolderShimmer {
            0% { background-position: -468px 0; }
            100% { background-position: 468px 0; }
        }
        
        .composited {
            -webkit-transform: translateZ(0);
        }
        
    </style>
    
</head>
<body>
    <p>There is a visibility:hidden box with an animated background here:</p>
    <div class="box">
    </div>
    <div class="name" ontouchstart="(void)0">
        Touch handler here
    </div>
</body>
</html>

Actions: View

Attachments on bug 193343: 358859 | 358865 | 358867 | 358869 | 358870 | 358874 | 358933 | 358970 | 358972 | 358973