parse-input-arguments-018.https.html (2620B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> 4 <link rel="match" href="parse-input-arguments-018-ref.html"> 5 <style> 6 .container { 7 width: 100px; 8 height: 100px; 9 } 10 11 #canvas-geometry { 12 background-image: paint(failureIndicator), paint(geometry); 13 } 14 </style> 15 <script src="/common/reftest-wait.js"></script> 16 <script src="/common/worklet-reftest.js"></script> 17 <body> 18 <p>This test result should show a green rect. The registerPaint('failureIndicator') 19 will be called twice and the inputArguments will return two different strings, 20 which will throw an exception and the paint function with 'failureIndicator' 21 should never be called. In other words, there should be no red painted in the result.</p> 22 <div id="canvas-geometry" class="container"></div> 23 24 <script id="code" type="text/worklet"> 25 function generateRandomIdentifier(length) { 26 const firstChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; 27 const nthChars = firstChars + "0123456789"; 28 // Pick a letter for the first character so that the string is a valid 29 // identifier. 30 var text = firstChars.charAt(Math.floor(Math.random() * firstChars.length)); 31 for (var i = 0; i < length - 1; i++) { 32 text += nthChars.charAt(Math.floor(Math.random() * nthChars.length)); 33 } 34 return text; 35 } 36 37 try { 38 registerPaint('failureIndicator', class { 39 static get inputArguments() { 40 // This test is testing the case where an exception should be thrown 41 // when two paint definitions with different properties are registered 42 // to the same paint worklet. In order to do that, we randomly generate 43 // the input properties here. We make the string length 100 to make sure 44 // that it is veryyyyyyyyyyyy unlikely that two strings will be the same 45 // when running this test. 46 var current_str = generateRandomIdentifier(100); 47 return [current_str]; 48 } 49 // The paint function here should never be called because the inputArguments 50 // will generate two different properties, and that should throw an 51 // exception. 52 paint(ctx, geom) { 53 ctx.fillStyle = 'red'; 54 ctx.fillRect(0, 0, 50, 50); 55 } 56 }); 57 } catch(ex) { 58 } 59 60 registerPaint('geometry', class { 61 paint(ctx, geom) { 62 ctx.fillStyle = 'green'; 63 ctx.fillRect(50, 50, 50, 50); 64 } 65 }); 66 </script> 67 68 <script> 69 importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); 70 </script> 71 </body> 72 </html>