Index: third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none.html |
diff --git a/third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none.html b/third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none.html |
index 1103356a903c0553140d38c569dc49e6c79f2922..b5ba42b73706d94aff16098f2570962788b9a9d3 100644 |
--- a/third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none.html |
+++ b/third_party/WebKit/LayoutTests/shadow-dom/focus-shadowhost-display-none.html |
@@ -1,12 +1,14 @@ |
<!DOCTYPE html> |
-<script src="../resources/js-test.js"></script> |
+<script src='../resources/testharness.js'></script> |
+<script src='../resources/testharnessreport.js'></script> |
<style> |
-div#host:focus { display: none; } |
+#host:focus { display: none; } |
</style> |
-<div id="sandbox"></div> |
-<div id="host"></div> |
+<div id='sandbox'></div> |
<script> |
-description('Check if shadow host with display:none CSS rule for :focus works. crbug.com/482830'); |
+'use strict'; |
+ |
+// Check if shadow host with display:none CSS rule for :focus works. crbug.com/482830 |
var host; |
var root; |
@@ -17,57 +19,50 @@ function setupShadowDOM(delegatesFocus) { |
host = sandbox.appendChild(document.createElement('div')); |
host.id = 'host'; |
- root = host.attachShadow({ 'mode': 'open', 'delegatesFocus': delegatesFocus }); |
+ root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus}); |
input = document.createElement('input'); |
root.appendChild(input); |
host.tabIndex = 0; |
} |
-function testFocusShadowHost() { |
- debug('when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.'); |
+promise_test(() => { |
setupShadowDOM(false); |
return new Promise( |
function(resolve) { |
host.focus(); |
- shouldBeEqualToString('window.getComputedStyle(host).display', 'none'); |
- shouldBe('document.activeElement', 'host'); |
- shouldBeNull('root.activeElement'); |
+ assert_equals(window.getComputedStyle(host).display, 'none'); |
+ assert_equals(document.activeElement, host); |
+ assert_equals(root.activeElement, null); |
function onBlur() { |
- shouldBeEqualToString('window.getComputedStyle(host).display', 'block'); |
- shouldBe('document.activeElement', 'document.body'); |
- shouldBeNull('root.activeElement'); |
+ assert_equals(window.getComputedStyle(host).display, 'block'); |
+ assert_equals(document.activeElement, document.body); |
+ assert_equals(root.activeElement, null); |
host.removeEventListener('blur', onBlur); |
resolve(); |
} |
host.addEventListener('blur', onBlur); |
}); |
-} |
+}, 'when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.'); |
-function testFocusInsideShadowRoot() { |
- debug('when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.'); |
+promise_test(() => { |
setupShadowDOM(true); |
return new Promise( |
function(resolve) { |
input.focus(); |
- shouldBeEqualToString('window.getComputedStyle(host).display', 'none'); |
- shouldBe('document.activeElement', 'host'); |
- shouldBe('root.activeElement', 'input'); |
+ assert_equals(window.getComputedStyle(host).display, 'none'); |
+ assert_equals(document.activeElement, host); |
+ assert_equals(root.activeElement, input); |
function onBlur() { |
- shouldBeEqualToString('window.getComputedStyle(host).display', 'block'); |
- shouldBe('document.activeElement', 'document.body'); |
- shouldBeNull('root.activeElement'); |
+ assert_equals(window.getComputedStyle(host).display, 'block'); |
+ assert_equals(document.activeElement, document.body); |
+ assert_equals(root.activeElement, null); |
input.removeEventListener('blur', onBlur); |
resolve(); |
} |
input.addEventListener('blur', onBlur); |
}); |
-} |
- |
-if (window.testRunner) { |
- testFocusShadowHost().then(testFocusInsideShadowRoot).then(function(){ testRunner.notifyDone(); }); |
- testRunner.waitUntilDone(); |
-} |
+}, 'when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.'); |
</script> |