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>
<textarea>Before edit</textarea>
<div class=root></div>
<script>
  let shadow;

  window.addEventListener('DOMContentLoaded', () => {
    document.querySelector('textarea').value = 'After edit';

    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 iframe = document.createElement('iframe');
    iframe.width = '600px';
    iframe.height = '600px';
    iframe.src = '../frames/nested-frames.html';
    shadow.appendChild(iframe);
  });

  window.addEventListener('load', () => {
    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';
        }
      }
    }
  });
</script>