[refactor] More post-NSS WebCrypto cleanups (utility functions).
[chromium-blink-merge.git] / tools / perf / page_sets / key_silk_cases / font_wipe.html
blobb5a764e657e65aa7193b6d883262956fd5423900
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
7 <title> - jsFiddle demo by jmgoog</title>
8 <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
10 <style type='text/css'>
11 @-webkit-keyframes clip-animation {
12 0% {
13 -webkit-clip-path: polygon(-200px 0px, 0px 0px, -200px 200px, -200px 200px, -200px 0px);
15 90% {
16 -webkit-clip-path: polygon(-200px 0px, 400px 0px, 200px 200px, -200px 200px, -200px 0px);
20 @-webkit-keyframes slide-animation
22 0% {left: -30px;}
23 100% {left: 0px;}
26 .div1
28 position: absolute;
29 width:200px;
30 height:200px;
31 color:gray;
32 font-size: 100pt;
33 font-family: 'Roboto Light' sans-serif;
34 font-weight: 300;
37 .div2
39 -webkit-clip-path: polygon(0px 0px, 0px 0px, -40px 80px, 0px 80px, 0px 0px);
40 position: absolute;
41 width:240px;
42 height:240px;
43 color:gray;
44 background-color: white;
45 font-size: 100pt;
46 font-family: 'Roboto Light' sans-serif;
47 font-weight: 300;
50 .div2.hover {
51 -webkit-animation: clip-animation 0.5s;
52 -webkit-clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px, 0px 0px);
55 .div3
57 position: absolute;
60 .div3.hover {
61 -webkit-animation: slide-animation 1.0s;
64 </style>
68 <script type='text/javascript'>//<![CDATA[
69 window.onload=function(){
71 }//]]>
72 setInterval(function() {
73 document.querySelector('.div2').classList.toggle('hover');
74 document.querySelector('.div3').classList.toggle('hover');
75 }, 1500);
76 </script>
79 </head>
80 <body>
81 <body>
83 <div class="div1">9&deg;</div>
84 <div class="div2"><div class="div3">23&deg;</div>
85 </div>
87 </body>
90 </body>
93 </html>