Index: content/test/data/gpu/screenshot_sync.html |
diff --git a/content/test/data/gpu/screenshot_sync.html b/content/test/data/gpu/screenshot_sync.html |
index 73f56710413dccc7b0801486cd23e901ba6e3bca..7f7b30e2b2b107dae7c35a11fd9f94c38c5377e9 100644 |
--- a/content/test/data/gpu/screenshot_sync.html |
+++ b/content/test/data/gpu/screenshot_sync.html |
@@ -4,142 +4,22 @@ |
<title>Synchronized screenshot test</title> |
<style> |
html, body { margin: 0; } |
- #log { height: 150px; overflow: auto; width: 512px; } |
- #log.failed { background-color: #FFAAAA; } |
</style> |
</head> |
<body> |
- <canvas id="src-canvas" width="256" height="256"></canvas> |
- <canvas id="dest-canvas" width="256" height="256"></canvas><br/> |
- <div id="log"></div> |
+ <canvas id="canvas" width="256" height="256"></canvas> |
+ <div id="text"></div> |
<script> |
- "use strict"; |
- |
- (function () { |
- window.__testComplete = false; |
- window.__testMessage = ''; |
- window.__testSuccess = true; |
- var log = document.getElementById("log"); |
- var canvas1 = document.getElementById("src-canvas"); |
- var canvas2 = document.getElementById("dest-canvas"); |
- |
- if (!window.chrome || !window.chrome.gpuBenchmarking || |
- !window.chrome.gpuBenchmarking.beginWindowSnapshotPNG) { |
- canvas1.style.display = "none"; |
- canvas2.style.display = "none"; |
- log.innerHTML = "chrome.gpuBenchmarking.beginWindowSnapshotPNG not available.<br/>" + |
- "Please make sure Chrome was launched with --enable-gpu-benchmarking." |
- window.__testComplete = true; |
- window.__testMessage = 'chrome.gpuBenchmarking.beginWindowSnapshotPNG not available.'; |
- window.__testSuccess = false; |
- return; |
- } |
- |
- var totalTests = 50; |
- var testInterval = 75; |
- var testStartDelay = 1000; |
- var testCount = 0; |
- |
- var ctx1 = canvas1.getContext("2d"); |
- var ctx2 = canvas2.getContext("2d"); |
- |
- var clearColor = [0, 0, 0]; |
- var screenshotClearColor = [0, 0, 0]; |
- var validatedColor = [0, 0, 0]; |
- var capturing = false; |
- function draw() { |
- if (testCount == totalTests || !window.__testSuccess) |
- return; |
- |
- if (!capturing) { |
- clearColor[0] = Math.floor(Math.random() * 256.0); |
- clearColor[1] = Math.floor(Math.random() * 256.0); |
- clearColor[2] = Math.floor(Math.random() * 256.0); |
- |
- ctx1.fillStyle="RGB(" + |
- clearColor[0] + "," + |
- clearColor[1] + "," + |
- clearColor[2] + ")"; |
- ctx1.fillRect(0,0,canvas1.width,canvas1.height); |
- } |
- |
- window.requestAnimationFrame(draw); |
- }; |
- draw(); |
- |
- var snapshotImg = new Image(); |
- var snapshotBtn = document.getElementById("snapshot"); |
- var snapshotColorSpan = document.getElementById("snapshotColorSpan"); |
- var validatedColorSpan = document.getElementById("validatedColorSpan"); |
- |
- |
- function colorsMatch(a, b) { |
- return (Math.abs(a[0] - b[0]) < 2 && |
- Math.abs(a[1] - b[1]) < 2 && |
- Math.abs(a[2] - b[2]) < 2); |
- } |
- |
- function logString(str) { |
- var entry = document.createElement("div"); |
- entry.innerHTML = str |
- log.insertBefore(entry, log.firstChild); |
- } |
- |
- function colorToString(a) { |
- return "[" + a[0] +", " + a[1] +", " + a[2] +"]"; |
- } |
- |
- function logTest(id, a, b) { |
- var match = colorsMatch(a, b); |
- logString("Test " + id + ": " + |
- colorToString(a) + " " + |
- "~= " + |
- colorToString(b) + " " + |
- ": " + |
- (match ? "<b style='color: green'>Pass</b>" : "<b style='color: red'>Fail</b>")); |
- return match; |
- } |
- |
- // Take snapshots at an arbitrary interval and ensure that the resulting |
- // image matches the color we last cleared the webgl canvas with |
- function testSnapshot() { |
- capturing = true; |
- ++testCount; |
- |
- screenshotClearColor[0] = clearColor[0]; |
- screenshotClearColor[1] = clearColor[1]; |
- screenshotClearColor[2] = clearColor[2]; |
- |
- window.chrome.gpuBenchmarking.beginWindowSnapshotPNG( |
- function(s) { |
- snapshotImg.src = "data:image/png;base64," + s.data; |
- ctx2.drawImage(snapshotImg,0,0); |
- |
- var img_data = ctx2.getImageData(0, 0, 1, 1); |
- validatedColor[0] = img_data.data[0]; |
- validatedColor[1] = img_data.data[1]; |
- validatedColor[2] = img_data.data[2]; |
- |
- window.__testSuccess = window.__testSuccess && logTest(testCount, screenshotClearColor, validatedColor); |
- if (!window.__testSuccess) { |
- log.classList.add("failed"); |
- window.__testMessage = 'Color mismatch after ' + testCount + ' iterations.'; |
- } |
- |
- capturing = false; |
- |
- if (testCount < totalTests && window.__testSuccess) { |
- if (window.__testSuccess) |
- setTimeout(testSnapshot, testInterval); |
- } else { |
- window.__testComplete = true; |
- } |
- } |
- ); |
- } |
- setTimeout(testSnapshot, testStartDelay); |
- })(); |
+ var canvas = document.getElementById("canvas"); |
+ var ctx = canvas.getContext("2d"); |
+ var text = document.getElementById("text"); |
+ function draw(r, g, b) { |
+ var rgb = "RGB(" + r + "," + g + "," + b + ")"; |
+ text.textContent = rgb; |
+ ctx.fillStyle = rgb; |
+ ctx.fillRect(0, 0, canvas.width, canvas.height); |
+ } |
</script> |
</body> |
</html> |