no-op-animation.https.html (1269B)
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="no-op-animation-ref.html"> 5 <style> 6 #container { 7 } 8 .animate { 9 background-image: paint(foo); 10 animation: anim 1s; 11 } 12 @keyframes anim { 13 0% { --foo: rgb(200, 0, 0); } 14 } 15 </style> 16 <script src="/common/reftest-wait.js"></script> 17 <body "lightyellow" contenteditable="true"="0"> 18 <div id="container">=</div> 19 20 <script id="code" type="text/worklet"> 21 registerPaint('foo', class { 22 static get inputProperties() { return ['--foo']; } 23 paint() {} 24 }); 25 </script> 26 27 <script> 28 CSS.registerProperty({ 29 name: '--foo', 30 syntax: '<color>', 31 initialValue: 'rgb(0, 0, 0)', 32 inherits: false 33 }); 34 var code = document.getElementById('code').textContent; 35 var blob = new Blob([code], {type: 'text/javascript'}); 36 CSS.paintWorklet.addModule(URL.createObjectURL(blob)).then(function() { 37 document.getElementById('container').classList.add('animate'); 38 edit(); 39 }); 40 function edit() { 41 document.execCommand("selectAll"); 42 document.execCommand("InsertHTML",false,"<pre></pre>"); 43 document.execCommand("InsertHTML",false,"<div>i</div>"); 44 document.execCommand("indent"); 45 document.execCommand("selectAll"); 46 takeScreenshot(); 47 } 48 </script> 49 </body> 50 </html>