mirror of
https://github.com/microsoft/playwright.git
synced 2025-06-26 21:40:17 +00:00
7fe7d0ef32
- Intercept CSSOM modifications and recalculate overridden css text. - When css text does not change, use "backwards reference" similar to node references. - Set 'Cache-Control: no-cache' for resources that could be overridden.
59 lines
1.5 KiB
HTML
59 lines
1.5 KiB
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>
|