playwright/test/assets/snapshot/snapshot-with-css.html

<link rel='stylesheet' href='./one.css'>
<style>
  .root {
    width: 800px;
    height: 800px;
    background: cyan;
  }
</style>
<div>hello, world!</div>
<div class=root></div>
<script>
  let shadow;

  window.addEventListener('DOMContentLoaded', () => {
    const root = document.querySelector('.root');
    shadow = root.attachShadow({ mode: 'open' });

    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = './one.css';
    shadow.appendChild(link);

    const imaged = document.createElement('div');
    imaged.className = 'imaged';
    shadow.appendChild(imaged);

    const textarea = document.createElement('textarea');
    textarea.textContent = 'Before edit';
    textarea.style.display = 'block';
    shadow.appendChild(textarea);

    const iframe = document.createElement('iframe');
    iframe.width = '600px';
    iframe.height = '600px';
    iframe.src = '../frames/nested-frames.html';
    shadow.appendChild(iframe);
  });

  window.addEventListener('load', () => {
    setTimeout(() => {
      shadow.querySelector('textarea').value = 'After edit';

      for (const rule of document.styleSheets[1].cssRules) {
        if (rule.cssText.includes('background: cyan'))
          rule.style.background = 'magenta';
      }

      for (const rule of shadow.styleSheets[0].cssRules) {
        if (rule.styleSheet) {
          for (const rule2 of rule.styleSheet.cssRules) {
            if (rule2.cssText.includes('width: 200px'))
              rule2.style.width = '400px';
          }
        }
      }
    }, 500);
  });
</script>