<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Yomichan Manual Performance Tests</title> <link rel="stylesheet" href="test-stylesheet.css"> </head> <body><div class="content"> <div class="description"><iframe> element inside of an open shadow DOM.</div> <div id="shadow-iframe-container-open"></div> <template id="shadow-iframe-container-open-content-template"> <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 50px; border: 1px solid #d8d8d8;"></iframe> </template> <script> (() => { const shadowIframeContainer = document.querySelector('#shadow-iframe-container-open'); const shadow = shadowIframeContainer.attachShadow({mode: 'open'}); const template = document.querySelector('#shadow-iframe-container-open-content-template').content; const content = document.importNode(template, true); shadow.appendChild(content); })(); </script> <div class="description">Add elements</div> <div> <a href="#" id="add-elements-1000">1000</a> <a href="#" id="add-elements-10000">10000</a> <a href="#" id="add-elements-100000">100000</a> <a href="#" id="add-elements-1000000">1000000</a> </div> <div id="counter"></div> <div id="container"></div> <script> (() => { document.querySelector('#add-elements-1000').addEventListener('click', () => addElements(1000), false); document.querySelector('#add-elements-10000').addEventListener('click', () => addElements(10000), false); document.querySelector('#add-elements-100000').addEventListener('click', () => addElements(100000), false); document.querySelector('#add-elements-1000000').addEventListener('click', () => addElements(1000000), false); let counter = 0; function addElements(amount) { const container = document.querySelector('#container'); for (let i = 0; i < amount; i++) { const element = document.createElement('div'); element.textContent = 'ありがとう'; container.appendChild(element); } counter += amount; document.querySelector('#counter').textContent = counter; } })(); </script> </div></body> </html>