https://bugs.webkit.org/show_bug.cgi?id=149447
Reviewed by Antti Koivisto.
Source/WebCore:
Invalidate the render tree of a shadow host when a new child is inserted, an existing child is removed,
or slot attribute of a child is modified.
No new tests. Covered by existing tests added in r190101.
* dom/Element.cpp:
(WebCore::Element::childrenChanged): Call invalidateSlotAssignments or invalidateDefaultSlotAssignments
depending on the types of children being inserted or removed since text nodes can only be assigned into
a default slot.
* dom/ShadowRoot.cpp:
(WebCore::ShadowRoot::invalidateSlotAssignments):
(WebCore::ShadowRoot::invalidateDefaultSlotAssignments): Added.
* dom/ShadowRoot.h:
* dom/SlotAssignment.cpp:
(WebCore::SlotAssignment::invalidate): Reconstruct the render tree for the whole host. We can optimize
in the future by only invalidating active slot elements instead.
(WebCore::SlotAssignment::invalidateDefaultSlot): Added.
* dom/SlotAssignment.h:
LayoutTests:
Removed failing expectations from newly passing tests.
Also added test cases for inserting and removing text nodes, and modified the style recalc tests
to force layout between each DOM change to test case separately.
* fast/shadow-dom/shadow-layout-after-host-child-changes.html:
* fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child.html:
* fast/shadow-dom/shadow-layout-after-slot-changes.html:
* platform/mac/TestExpectations:
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190109
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
+2015-09-22 Ryosuke Niwa <rniwa@webkit.org>
+
+ invalidateSlotAssignments should trigger style recalc
+ https://bugs.webkit.org/show_bug.cgi?id=149447
+
+ Reviewed by Antti Koivisto.
+
+ Removed failing expectations from newly passing tests.
+
+ Also added test cases for inserting and removing text nodes, and modified the style recalc tests
+ to force layout between each DOM change to test case separately.
+
+ * fast/shadow-dom/shadow-layout-after-host-child-changes.html:
+ * fast/shadow-dom/shadow-layout-after-inserting-or-removing-host-child.html:
+ * fast/shadow-dom/shadow-layout-after-slot-changes.html:
+ * platform/mac/TestExpectations:
+
2015-09-21 Chris Dumez <cdumez@apple.com>
time element should use HTMLTimeElement interface
</style>
<script>
+function forceLayout() {
+ if (window.internals)
+ internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
+ else
+ document.querySelector('p').getBoundingClientRect();
+}
+
try {
var host1 = document.getElementById('host1');
host1.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
var host4 = document.getElementById('host4');
host4.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
- if (window.internals)
- internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
- else
- document.querySelector('p').getBoundingClientRect();
+ forceLayout();
host1.removeChild(host1.firstChild);
+
+ forceLayout();
+
host2.firstChild.slot = 'bar';
+
+ forceLayout();
+
host3.firstChild.slot = null;
+
+ forceLayout();
+
var greenBox = document.createElement('div');
greenBox.style.backgroundColor = 'green';
host4.insertBefore(greenBox, host4.firstChild);
<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>
+<my-host id="host1" style="background: green;"><span>FAIL</span></my-host>
+<my-host id="host2" style="background: red;"></my-host>
+<my-host id="host3" style="background: green;">FAIL</my-host>
+<my-host id="host4" style="background: green;">FAIL</my-host>
<style>
-green-host, red-host {
+my-host {
display: block;
width: 100px;
- height: 50px;
+ height: 25px;
overflow: hidden;
+ font-size: 30px;
}
</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';
-
+function forceLayout() {
if (window.internals)
internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
else
- document.querySelector('span').getBoundingClientRect();
+ document.querySelector('p').getBoundingClientRect();
+}
+
+try {
+ var host1 = document.getElementById('host1');
+ host1.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
+
+ var host2 = document.getElementById('host2');
+ host2.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>FAIL';
+
+ var host3 = document.getElementById('host3');
+ host3.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
- greenHost.removeChild(greenHost.firstChild);
+ var host4 = document.getElementById('host4');
+ host4.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';
+
+ forceLayout();
+
+ host1.removeChild(host1.firstChild);
+
+ forceLayout();
var greenChild = document.createElement('div');
greenChild.style.width = '100%';
greenChild.style.height = '100%';
greenChild.style.backgroundColor = 'green';
- redHost.appendChild(greenChild);
+ host2.appendChild(greenChild);
+
+ forceLayout();
+
+ host3.removeChild(host3.firstChild);
+
+ forceLayout();
+
+ host4.insertBefore(document.createTextNode('________'), host4.firstChild);
} catch (exception) {
document.body.appendChild(document.createTextNode(exception));
</style>
<script>
+function forceLayout() {
+ if (window.internals)
+ internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
+ else
+ document.querySelector('p').getBoundingClientRect();
+}
+
try {
var shadow1 = document.getElementById('host1').attachShadow({mode: 'open'});
shadow1.innerHTML = '<slot></slot>';
var shadow4 = document.getElementById('host4').attachShadow({mode: 'open'});
shadow4.innerHTML = 'FAIL';
- if (window.internals)
- internals.updateLayoutIgnorePendingStylesheetsAndRunPostLayoutTasks();
- else
- document.querySelector('p').getBoundingClientRect();
+ forceLayout();
shadow1.removeChild(shadow1.firstChild);
+ forceLayout();
+
shadow2.firstChild.name = 'bar';
+ forceLayout();
+
shadow3.firstChild.name = null;
+ forceLayout();
+
shadow4.insertBefore(document.createElement('slot'), shadow4.firstChild);
} catch (exception) {
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 ]
+2015-09-22 Ryosuke Niwa <rniwa@webkit.org>
+
+ invalidateSlotAssignments should trigger style recalc
+ https://bugs.webkit.org/show_bug.cgi?id=149447
+
+ Reviewed by Antti Koivisto.
+
+ Invalidate the render tree of a shadow host when a new child is inserted, an existing child is removed,
+ or slot attribute of a child is modified.
+
+ No new tests. Covered by existing tests added in r190101.
+
+ * dom/Element.cpp:
+ (WebCore::Element::childrenChanged): Call invalidateSlotAssignments or invalidateDefaultSlotAssignments
+ depending on the types of children being inserted or removed since text nodes can only be assigned into
+ a default slot.
+ * dom/ShadowRoot.cpp:
+ (WebCore::ShadowRoot::invalidateSlotAssignments):
+ (WebCore::ShadowRoot::invalidateDefaultSlotAssignments): Added.
+ * dom/ShadowRoot.h:
+ * dom/SlotAssignment.cpp:
+ (WebCore::SlotAssignment::invalidate): Reconstruct the render tree for the whole host. We can optimize
+ in the future by only invalidating active slot elements instead.
+ (WebCore::SlotAssignment::invalidateDefaultSlot): Added.
+ * dom/SlotAssignment.h:
+
2015-09-21 Chris Dumez <cdumez@apple.com>
time element should use HTMLTimeElement interface
if (auto* distributor = shadowRoot->distributor())
distributor->invalidateDistribution(this);
#if ENABLE(SHADOW_DOM)
- shadowRoot->invalidateSlotAssignments();
+ switch (change.type) {
+ case ElementInserted:
+ case ElementRemoved:
+ case AllChildrenRemoved:
+ shadowRoot->invalidateSlotAssignments();
+ break;
+ case TextInserted:
+ case TextRemoved:
+ case TextChanged:
+ shadowRoot->invalidateDefaultSlotAssignments();
+ break;
+ case NonContentsChildChanged:
+ break;
+ }
#endif
}
}
void ShadowRoot::invalidateSlotAssignments()
{
if (m_slotAssignments)
- m_slotAssignments->invalidate();
+ m_slotAssignments->invalidate(*this);
+}
+
+void ShadowRoot::invalidateDefaultSlotAssignments()
+{
+ if (m_slotAssignments)
+ m_slotAssignments->invalidateDefaultSlot(*this);
}
const Vector<Node*>* ShadowRoot::assignedNodesForSlot(const HTMLSlotElement& slot)
void removeSlotElementByName(const AtomicString&, HTMLSlotElement&);
void invalidateSlotAssignments();
+ void invalidateDefaultSlotAssignments();
const Vector<Node*>* assignedNodesForSlot(const HTMLSlotElement&);
#endif
return &slotInfo.assignedNodes;
}
+void SlotAssignment::invalidate(ShadowRoot& shadowRoot)
+{
+ // FIXME: We should be able to do a targeted reconstruction.
+ shadowRoot.host()->setNeedsStyleRecalc(ReconstructRenderTree);
+ m_slotAssignmentsIsValid = false;
+}
+
+void SlotAssignment::invalidateDefaultSlot(ShadowRoot& shadowRoot)
+{
+ auto it = m_slots.find(emptyAtom);
+ if (it != m_slots.end() && it->value->elementCount)
+ invalidate(shadowRoot); // FIXME: We should be able to reconstruct only under the default slot.
+}
+
HTMLSlotElement* SlotAssignment::findFirstSlotElement(SlotInfo& slotInfo, ShadowRoot& shadowRoot)
{
if (slotInfo.shouldResolveSlotElement())
const Vector<Node*>* assignedNodesForSlot(const HTMLSlotElement&, ShadowRoot&);
- void invalidate() { m_slotAssignmentsIsValid = false; }
+ void invalidate(ShadowRoot&);
+ void invalidateDefaultSlot(ShadowRoot&);
private:
struct SlotInfo {