src/third_party/WebKit/LayoutTests/inspector/profiler/canvas2d/canvas2d-profiler-capturing-basics.html

   1 <html>
   2 <head>
   3     <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4     <script src="../canvas-profiler-test.js"></script>
   5 <script>
   6
   7 var ctx;
   8 var rawCtx;
   9 var ctxResource;
  10
  11 var sampleAttributes1 = {
  12     "strokeStyle": "#000001",
  13     "fillStyle": "#000002",
  14     "globalAlpha": 0.5,
  15     "lineWidth": 2,
  16     "lineCap": "round",
  17     "lineJoin": "bevel",
  18     "miterLimit": 12,
  19     "shadowOffsetX": 1,
  20     "shadowOffsetY": 2,
  21     "shadowBlur": 3,
  22     "shadowColor": "#000003",
  23     "globalCompositeOperation": "source-in",
  24     "font": "12px sans-serif",
  25     "textAlign": "end",
  26     "textBaseline": "top",
  27     "lineDashOffset": 1
  28 };
  29
  30 var sampleAttributes2 = {
  31     "strokeStyle": "#100001",
  32     "fillStyle": "#100002",
  33     "globalAlpha": 0,
  34     "lineWidth": 3,
  35     "lineCap": "square",
  36     "lineJoin": "round",
  37     "miterLimit": 11,
  38     "shadowOffsetX": 3,
  39     "shadowOffsetY": 4,
  40     "shadowBlur": 2,
  41     "shadowColor": "#100003",
  42     "globalCompositeOperation": "xor",
  43     "font": "13px sans-serif",
  44     "textAlign": "left",
  45     "textBaseline": "middle",
  46     "lineDashOffset": 2
  47 };
  48
  49 function assignAttributes(attributes)
  50 {
  51     for (var attribute in attributes)
  52         ctx[attribute] = attributes[attribute];
  53 }
  54
  55 function assertAttributes(attributes)
  56 {
  57     for (var attribute in attributes)
  58         console.assert(ctx[attribute] === attributes[attribute], "Expected value for attribute " + attribute + ": " + attributes[attribute] + ", but was: " + ctx[attribute]);
  59 }
  60
  61 function assertNumberOfCallsInLog(expected)
  62 {
  63     var calls = ctxResource.calls();
  64     if (calls.length !== expected) {
  65         var names = [];
  66         for (var i = 0; i < 10 && calls[i]; ++i)
  67             names.push(calls[i].functionName());
  68         console.error("Expected size of the 2D context call log: " + expected + ", but was: " + calls.length + ", names: " + names);
  69     }
  70 }
  71
  72 function testDrawingAttributes()
  73 {
  74     assertNumberOfCallsInLog(0);
  75     assignAttributes(sampleAttributes1);
  76     assertAttributes(sampleAttributes1);
  77     assertNumberOfCallsInLog(0);
  78
  79     // Save previous attribute values and set new values.
  80     ctx.save();
  81     assignAttributes(sampleAttributes2);
  82     assertAttributes(sampleAttributes2);
  83     assertNumberOfCallsInLog(1);
  84
  85     // Restore previous attribute values.
  86     ctx.restore();
  87     assertAttributes(sampleAttributes1);
  88     // Call log should be empty after save() and restore() calls.
  89     assertNumberOfCallsInLog(0);
  90 }
  91
  92 function testSaveRestoreSequence()
  93 {
  94     assertNumberOfCallsInLog(0);
  95     ctx.restore();
  96     ctx.restore();
  97     assertNumberOfCallsInLog(0);
  98     ctx.save();
  99     assertNumberOfCallsInLog(1);
 100     ctx.save();
 101     assertNumberOfCallsInLog(2);
 102     ctx.save();
 103     assertNumberOfCallsInLog(3);
 104     ctx.restore();
 105     assertNumberOfCallsInLog(2);
 106     ctx.restore();
 107     assertNumberOfCallsInLog(1);
 108     ctx.restore();
 109     assertNumberOfCallsInLog(0);
 110     ctx.restore();
 111     ctx.restore();
 112     assertNumberOfCallsInLog(0);
 113 }
 114
 115 function callPathMethods()
 116 {
 117     ctx.beginPath();
 118     ctx.lineWidth = 2;
 119     ctx.moveTo(11, 12);
 120     ctx.lineTo(111, 112);
 121     ctx.stroke();
 122 }
 123
 124 function clearContextResourceLog()
 125 {
 126     while (ctxResource.calls().length)
 127         ctxResource.calls().pop();
 128     assertNumberOfCallsInLog(0);
 129 }
 130
 131 function testPathMethodsSequence()
 132 {
 133     assertNumberOfCallsInLog(0);
 134     callPathMethods();
 135     assertNumberOfCallsInLog(3); // [beginPath,moveTo,lineTo]
 136     callPathMethods();
 137     assertNumberOfCallsInLog(3); // old methods should have been cleared
 138     clearContextResourceLog();
 139 }
 140
 141 function testClipMethods()
 142 {
 143     assertNumberOfCallsInLog(0);
 144     ctx.save();
 145     callPathMethods();
 146     assertNumberOfCallsInLog(4);
 147     ctx.clip();
 148     assertNumberOfCallsInLog(5);
 149     callPathMethods();
 150     assertNumberOfCallsInLog(8);
 151     callPathMethods();
 152     assertNumberOfCallsInLog(8); // the last calls should have been cleared
 153     ctx.restore();
 154     assertNumberOfCallsInLog(5); // [save,beginPath,moveTo,lineTo,restore]
 155     ctx.beginPath();
 156     assertNumberOfCallsInLog(1); // [beginPath]
 157     clearContextResourceLog();
 158 }
 159
 160 function testMatrixMethods()
 161 {
 162     assertNumberOfCallsInLog(0);
 163     ctx.save();
 164     ctx.translate(100, 200);
 165     ctx.scale(0.9, 0.9);
 166     ctx.rotate(0.2);
 167     ctx.translate(-100, -200);
 168     assertNumberOfCallsInLog(5);
 169     ctx.setTransform(1, 2, 3, 4, 5, 6);
 170     ctx.rotate(0.3);
 171     assertNumberOfCallsInLog(3); // [save,setTransform,rotate]
 172     ctx.restore();
 173     assertNumberOfCallsInLog(0);
 174 }
 175
 176 function testMatrixMethodsWithPathMethods()
 177 {
 178     assertNumberOfCallsInLog(0);
 179     ctx.save();
 180     ctx.translate(100, 200);
 181     ctx.scale(0.9, 0.9);
 182     ctx.rotate(0.2);
 183     ctx.translate(-100, -200);
 184     assertNumberOfCallsInLog(5);
 185     ctx.beginPath();
 186     ctx.rect(1, 1, 10, 10);
 187     ctx.translate(1, 2);
 188     assertNumberOfCallsInLog(8);
 189     ctx.restore();
 190     assertNumberOfCallsInLog(8); // [save,translate,scale,rotate,translate,beginPath,rect,restore]
 191     ctx.beginPath();
 192     assertNumberOfCallsInLog(1); // [beginPath]
 193     clearContextResourceLog();
 194 }
 195
 196 function testNestedSaveRestoreCalls()
 197 {
 198     assertNumberOfCallsInLog(0);
 199     ctx.save();
 200     ctx.translate(100, 200);
 201     ctx.beginPath();
 202     ctx.rect(1, 1, 10, 10);
 203     ctx.clip();
 204     ctx.save();
 205     ctx.rotate(0.2);
 206     callPathMethods();
 207     assertNumberOfCallsInLog(10); // [save,translate,beginPath,rect,clip,save,rotate,beginPath,moveTo,lineTo]
 208     ctx.restore();
 209     assertNumberOfCallsInLog(11);
 210     ctx.restore();
 211     assertNumberOfCallsInLog(9); // [save,translate,save,rotate,beginPath,moveTo,lineTo,restore,restore]
 212     ctx.restore();
 213     assertNumberOfCallsInLog(9); // no effect
 214     ctx.setTransform(1, 2, 3, 4, 5, 6);
 215     assertNumberOfCallsInLog(10); // nothing to remove from the log
 216     ctx.beginPath();
 217     assertNumberOfCallsInLog(2); // [setTransform,beginPath]
 218     clearContextResourceLog();
 219 }
 220
 221 function testDeepNestedSaveRestoreCalls()
 222 {
 223     assertNumberOfCallsInLog(0);
 224     for (var i = 0; i < 10; ++i) {
 225         ctx.save();
 226         ctx.translate(1, 2);
 227     }
 228     assertNumberOfCallsInLog(20);
 229     callPathMethods();
 230     assertNumberOfCallsInLog(23);
 231     for (var i = 0; i < 10; ++i) {
 232         ctx.rotate(1);
 233         ctx.scale(2, 2);
 234         ctx.clip();
 235         ctx.transform(3, 3, 3, 3, 3, 3);
 236         ctx.restore();
 237         assertNumberOfCallsInLog(24 + i);
 238     }
 239     assertNumberOfCallsInLog(33);
 240     ctx.beginPath();
 241     assertNumberOfCallsInLog(1); // now clear up the log
 242     clearContextResourceLog();
 243 }
 244
 245 function createAndRunCanvas2DProgram()
 246 {
 247     ctx = createCanvas2DContext();
 248     console.assert(ctx, "Failed to create 2D context");
 249
 250     ctxResource = ctx["__resourceObject"];
 251     console.assert(ctxResource, "2D context is not wrapped");
 252
 253     rawCtx = ctxResource.wrappedObject();
 254     console.assert(rawCtx, "No raw 2D context found");
 255     console.assert(ctx !== rawCtx, "Proxy and RAW contexts should not be the same");
 256
 257     testDrawingAttributes();
 258     testSaveRestoreSequence();
 259     testPathMethodsSequence();
 260     testClipMethods();
 261     testMatrixMethods();
 262     testMatrixMethodsWithPathMethods();
 263     testNestedSaveRestoreCalls();
 264     testDeepNestedSaveRestoreCalls();
 265
 266     return "SUCCESS";
 267 }
 268
 269 function test()
 270 {
 271     InspectorTest.enableCanvasAgent(step1);
 272     function step1()
 273     {
 274         InspectorTest.evaluateInPage("createAndRunCanvas2DProgram()", step2);
 275     }
 276     function step2(error)
 277     {
 278         InspectorTest.assertEquals("SUCCESS", error.description);
 279         InspectorTest.completeTest();
 280     }
 281 }
 282
 283 </script>
 284 </head>
 285 <body onload="runTest()">
 286 <p>
 287 Tests Canvas 2D capturing basics.
 288 </p>
 289 <a href="https://bugs.webkit.org/show_bug.cgi?id=100752">Bug 100752</a>
 290
 291 </body>
 292 </html>