context-attribute-preserve-drawing-buffer.html (2861B)
1 <!-- 2 Copyright (c) 2019 The Khronos Group Inc. 3 Use of this source code is governed by an MIT-style license that can be 4 found in the LICENSE.txt file. 5 --> 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <meta charset="utf-8"> 11 <link rel="stylesheet" href="../../resources/js-test-style.css"/> 12 <script src="../../js/js-test-pre.js"></script> 13 <script src="../../js/webgl-test-utils.js"></script> 14 <style> 15 .pattern { 16 white-space: nowrap; 17 display: inline-block; 18 } 19 canvas { 20 width:10px; 21 height:10px; 22 } 23 .square { 24 display:inline-block; 25 width:10px; 26 height:10px; 27 background-color:red; 28 } 29 </style> 30 <script> 31 "use strict"; 32 var wtu = WebGLTestUtils; 33 function checkResult(ctx1, ctx2, preserve) { 34 var imgData1 = ctx1.getImageData(0,0,1,1); 35 var imgData2 = ctx2.getImageData(0,0,1,1); 36 var correct1 = [255,0,0,255]; 37 var correct2 = preserve ? [255,0,0,255] : [0,0,0,255]; 38 var ok1 = true; 39 var ok2 = true; 40 for (var p = 0; p < 4; ++p) { 41 if (imgData1.data[p] != correct1[p]) 42 ok1 = false; 43 if (imgData2.data[p] != correct2[p]) 44 ok2 = false; 45 } 46 if (ok1 && ok2) 47 testPassed('Rendered ok with preserveDrawingBuffer ' + preserve +'.'); 48 else 49 testFailed('Did not render ok with preserveDrawingBuffer ' + preserve + '.'); 50 if (preserve) { 51 finishTest() 52 } else { 53 runTest(true); 54 } 55 } 56 57 function runTest(preserve) { 58 var c1 = document.getElementById('c' + (preserve * 3 + 1)); 59 var c2 = document.getElementById('c' + (preserve * 3 + 2)); 60 var c3 = document.getElementById('c' + (preserve * 3 + 3)); 61 var ctx1 = c1.getContext('2d'); 62 var ctx2 = c2.getContext('2d'); 63 var gl = wtu.create3DContext(c3, { alpha:false, preserveDrawingBuffer:preserve }); 64 if (!gl) { 65 testFailed("context does not exist"); 66 if (preserve) { 67 finishTest() 68 } else { 69 runTest(true); 70 } 71 return; 72 } 73 gl.clearColor(1, 0, 0, 1); 74 gl.clear(gl.COLOR_BUFFER_BIT); 75 ctx1.drawImage(c3, 0, 0); 76 wtu.waitForComposite(function() { 77 ctx2.drawImage(c3, 0, 0); 78 checkResult(ctx1, ctx2, preserve); 79 }); 80 } 81 </script> 82 </head> 83 <body> 84 <div class="pattern"> 85 <canvas id='c1'></canvas> 86 <canvas id='c2'></canvas> 87 <canvas id='c3'></canvas> 88 </div> 89 <span>should look like</span> 90 <div class="pattern"> 91 <div class='square'></div> 92 <div class='square' style='background-color:black'></div> 93 <div class='square'></div> 94 </div> 95 <hr /> 96 <div class="pattern"> 97 <canvas id='c4'></canvas> 98 <canvas id='c5'></canvas> 99 <canvas id='c6'></canvas> 100 </div> 101 <span>should look like</span> 102 <div class="pattern"> 103 <div class='square'></div> 104 <div class='square'></div> 105 <div class='square'></div> 106 </div> 107 <div id="description"></div> 108 <div id="console"></div> 109 <script> 110 "use strict"; 111 description('Verify that preserveDrawingBuffer attribute is honored.'); 112 runTest(false); 113 var successfullyParsed = true; 114 shouldBeTrue("successfullyParsed"); 115 </script> 116 </body> 117 </html>