Index: tools/perf/page_sets/key_silk_cases/masonry.html |
diff --git a/tools/perf/page_sets/key_silk_cases/masonry.html b/tools/perf/page_sets/key_silk_cases/masonry.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..d7e7a990afb934d14507b2b0f0133159c91a6847 |
--- /dev/null |
+++ b/tools/perf/page_sets/key_silk_cases/masonry.html |
@@ -0,0 +1,36 @@ |
+<script src='masonry.js'></script> |
+<style> |
+body { |
+ display: none; |
+ margin: 0; |
+} |
+.item { |
+ max-width: 200px; |
+ border: 2px solid red; |
+ margin: 1px; |
+} |
+</style> |
+<div id=container> |
+<div class=item>Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptatevelit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id estlaborum.</div> |
+</div> |
+<script> |
+var container = document.querySelector('#container'); |
+var item = container.children[0]; |
+for (var i = 0; i < 100; ++i) { |
+ container.appendChild(item.cloneNode(true)); |
+} |
+document.body.style.display = 'block'; |
+window.done = false; |
+window.brick = function() { |
+ var mason = new Masonry(container, { |
+ itemSelector: '.item', |
+ }); |
+ requestAnimationFrame(function() { |
+ mason.element.style.maxWidth = '950px'; |
+ mason.layout(); |
+ requestAnimationFrame(function() { |
+ window.done = true; |
+ }); |
+ }); |
+}; |
+</script> |