Revision 7ab96ca42be6ce12b7bf98088d5d154f8f15be59 authored by Morten Stenshorne on 05 April 2018, 06:52:57 UTC, committed by Chromium WPT Sync on 05 April 2018, 06:52:57 UTC
When changing a layout object from in-flow to out-of-flow positioned, we used to just remove it from the flow thread, risking that there'd no longer be a column set to associate it with. However, an out-of-flow positioned descendant may be contained by something that's inside the flow thread, e.g. if the containing block of an absolutely positioned object is a relatively positioned object, and that relatively positioned object is contained by the flow thread. Since it's hard to detect what the new containing block of an object is going to be before it has actually gone out of flow, we'll still remove it from the flow thread, but we'll now detect that we need to re-insert it when computed style has updated. Bug: 827424 Change-Id: I413348b0d3ecd0c4b5051e6e9d2a4526863bef60 Reviewed-on: https://chromium-review.googlesource.com/995439 Reviewed-by: Emil A Eklund <eae@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#548354}
1 parent 54f844c
connected-callbacks.html
<!DOCTYPE html>
<html>
<head>
<title>Custom Elements: connectedCallback</title>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<meta name="assert" content="connectedCallback must be enqueued whenever custom element is inserted into a document">
<link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#dfn-connected-callback">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
</head>
<body>
<div id="log"></div>
<script>
var calls = [];
class MyCustomElement extends HTMLElement {
connectedCallback() { calls.push('connected', this); }
disconnectedCallback() { calls.push('disconnected', this); }
}
customElements.define('my-custom-element', MyCustomElement);
document_types().forEach(function (entry) {
var documentName = entry.name;
var getDocument = entry.create;
promise_test(function () {
return getDocument().then(function (doc) {
var instance = document.createElement('my-custom-element');
calls = [];
doc.documentElement.appendChild(instance);
assert_array_equals(calls, ['connected', instance]);
});
}, 'Inserting a custom element into ' + documentName + ' must enqueue and invoke connectedCallback');
promise_test(function () {
return getDocument().then(function (doc) {
var instance = document.createElement('my-custom-element');
var parent = document.createElement('div');
parent.appendChild(instance);
calls = [];
doc.documentElement.appendChild(parent);
assert_array_equals(calls, ['connected', instance]);
});
}, 'Inserting an ancestor of custom element into ' + documentName + ' must enqueue and invoke connectedCallback');
promise_test(function () {
return getDocument().then(function (doc) {
var instance = document.createElement('my-custom-element');
var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
var shadowRoot = host.attachShadow({mode: 'closed'});
doc.documentElement.appendChild(host);
calls = [];
shadowRoot.appendChild(instance);
assert_array_equals(calls, ['connected', instance]);
});
}, 'Inserting a custom element into a shadow tree in ' + documentName + ' must enqueue and invoke connectedCallback');
promise_test(function () {
return getDocument().then(function (doc) {
var instance = document.createElement('my-custom-element');
var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
var shadowRoot = host.attachShadow({mode: 'closed'});
shadowRoot.appendChild(instance);
calls = [];
doc.documentElement.appendChild(host);
assert_array_equals(calls, ['connected', instance]);
});
}, 'Inserting the shadow host of a custom element into ' + documentName + ' must enqueue and invoke connectedCallback');
promise_test(function () {
return getDocument().then(function (doc) {
var instance = document.createElement('my-custom-element');
var host = doc.createElementNS('http://www.w3.org/1999/xhtml', 'div');
var shadowRoot = host.attachShadow({mode: 'closed'});
calls = [];
shadowRoot.appendChild(instance);
assert_array_equals(calls, []);
});
}, 'Inserting a custom element into a detached shadow tree that belongs to ' + documentName + ' must not enqueue and invoke connectedCallback');
});
</script>
</body>
</html>
![swh spinner](/static/img/swh-spinner.gif)
Computing file changes ...