Focusing a shadow host places the slot content after the shadow DOM content
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 May 2016 17:48:49 +0000 (17:48 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 9 May 2016 17:48:49 +0000 (17:48 +0000)
https://bugs.webkit.org/show_bug.cgi?id=154770
<rdar://problem/24873102>

Reviewed by Antti Koivisto.

Add a regression test now that the bug has been fixed.

* fast/shadow-dom/shadow-layout-after-focus-expected.html: Added.
* fast/shadow-dom/shadow-layout-after-focus.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@200581 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/shadow-dom/shadow-layout-after-focus-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-focus.html [new file with mode: 0644]

index 4484c30..85ea877 100644 (file)
@@ -1,5 +1,18 @@
 2016-05-09  Ryosuke Niwa  <rniwa@webkit.org>
 
+        Focusing a shadow host places the slot content after the shadow DOM content
+        https://bugs.webkit.org/show_bug.cgi?id=154770
+        <rdar://problem/24873102>
+
+        Reviewed by Antti Koivisto.
+
+        Add a regression test now that the bug has been fixed.
+
+        * fast/shadow-dom/shadow-layout-after-focus-expected.html: Added.
+        * fast/shadow-dom/shadow-layout-after-focus.html: Added.
+
+2016-05-09  Ryosuke Niwa  <rniwa@webkit.org>
+
         REGRESSION (198056): Unable to use edit buttons on WordPress
         https://bugs.webkit.org/show_bug.cgi?id=157475
 
diff --git a/LayoutTests/fast/shadow-dom/shadow-layout-after-focus-expected.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-focus-expected.html
new file mode 100644 (file)
index 0000000..e704d24
--- /dev/null
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <p>Test passes if you see a single 100px by 100px green box below.</p>
+    <div style="width: 100px; height: 100px; background: green;"></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/shadow-layout-after-focus.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-focus.html
new file mode 100644 (file)
index 0000000..be3a5e4
--- /dev/null
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<body>
+<style>
+
+#container {
+    position: relative;
+}
+
+#host {
+    width: 90px;
+    height: 90px;
+    border: solid 5px red;
+    outline: none;
+}
+
+#host:not(:focus)::after {
+    position: absolute;
+    left: 5px;
+    bottom: 5px;
+    width: 90px;
+    height: 45px;
+    content: 'FAIL - not focused';
+}
+
+#host:focus {
+    outline: solid 5px green;
+    outline-offset: -5px;
+}
+
+#host div {
+    background: red;
+    width: 90px;
+    height: 45px;
+}
+
+#overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: green;
+    display: block;
+    width: 100px;
+    height: 50px;
+}
+
+</style>
+<p>Test passes if you see a single 100px by 100px green box below.</p>
+<div id="container">
+<div id="host" tabindex=0><div>FAIL - misplaced</div></div>
+<div id="overlay"></div>
+</div>
+<script>
+
+var host = document.getElementById('host');
+var shadow = host.attachShadow({mode: 'closed'});
+shadow.innerHTML = `
+    <style>
+        div { background: green; width: 90px; height: 45px; }
+    </style>
+    <slot></slot>
+    <div></div>
+`;
+
+host.getBoundingClientRect();
+host.focus();
+
+</script>
+</body>
+</html>