| Index: tools/perf/page_sets/key_silk_cases/font_wipe.html
|
| diff --git a/tools/perf/page_sets/key_silk_cases/font_wipe.html b/tools/perf/page_sets/key_silk_cases/font_wipe.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..e8d38d746972ce10f0fb6555999a2522c740086b
|
| --- /dev/null
|
| +++ b/tools/perf/page_sets/key_silk_cases/font_wipe.html
|
| @@ -0,0 +1,92 @@
|
| +
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
| + <title> - jsFiddle demo by jmgoog</title>
|
| +<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
|
| +
|
| + <style type='text/css'>
|
| + @-webkit-keyframes clip-animation {
|
| + 0% {
|
| + -webkit-clip-path: polygon(-200px 0px, 0px 0px, -200px 200px, -200px 200px, -200px 0px);
|
| + }
|
| + 90% {
|
| + -webkit-clip-path: polygon(-200px 0px, 400px 0px, 200px 200px, -200px 200px, -200px 0px);
|
| + }
|
| +}
|
| +
|
| +@-webkit-keyframes slide-animation
|
| +{
|
| + 0% {left: -30px;}
|
| + 100% {left: 0px;}
|
| +}
|
| +
|
| +.div1
|
| +{
|
| + position: absolute;
|
| + width:200px;
|
| + height:200px;
|
| + color:gray;
|
| + font-size: 100pt;
|
| + font-family: 'Roboto Light' sans-serif;
|
| + font-weight: 300;
|
| +}
|
| +
|
| +.div2
|
| +{
|
| + -webkit-clip-path: polygon(0px 0px, 0px 0px, -40px 80px, 0px 80px, 0px 0px);
|
| + position: absolute;
|
| + width:240px;
|
| + height:240px;
|
| + color:gray;
|
| + background-color: white;
|
| + font-size: 100pt;
|
| + font-family: 'Roboto Light' sans-serif;
|
| + font-weight: 300;
|
| +}
|
| +
|
| +.div2.hover {
|
| + -webkit-animation: clip-animation 0.5s;
|
| + -webkit-clip-path: polygon(0px 0px, 200px 0px, 200px 200px, 0px 200px, 0px 0px);
|
| +}
|
| +
|
| +.div3
|
| +{
|
| + position: absolute;
|
| +}
|
| +
|
| +.div3.hover {
|
| +-webkit-animation: slide-animation 1.0s;
|
| +}
|
| +
|
| + </style>
|
| +
|
| +
|
| +
|
| +<script type='text/javascript'>//<![CDATA[
|
| +window.onload=function(){
|
| +
|
| +}//]]>
|
| + setInterval(function() {
|
| + document.querySelector('.div2').classList.toggle('hover');
|
| + document.querySelector('.div3').classList.toggle('hover');
|
| + }, 1500);
|
| +</script>
|
| +
|
| +
|
| +</head>
|
| +<body>
|
| + <body>
|
| +
|
| + <div class="div1">9°</div>
|
| + <div class="div2"><div class="div3">23°</div>
|
| + </div>
|
| +
|
| +</body>
|
| +
|
| +
|
| +</body>
|
| +
|
| +
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 117833002:
telemetry: extend key_silk_cases.json (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src