| <!DOCTYPE html> |
| <script src='../resources/testharness.js'></script> |
| <script src='../resources/testharnessreport.js'></script> |
| <script src='resources/shadow-dom.js'></script> |
| <script src='resources/focus-utils.js'></script> |
| <style> |
| div { background-color: white; } |
| div:focus { background-color: green; } |
| </style> |
| <body> |
| <div id='sandbox'></div> |
| </body> |
| <script> |
| 'use strict'; |
| |
| // Test if :focus matching state of shadow host is properly handled in case of DOM mutation. |
| |
| function buildTree(parent, delegatesFocus) |
| { |
| parent.innerHTML = '<div id="host"></div><div id="dest"></div>'; |
| let host = parent.querySelector('#host'); |
| host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus}); |
| host.shadowRoot.innerHTML = '<input id="input">'; |
| } |
| |
| let sandbox = document.getElementById('sandbox'); |
| |
| test(() => { |
| buildTree(sandbox, false); |
| const host = getNodeInComposedTree('host'); |
| const input = getNodeInComposedTree('host/input'); |
| const dest = getNodeInComposedTree('dest'); |
| |
| assert_background_color('host', 'rgb(255, 255, 255)'); |
| input.focus(); |
| assert_background_color('host', 'rgb(255, 255, 255)'); |
| dest.appendChild(input); |
| assert_background_color('host', 'rgb(255, 255, 255)'); |
| input.focus(); |
| host.shadowRoot.appendChild(input); |
| assert_background_color('host', 'rgb(255, 255, 255)'); |
| }, '(1/2) DOM mutation across shadow boundary with delegatesFocus=false'); |
| |
| test(() => { |
| buildTree(sandbox, true); |
| const host = getNodeInComposedTree('host'); |
| const input = getNodeInComposedTree('host/input'); |
| const dest = getNodeInComposedTree('dest'); |
| |
| assert_background_color('host', 'rgb(255, 255, 255)'); |
| input.focus(); |
| assert_background_color('host', 'rgb(0, 128, 0)'); |
| dest.appendChild(input); |
| assert_background_color('host', 'rgb(255, 255, 255)'); |
| input.focus(); |
| host.shadowRoot.appendChild(input); |
| // appendChild() will blur the focus from input element, thus input is no longer focused. |
| assert_background_color('host', 'rgb(255, 255, 255)'); |
| }, '(2/2) DOM mutation across shadow boundary with delegatesFocus=true'); |
| </script> |
