Revision control

Line Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>Paint-In-Time 2</title>
  <style>
    .gradient {
      position: absolute;
      width: 800px;
      height: 600px;
      opacity: 0.4;
    }
  </style>
</head>
<body>
  <div id="grid">
  </div>
</body>
<script>

// Only allow painting a tiny slice of the frame - here, 15ms.
var kFrameBudgetMs = 14;
var kDivCount = 10;
var kMaxTime = 20 * 1000;

var gCrazyCounter = 0;
var gIterations = 0;
var gStart;
var gDivs = [];

function GetColor() {
  var color = GetColor.kColors[GetColor.Index];
  GetColor.Index++;
  GetColor.Index = (GetColor.Index % GetColor.kColors.length);
  return color;
}
GetColor.Index = 0;
GetColor.kColors = ["red", "white", "green", "yellow", "orange", "brown"];

function RadialGradient(offset) {
  this.colors = [GetColor(), GetColor()];
  this.percents = [0 + offset, 20 + offset];
  this.toStyle = function() {
    return "radial-gradient(" +
      this.colors[0] + " " + this.percents[0] + "%, " +
      this.colors[1] + " " + this.percents[1] + "%)";
  };
  this.advance = function() {
    this.percents[0] += 1;
    this.percents[0] %= 80;
    this.percents[1] = this.percents[0] + 20;
  };
}

function runFrame() {
  var start = performance.now();

  // Spin loop.
  while (performance.now() - start < kFrameBudgetMs)
    gCrazyCounter++;

  for (var i = 0; i < gDivs.length; i++) {
    var info = gDivs[i];
    info.gradient.advance();
    info.element.style.background = info.gradient.toStyle();
  }

  gIterations++;

  if (performance.now() - gStart >= kMaxTime) {
    if (window.tpRecordTime) {
      window.tpRecordTime(gIterations);
    }
    return;
  }

  window.requestAnimationFrame(runFrame);
}

function setup() {
  var root = document.getElementById("grid");
  for (var i = 0; i < kDivCount; i++) {
    var gradient = new RadialGradient(i * 10 / 2);

    var div = document.createElement("div");
    var info = {};
    info.element = div;
    info.gradient = gradient;

    div.classList.add("gradient");
    div.style.left = "10px";
    div.style.top = "10px";
    div.style.background = gradient.toStyle();
    root.appendChild(div);

    gDivs.push(info);
  }
}

function startTest() {
  setup();
  gStart = performance.now();
  window.requestAnimationFrame(runFrame);
}

addEventListener("load", function() {
  try {
    TalosContentProfiler.resume("rasterflood_gradient.html loaded", true).then(() => {
      startTest();
    });
  } catch (e) {
    startTest();
  }
});
</script>
<script type="text/javascript" src="chrome://talos-powers-content/content/TalosContentProfiler.js"></script>
</html>