Modernize key_silk_cases/physical_simulation.html

Save it from http://jsbin.com/UVIgUTa/38/quiet into a file page/sets/key_silk_cases/physical_simulation.html, and modify it 1. Changed "-webkit-backface-visibility: hidden" to "will-change: transform" which is modern way to hint future transform changes 2. Removed some deprecated webkit prefixes Bug: 1125926 Change-Id: I50392ec4509e5b025f9bd5ad4cda2859176b1d67 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2404374Reviewed-by: Wenbin Zhang <wenbinzhang@google.com> Cr-Commit-Position: refs/heads/master@{#812118}

Modernize key_silk_cases/physical_simulation.html
Save it from http://jsbin.com/UVIgUTa/38/quiet into a file page/sets/key_silk_cases/physical_simulation.html, and modify it 1. Changed "-webkit-backface-visibility: hidden" to "will-change: transform" which is modern way to hint future transform changes 2. Removed some deprecated webkit prefixes Bug: 1125926 Change-Id: I50392ec4509e5b025f9bd5ad4cda2859176b1d67 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2404374Reviewed-by: Wenbin Zhang <wenbinzhang@google.com> Cr-Commit-Position: refs/heads/master@{#812118}
66cb6ebe · Xianzhu Wang · 6dd136fa · 66cb6ebe · 66cb6ebe
Commit 66cb6ebe authored Sep 30, 2020 by Xianzhu Wang
2 changed files
--- a/tools/perf/page_sets/key_silk_cases/physical_simulation.html
+++ b/tools/perf/page_sets/key_silk_cases/physical_simulation.html
+<!DOCTYPE html>
+<!-- saved from url=(0041)https://output.jsbin.com/UVIgUTa/38/quiet -->
+<!--
+  Modifications after saved:
+  1. Changed "-webkit-backface-visibility: hidden" to "will-change: transform"
+     which is modern way to hint future transform changes
+  2. Removed some deprecated webkit prefixes
+-->
+<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+<!--
+Created using JS Bin
+http://jsbin.com
+
+Copyright (c) 2020 by anonymous (http://jsbin.com/UVIgUTa/38/edit)
+
+Released under the MIT license: http://jsbin.mit-license.org
+-->
+<meta name="robots" content="noindex">
+<title>JS Bin</title>
+
+<style id="jsbin-css">
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+div {
+  clear: both;
+  float: left;
+  border-radius: 30px;
+  background: #2693FF;
+  padding: 8px 14px;
+  color: #FFF;
+  font-family: Arial;
+  will-change: transform;
+}
+
+div:nth-child(2n) {
+  float: right;
+  background: #36D900;
+}
+</style>
+</head>
+<body>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+  <div>I am a message</div>
+<script>
+var divs = document.querySelectorAll('div');
+var tracking = false;
+var startY = 0;
+var currentY = 0;
+
+for (var d = 0; d < divs.length; d++) {
+  divs[d].targetOffset = 0;
+  divs[d].offset = 0;
+  divs[d].ease = d+5;
+  divs[d].matrix = new WebKitCSSMatrix(
+      "matrix3d(1,0,0,0," + 
+      "0,1,0,0," + 
+      "0,0,1,0," +
+      "0,0,0,1");
+  divs[d].style.transform = divs[d].matrix;
+}
+
+function onDown(e) {
+  tracking = true;
+  startY = e.offsetY;
+ 
+  if (typeof e.touches !== "undefined") {
+    startY = e.touches[0].pageY;
+  }
+  
+  e.preventDefault();
+}
+
+function onUp(e) {
+  tracking = false;
+}
+
+function onMove(e) {
+  if (!tracking)
+    return;
+ 
+  currentY = e.offsetY;
+  
+  if (e.touches) {
+    currentY = e.touches[0].pageY;
+  }
+  
+  var delta = currentY - startY;
+  for (var d = 0; d < divs.length; d++) {
+    divs[d].targetOffset = delta;
+  }
+}
+
+function update() {
+  
+  var data, div, y;
+  for (var d = 0; d < divs.length; d++) {
+   
+    div = divs[d];
+    div.offset += (div.targetOffset - div.offset) / div.ease;
+    
+    div.matrix.m42 = div.offset;
+    div.style.transform = div.matrix;
+  }
+  
+  requestAnimationFrame(update);
+}
+
+
+requestAnimationFrame(update);
+
+
+document.body.addEventListener('touchend', onUp);
+document.body.addEventListener('touchcancel', onUp);
+document.body.addEventListener('touchstart', onDown);
+document.body.addEventListener('touchmove', onMove);
+</script>
+
+</body></html>
--- a/tools/perf/page_sets/rendering/key_silk_cases.py
+++ b/tools/perf/page_sets/rendering/key_silk_cases.py
@@ -510,7 +510,7 @@ class Page23(KeySilkPage):
  """

  BASE_NAME = 'physical_simulation'
-  URL = 'http://jsbin.com/UVIgUTa/38/quiet'
+  URL = 'file://../key_silk_cases/physical_simulation.html'

  def PerformPageInteractions(self, action_runner):
    with action_runner.CreateGestureInteraction('ScrollAction',