| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <title>Shadow DOM: The indicated part of the document should not match an elemen
t inside a shadow tree</title> |
| 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> |
| 6 <meta name="assert" content="An element inside a shadow tree should not be the i
ndicated part of the document even if its ID is exactly equal to the decoded fra
gid or its name attribute is exactly equal to the fragid"> |
| 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/browsers.html#scro
ll-to-the-fragment-identifier"> |
| 8 <script src="../../../resources/testharness.js"></script> |
| 9 <script src="../../../resources/testharnessreport.js"></script> |
| 10 </head> |
| 11 <body> |
| 12 <div id="log"></div> |
| 13 <div id="testContainer"></div> |
| 14 <script> |
| 15 |
| 16 var tests = [ |
| 17 {test: async_test('The user agent scroll to the fragment when there is an el
ement with an ID exactly equal to the decoded fragid'), |
| 18 execute: testScrollingToElementInDocumentTree.bind(this, 'div')}, |
| 19 {test: async_test('The user agent scroll to the fragment when there is an an
chor element with a name attribute exactly equal to the decoded fragid'), |
| 20 execute: testScrollingToElementInDocumentTree.bind(this, 'a')}, |
| 21 |
| 22 {test: async_test('The user agent should not scroll to an element with an ID
exactly equal to the decoded fragid in an open shadow tree'), |
| 23 execute: testScrollingToElementInShadowTree.bind(this, 'div', 'open')}, |
| 24 {test: async_test('The user agent should not scroll to an element with an ID
exactly equal to the decoded fragid in a closed shadow tree'), |
| 25 execute: testScrollingToElementInShadowTree.bind(this, 'div', 'closed')}
, |
| 26 {test: async_test('The user agent should not scroll to an anchor element wit
h a name attribute exactly equal to the decoded fragid in an open shadow tree'), |
| 27 execute: testScrollingToElementInShadowTree.bind(this, 'a', 'open')}, |
| 28 {test: async_test('The user agent should not scroll to an anchor element wit
h a name attribute exactly equal to the decoded fragid in a closed shadow tree')
, |
| 29 execute: testScrollingToElementInShadowTree.bind(this, 'a', 'closed')}, |
| 30 |
| 31 {test: async_test('The user agent should scroll to an element with an ID exa
ctly equal to the decoded fragid in the document tree' |
| 32 + ' even if there was another element with the same ID inside an open sh
adow tree earlier in tree order'), |
| 33 execute: testScrollingToElementInDocumentTreeAfterElementInShadowTreeWit
hSameID.bind(this, 'div', 'open')}, |
| 34 {test: async_test('The user agent should scroll to an element with an ID exa
ctly equal to the decoded fragid in the document tree' |
| 35 + ' even if there was another element with the same ID inside a closed s
hadow tree earlier in tree order'), |
| 36 execute: testScrollingToElementInDocumentTreeAfterElementInShadowTreeWit
hSameID.bind(this, 'div', 'closed')}, |
| 37 {test: async_test('The user agent should scroll to an anchor element with a
name attribute exactly equal to the decoded fragid in the document tree' |
| 38 + ' even if there was another element with the same ID inside an open sh
adow tree earlier in tree order'), |
| 39 execute: testScrollingToElementInDocumentTreeAfterElementInShadowTreeWit
hSameID.bind(this, 'a', 'open')}, |
| 40 {test: async_test('The user agent should scroll to an anchor element with a
name attribute exactly equal to the decoded fragid in the document tree' |
| 41 + ' even if there was another element with the same ID inside a closed s
hadow tree earlier in tree order'), |
| 42 execute: testScrollingToElementInDocumentTreeAfterElementInShadowTreeWit
hSameID.bind(this, 'a', 'closed')}, |
| 43 ]; |
| 44 |
| 45 function executeNextTest() |
| 46 { |
| 47 window.scrollTo(0, 0); |
| 48 |
| 49 currentFragIdSuffix++; |
| 50 var nextTest = tests.shift(); |
| 51 if (!nextTest) |
| 52 return; |
| 53 setTimeout(function () { |
| 54 nextTest.execute(nextTest.test); |
| 55 }, 0); |
| 56 } |
| 57 |
| 58 var testContainer = document.getElementById('testContainer'); |
| 59 var currentFragIdSuffix = 0; |
| 60 |
| 61 function tallElementMarkup() |
| 62 { |
| 63 return '<div style="height: ' + (window.innerHeight * 2) + 'px"><a href="#fr
agid' + currentFragIdSuffix + '">Go to fragment</a></div>'; |
| 64 } |
| 65 |
| 66 function targetMarkup(elementType) |
| 67 { |
| 68 return elementType == 'div' ? ('<div id="fragid' + currentFragIdSuffix + '">
hello</div>') : ('<a name="fragid' + currentFragIdSuffix + '">hello</a>'); |
| 69 } |
| 70 |
| 71 function clickFirstAnchorAndRunStep(test, step) |
| 72 { |
| 73 setTimeout(function () { |
| 74 testContainer.querySelector('a').click(); |
| 75 setTimeout(function () { |
| 76 test.step(step); |
| 77 testContainer.innerHTML = ''; |
| 78 test.done(); |
| 79 executeNextTest(); |
| 80 }, 0); |
| 81 }, 0); |
| 82 } |
| 83 |
| 84 function testScrollingToElementInDocumentTree(elementType, test) |
| 85 { |
| 86 test.step(function () { |
| 87 testContainer.innerHTML = tallElementMarkup() + targetMarkup(elementType
); |
| 88 assert_equals(window.pageYOffset, 0); |
| 89 }); |
| 90 clickFirstAnchorAndRunStep(test, function () { |
| 91 assert_not_equals(window.pageYOffset, 0); |
| 92 }); |
| 93 } |
| 94 |
| 95 function testScrollingToElementInShadowTree(elementType, mode, test) |
| 96 { |
| 97 test.step(function () { |
| 98 testContainer.innerHTML = tallElementMarkup() + '<div id="host"></div>'; |
| 99 var host = document.querySelector('#host'); |
| 100 var shadowRoot = host.attachShadow({mode: mode}); |
| 101 shadowRoot.innerHTML = targetMarkup(elementType); |
| 102 assert_equals(window.pageYOffset, 0); |
| 103 }); |
| 104 clickFirstAnchorAndRunStep(test, function () { |
| 105 assert_equals(window.pageYOffset, 0); |
| 106 }); |
| 107 } |
| 108 |
| 109 function testScrollingToElementInDocumentTreeAfterElementInShadowTreeWithSameID(
elementType, mode, test) |
| 110 { |
| 111 test.step(function () { |
| 112 testContainer.innerHTML = tallElementMarkup() + '<div id="host"></div>'
+ tallElementMarkup() + targetMarkup(elementType); |
| 113 var host = document.querySelector('#host'); |
| 114 var shadowRoot = host.attachShadow({mode: mode}); |
| 115 shadowRoot.innerHTML = targetMarkup(elementType); |
| 116 assert_equals(window.pageYOffset, 0); |
| 117 }); |
| 118 clickFirstAnchorAndRunStep(test, function () { |
| 119 assert_true(window.pageYOffset > testContainer.querySelector('#host').of
fsetTop); |
| 120 }); |
| 121 } |
| 122 |
| 123 executeNextTest(); |
| 124 |
| 125 </script> |
| 126 </body> |
| 127 </html> |
| OLD | NEW |