Add some style recalc tests for shadow DOM
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Sep 2015 04:01:29 +0000 (04:01 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Sep 2015 04:01:29 +0000 (04:01 +0000)
https://bugs.webkit.org/show_bug.cgi?id=149445

Reviewed by Antti Koivisto.

Add tests to make sure we trigger necessary style recalc.

* fast/shadow-dom/shadow-layout-after-attach-shadow-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/shadow-layout-after-attach-shadow.html: Added.
* fast/shadow-dom/shadow-layout-after-host-child-changes-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/shadow-layout-after-host-child-changes.html: Added.
* fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child.html: Added.
* fast/shadow-dom/shadow-layout-after-slot-changes-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
* fast/shadow-dom/shadow-layout-after-slot-changes.html: Added.
* platform/mac/TestExpectations:

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

LayoutTests/ChangeLog
LayoutTests/fast/shadow-dom/shadow-layout-after-attach-shadow-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-attach-shadow.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-host-child-changes-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-host-child-changes.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-slot-changes-expected.html [new file with mode: 0644]
LayoutTests/fast/shadow-dom/shadow-layout-after-slot-changes.html [new file with mode: 0644]
LayoutTests/platform/mac/TestExpectations

index 6d1c9f9636ad9c9b8e41319d9dd3c8246f29b677..f2693e546736e7baece5d7d04d4ee320a409da07 100644 (file)
@@ -1,3 +1,22 @@
+2015-09-21  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Add some style recalc tests for shadow DOM
+        https://bugs.webkit.org/show_bug.cgi?id=149445
+
+        Reviewed by Antti Koivisto.
+
+        Add tests to make sure we trigger necessary style recalc.
+
+        * fast/shadow-dom/shadow-layout-after-attach-shadow-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/shadow-layout-after-attach-shadow.html: Added.
+        * fast/shadow-dom/shadow-layout-after-host-child-changes-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/shadow-layout-after-host-child-changes.html: Added.
+        * fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child.html: Added.
+        * fast/shadow-dom/shadow-layout-after-slot-changes-expected.html: Copied from LayoutTests/fast/shadow-dom/css-scoping-shadow-root-hides-children-expected.html.
+        * fast/shadow-dom/shadow-layout-after-slot-changes.html: Added.
+        * platform/mac/TestExpectations:
+
 2015-09-21  Alexey Proskuryakov  <ap@apple.com>
 
         https://bugs.webkit.org/show_bug.cgi?id=149415
diff --git a/LayoutTests/fast/shadow-dom/shadow-layout-after-attach-shadow-expected.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-attach-shadow-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-attach-shadow.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-attach-shadow.html
new file mode 100644 (file)
index 0000000..04b866c
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>Test passes if you see a single 100px by 100px green box below.</p> 
+<my-host id="host1" style="background: red;">FAIL</my-host>
+<my-host id="host2" style="background: green;"><div slot="foo" style="background: red;">FAIL</div></my-host>
+<my-host id="host3" style="background: red;"><div style="background: green;"></div></my-host>
+<my-host id="host4" style="background: red;"><div style="background: green;"></div></my-host>
+<style>
+
+my-host {
+    display: block;
+    width: 100px;
+    height: 25px;
+    overflow: hidden;
+}
+
+my-host > div {
+    width: 100%;
+    height: 100%;
+}
+
+</style>
+<script>
+
+function forceLayout() {
+    if (window.internals)
+        internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
+    else
+        document.querySelector('p').getBoundingClientRect();
+}
+
+try {
+    forceLayout();
+
+    var shadow1 = document.getElementById('host1').attachShadow({mode: 'open'});
+    shadow1.innerHTML = '<div style="width: 100%; height: 100%; background: green;"></div>';
+
+    var shadow2 = document.getElementById('host2').attachShadow({mode: 'open'});
+
+    var shadow3 = document.getElementById('host3').attachShadow({mode: 'open'});
+    shadow3.appendChild(document.createElement('slot'));
+
+    var shadow4 = document.getElementById('host4').attachShadow({mode: 'open'});
+    shadow4.innerHTML = '<div style="width: 100%; height: 100%; background: red;">'
+        + '<div style="width: 100%; height: 100%; background: red;"></div><slot slot="foo"></slot></div>';
+
+    var shadow5 = shadow4.firstChild.attachShadow({mode: 'closed'});
+    var innerSlot = document.createElement('slot');
+    innerSlot.name = 'foo';
+    shadow5.appendChild(innerSlot);
+
+} catch (exception) {
+    document.body.appendChild(document.createTextNode(exception));
+}
+
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/shadow-layout-after-host-child-changes-expected.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-host-child-changes-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-host-child-changes.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-host-child-changes.html
new file mode 100644 (file)
index 0000000..a48b7eb
--- /dev/null
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>Test passes if you see a single 100px by 100px green box below.</p> 
+<my-host id="host1" style="background: green;"><div style="background: red;">FAIL</div></my-host>
+<my-host id="host2" style="background: green;"><div slot="foo" style="background: red;">FAIL</div></my-host>
+<my-host id="host3" style="background: red;"><div slot="foo" style="background: red;">FAIL</div><div slot="foo" style="background: green;"></div></my-host>
+<my-host id="host4" style="background: red;"><div style="background: red;">FAIL</div></my-host>
+<style>
+
+my-host {
+    display: block;
+    width: 100px;
+    height: 25px;
+    overflow: hidden;
+}
+
+my-host > div {
+    width: 100%;
+    height: 100%;
+}
+
+</style>
+<script>
+
+try {
+    var host1 = document.getElementById('host1');
+    host1.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
+
+    var host2 = document.getElementById('host2');
+    host2.attachShadow({mode: 'open'}).innerHTML = '<slot name="foo"></slot>';
+
+    var host3 = document.getElementById('host3');
+    host3.attachShadow({mode: 'open'}).innerHTML = '<slot name="foo"></slot>';
+
+    var host4 = document.getElementById('host4');
+    host4.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
+
+    if (window.internals)
+        internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
+    else
+        document.querySelector('p').getBoundingClientRect();
+
+    host1.removeChild(host1.firstChild);
+    host2.firstChild.slot = 'bar';
+    host3.firstChild.slot = null;
+    var greenBox = document.createElement('div');
+    greenBox.style.backgroundColor = 'green';
+    host4.insertBefore(greenBox, host4.firstChild);
+
+} catch (exception) {
+    document.body.appendChild(document.createTextNode(exception));
+}
+
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child-expected.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child-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-inserting-or-removing-host-child.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child.html
new file mode 100644 (file)
index 0000000..3709519
--- /dev/null
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>Test passes if you see a single 100px by 100px green box below.</p> 
+<green-host style="background: green;"><span>FAIL</span></green-host>
+<red-host style="background: red;"></red-host>
+<style>
+
+green-host, red-host {
+    display: block;
+    width: 100px;
+    height: 50px;
+    overflow: hidden;
+}
+
+</style>
+<script>
+
+try {
+    var greenHost = document.querySelector('green-host');
+    greenHost.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
+
+    var redHost = document.querySelector('red-host');
+    redHost.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>FAIL';
+
+    if (window.internals)
+        internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
+    else
+        document.querySelector('span').getBoundingClientRect();
+
+    greenHost.removeChild(greenHost.firstChild);
+
+    var greenChild = document.createElement('div');
+    greenChild.style.width = '100%';
+    greenChild.style.height = '100%';
+    greenChild.style.backgroundColor = 'green';
+    redHost.appendChild(greenChild);
+
+} catch (exception) {
+    document.body.appendChild(document.createTextNode(exception));
+}
+
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/shadow-dom/shadow-layout-after-slot-changes-expected.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-slot-changes-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-slot-changes.html b/LayoutTests/fast/shadow-dom/shadow-layout-after-slot-changes.html
new file mode 100644 (file)
index 0000000..01a6568
--- /dev/null
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>Test passes if you see a single 100px by 100px green box below.</p> 
+<my-host id="host1" style="background: green;"><div style="background: red;">FAIL</div></my-host>
+<my-host id="host2" style="background: green;"><div slot="foo" style="background: red;">FAIL</div></my-host>
+<my-host id="host3" style="background: red;"><div style="background: green;"></div><div slot="foo" style="background: red;">FAIL</div></my-host>
+<my-host id="host4" style="background: red;"><div style="background: green;"></div></my-host>
+<style>
+
+my-host {
+    display: block;
+    width: 100px;
+    height: 25px;
+    overflow: hidden;
+}
+
+my-host > div {
+    width: 100%;
+    height: 100%;
+}
+
+</style>
+<script>
+
+try {
+    var shadow1 = document.getElementById('host1').attachShadow({mode: 'open'});
+    shadow1.innerHTML = '<slot></slot>';
+
+    var shadow2 = document.getElementById('host2').attachShadow({mode: 'open'});
+    shadow2.innerHTML = '<slot name="foo"></slot>';
+
+    var shadow3 = document.getElementById('host3').attachShadow({mode: 'open'});
+    shadow3.innerHTML = '<slot name="foo"></slot>';
+
+    var shadow4 = document.getElementById('host4').attachShadow({mode: 'open'});
+    shadow4.innerHTML = 'FAIL';
+
+    if (window.internals)
+        internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
+    else
+        document.querySelector('p').getBoundingClientRect();
+
+    shadow1.removeChild(shadow1.firstChild);
+    shadow2.firstChild.name = 'bar';
+    shadow3.firstChild.name = null;
+    shadow4.insertBefore(document.createElement('slot'), shadow4.firstChild);
+
+} catch (exception) {
+    document.body.appendChild(document.createTextNode(exception));
+}
+
+</script>
+</body>
+</html>
index 647d41a6ec899852b79cebfe35ee5645b947ef81..a80b7d36ae0bb508724308367b44769894d21002 100644 (file)
@@ -1308,3 +1308,6 @@ webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-host-rule.html [ ImageOnl
 webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-host-functional-rule.html [ ImageOnlyFailure ]
 webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-slotted-rule.html [ ImageOnlyFailure ]
 webkit.org/b/149328 fast/shadow-dom/css-scoping-shadow-slot-display-override.html [ ImageOnlyFailure ]
+webkit.org/b/149328 fast/shadow-dom/shadow-layout-after-host-child-changes.html [ ImageOnlyFailure ]
+webkit.org/b/149328 fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child.html [ ImageOnlyFailure ]
+webkit.org/b/149328 fast/shadow-dom/shadow-layout-after-slot-changes.html [ ImageOnlyFailure ]