<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo">
<link rel="match" href="first-line-change-inline-color-nested-ref.html">
<style>
  #block { color: green; }
  #block::first-line { color: blue; }
  .green { color: green; }
</style>
<div id="block">
  <div>
    <p>Blue <span id="target"><span>This text should be green.</span></span> Blue</p>
  </div>
</div>
<script>
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    target.className = 'green';
    document.documentElement.removeAttribute('class');
  });
});
</script>
</html>