| |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| app-content { |
| display: block; |
| width: 100px; |
| height: 100px; |
| background: green; |
| animation: animation 10s linear forwards; |
| } |
| @keyframes animation { |
| from { |
| transform: translateX(0px); |
| } |
| 2% { |
| transform: translateX(100px); |
| } |
| to { |
| transform: translateX(100px); |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <app-content id=target>old text</app-content> |
| |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| customElements.define('app-content', class extends HTMLElement { |
| constructor() { |
| super(); |
| |
| const root = this.attachShadow({ mode: 'open' }); |
| root.innerHTML = `<slot></slot>`; |
| } |
| }); |
| |
| setTimeout(() => { |
| target.innerHTML = "new text" |
| }, 100); |
| |
| if (window.testRunner) |
| setTimeout(() => testRunner.notifyDone(), 500); |
| </script> |
| </body> |
| </html> |
