worklet-animation-with-non-ascii-name.https.html (1706B)
1 <html class="reftest-wait"> 2 <title>WorkletAnimation name should accept non-ASCII characters</title> 3 <link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> 4 <meta name="assert" content="Worklet Animation name should accept non-ASCII characters"> 5 <link rel="match" href="worklet-animation-with-non-ascii-name-ref.html"> 6 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 <script src="common.js"></script> 10 11 <style> 12 .box { 13 width: 100px; 14 height: 100px; 15 background-color: green; 16 } 17 </style> 18 19 <div id="t0" class="box"></div> 20 <div id="t1" class="box"></div> 21 <script id="visual_update" type="text/worklet"> 22 registerAnimator('bob', class { 23 animate(currentTime, effect) { 24 effect.localTime = 250; 25 } 26 }); 27 registerAnimator('東京', class { 28 animate(currentTime, effect) { 29 effect.localTime = 750; 30 } 31 }); 32 </script> 33 <script> 34 runInAnimationWorklet( 35 document.getElementById('visual_update').textContent 36 ).then(() => { 37 const keyframes = [ 38 {transform: 'translateX(0)' }, 39 {transform: 'translateX(200px)' } 40 ]; 41 const options = { 42 duration: 1000 43 }; 44 const $t0 = document.getElementById('t0'); 45 const $t0_effect = new KeyframeEffect($t0, keyframes, options); 46 const $t0_animation = new WorkletAnimation('bob', $t0_effect); 47 48 const $t1 = document.getElementById('t1'); 49 const $t1_effect = new KeyframeEffect($t1, keyframes, options); 50 const $t1_animation = new WorkletAnimation('東京', $t1_effect); 51 52 $t0_animation.play(); 53 $t1_animation.play(); 54 55 waitForAsyncAnimationFrames(1).then(_ => { 56 takeScreenshot(); 57 }); 58 }); 59 </script>