Index: tools/perf/page_sets/key_silk_cases/text-mask.html |
diff --git a/tools/perf/page_sets/key_silk_cases/text-mask.html b/tools/perf/page_sets/key_silk_cases/text-mask.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..8ee38db2daeaca5d3a08e43ba3affb526b2d380a |
--- /dev/null |
+++ b/tools/perf/page_sets/key_silk_cases/text-mask.html |
@@ -0,0 +1,32 @@ |
+<!doctype html> |
+<meta http-equiv="X-UA-Compatible" content="IE=edge"/> |
+<html> |
+<head> |
+<title>WebKit Mask on Text</title> |
+<style> |
+.foo { |
+ background-color: red; |
+ font-size: 192px; |
+ -webkit-mask-image: url('circle-512.gif'); |
+ -webkit-mask-repeat: no-repeat; |
+ -webkit-mask-size: 20px; |
+ -webkit-mask-position: 50%; |
+ -webkit-transition-duration: 1s; |
+ width: 700px; |
+ height: 700px; |
+} |
+.foo.active { |
+ -webkit-mask-size: 1200px; |
+} |
+</style> |
+</head> |
+<body> |
+<div class="foo">ABCabc<br>DEFdef<br>GHIghi<br></div> |
+<script> |
+ setInterval(function() { |
+ var f = document.body.querySelector('.foo'); |
+ f.classList.toggle('active'); |
+ }, 1200); |
+</script> |
+</body> |
+</html> |