Blitz - WPT: letter-spacing-animating-letter-spacing.html

wpt / css / css-text / letter-spacing / letter-spacing-animating-letter-spacing.html

/css/css-text/letter-spacing/letter-spacing-animating-letter-spacing.html

<!DOCTYPE html>
<html>
<head>
<title>letter-spacing animates when animating letter-spacing</title>
<link rel="author" title="Sam Weinig" href="mailto:sam@webkit.org">
<link rel='help' href='https://www.w3.org/TR/css-text-3/#letter-spacing'>
<link rel='match' href='reference/letter-spacing-animating-letter-spacing-ref.html'>
</head>
<body>
<div>The letters below should be separated by 20 pixels.</div>
<div id="target">ABCD</div>

<script>
  const target = document.querySelector('#target');

  const animation = target.animate({ letterSpacing: ['0px', '40px'] }, 40);
  animation.pause();
  animation.currentTime = 20;
</script>
</body>
</html>

/css/css-text/letter-spacing/reference/letter-spacing-animating-letter-spacing-ref.html

<!DOCTYPE html>
<html>
<head>
<style>
  #target {
    letter-spacing: 20px;
  }
</style>
</head>
<body>
<div>The letters below should be separated by 20 pixels.</div>
<div id="target">ABCD</div>
</body>
</html>