188279 2018-08-02 15:15:39 -0700 Range APIs do not construct / move trees in tree order (observable by custom elements) 2023-02-07 22:35:28 -0800 1 1 1 Unclassified WebKit DOM Safari 11 Unspecified Unspecified RESOLVED FIXED https://wpt.fyi/results/custom-elements/range-and-constructors.html?label=experimental&label=master&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2023-webcomponents InRadar P2 Normal --- 154907 1 bicknellr rniwa bicknellr cdumez fred.wang ntim rniwa webkit-bug-importer oldest_to_newest 1447398 0 346421 bicknellr 2018-08-02 15:15:39 -0700 Created attachment 346421 The test page mentioned in the bug. # Details of interop issue Chrome, Safari, and Firefox all appear to have the similar issues. Chrome and Safari sometimes show the same ordering; Firefox is different. None appears to follow the spec. # Steps to reproduce the problem: 1. Create a deep and wide tree of many custom elements with defined constructors, `connectedCallback`, and `disconnectedCallback`. 2. Create a range that such that the boundaries of the range are deep enough in the tree to cause many of the custom elements to be only partially contained within the range. 3. Call the range's `cloneContents` or `extractContents`. (Specific cases listed below.) # What went wrong? Nodes in the cloned / extracted fragment are not created or moved in tree order: 1. During `extractContents`, nodes that are partially contained in the range are cloned into the created fragment, rather than being moved out of the original range (as expected). However, the order in which the clones happen is now observably incorrect through the order in which the custom element constructors are called. To see this using the attached page: - Uncheck all checkboxes. - Click the "create source" button. - Check the "#n" and "NEW" checkboxes. - Click the "extract" button. You'll get a tree that looks like this: - [#2 NEW] - [#1 NEW] - [#0 NEW] START.....) - [] (root-0-0-2) - [] (root-0-1) - [] (root-0-1-0) - [] (root-0-1-1) - [] (root-0-1-2) - [] (root-1) - [#5 NEW] (root-2) - [] (root-2-0) - [] (root-2-0-0) - [] (root-2-0-1) - [] (root-2-0-2) - [#4 NEW] (root-2-1) - [] (root-2-1-0) - [#3 NEW] (root-2-1-1.....END In this tree, the constructors for the elements that were cloned as part of `extractContents` are not called in tree order. In the spec section about extracting a range [1], step 14 describes how the 'first partially contained child' of the nearest containing ancestor of a range is handled. Particularly, it explicitly clones the partially contained child first and extracts the range inside of it next. This is also true of step 17, describing how the 'last partially contained child' is handled. 2. During `extractContents`, the ordering of `disconnectedCallback` calls of custom elements which are moved (because they are fully contained) are not in tree order. Using the attached page: - Uncheck all checkboxes. - Click the "create source" button. - Check the "NEW" and "Dn" checkboxes. - Click the "extract" button. You'll get a tree that looks like this: - [NEW] - [NEW] - [NEW] START.....) - [, D0] (root-0-0-2) - [, D1] (root-0-1) - [, D2] (root-0-1-0) - [, D3] (root-0-1-1) - [, D4] (root-0-1-2) - [, D10] (root-1) - [NEW] (root-2) - [, D6] (root-2-0) - [, D7] (root-2-0-0) - [, D8] (root-2-0-1) - [, D9] (root-2-0-2) - [NEW] (root-2-1) - [, D5] (root-2-1-0) - [NEW] (root-2-1-1.....END (Sorry about the leading commas, they're not relevant.) Here, the logs show us that the custom elements were not removed from their original positions in the correct order: the flattened segment "D10, NEW, D6, D7, D8, D9, NEW, D5" should be "D5, NEW, D6, D7, D8, D9, NEW, D10". 3. During `cloneContents`, the newly created tree is not constructed in tree order. Using the attached page: - Check only the "#n" checkbox. - Click the "create source" button. - Click the "clone" button. You'll get a tree that looks like this: - [#23] - [#21] - [#20] START.....) - [#22] (root-0-0-2) - [#24] (root-0-1) - [#25] (root-0-1-0) - [#26] (root-0-1-1) - [#27] (root-0-1-2) - [#36] (root-1) - [#31] (root-2) - [#32] (root-2-0) - [#33] (root-2-0-0) - [#34] (root-2-0-1) - [#35] (root-2-0-2) - [#29] (root-2-1) - [#30] (root-2-1-0) - [#28] (root-2-1-1.....END All of the elements in the output tree are cloned. Like the steps for extracting a range [1], the steps for cloning a range [2] imply that the new tree should be constructed in tree order. So, the numbers in the new tree here should be in ascending order from top to bottom. [1]: https://dom.spec.whatwg.org/#concept-range-extract [2]: https://dom.spec.whatwg.org/#concept-range-clone # Any other comments? The attached file is meant to let you see the ordering of construction / the callbacks. It defines a custom element that displays a small log of when its constructor and callbacks are called. (In brackets, at the start of the element.) You can toggle which things are logged using the checkboxes at the top of the page. Each logged event increments a global and prints its value so you can see the relative order of all of the things you've enabled. - "#n" shows when the element's constructor is run. - "NEW" shows that the element was constructed during the `cloneContents` or `extractContents` call. - "Cn" shows when the element's `connectedCallback` is run. - "Dn" shows when the element's `disconnectedCallback` is run. ... where 'n' is the step at which the event happened. For example, an element with the log "[#10, C11, D42, C60]" means "constructed at step 10, connectedCallback at step 11, disconnectedCallback at step 42, connectedCallback at step 60" and "[#49 NEW, C71]" means "constructed at step 49 during the range operation, connectedCallback at step 71". Really, there are only two things to do to use the page: 1. Click the "create source" button to create the 'source' tree (the one in which the range's boundary points will be placed). A tree in a template will be copied into the blue dashed box (using innerHTML, rather than cloneNode, so that it's created by the parser). 2. Click either the "extract" or "clone" button to extract / clone a range between the two nodes with class "start" and "end" (inclusive). The fragment is then appended to the orange dashed box. The reason there's an explicit step for creating the source tree is so that you can change the stuff that's logged when the tree is created. The elements have some text in them (e.g. "(root-2-0-1)") to show their position in the source tree and also to make it more clear where the boundary points of the range are in that node. None of the CSS is actually relevant to the repro. 1447399 1 bicknellr 2018-08-02 15:18:36 -0700 Also, if you check the "#n" and "Cn" checkboxes and click "create source", you'll notice that all of the elements in the source tree were constructed before any of them are connected. I'll file a separate bug for this since it's not related to ranges. 1447403 2 bicknellr 2018-08-02 15:21:00 -0700 Possibly related: https://bugs.webkit.org/show_bug.cgi?id=160667 1447422 3 bicknellr 2018-08-02 15:51:31 -0700 Other bugs filed: https://bugs.chromium.org/p/chromium/issues/detail?id=870464 https://bugzilla.mozilla.org/show_bug.cgi?id=1480618 1447978 4 rniwa 2018-08-04 22:04:52 -0700 This is presumably also observable via mutation observers since disconnection of a node is typically caused by a removal of the node, which is observable via mutations observers. 1931585 5 rniwa 2023-02-06 18:12:08 -0800 Pull request: https://github.com/WebKit/WebKit/pull/9730 1931890 6 ews-feeder 2023-02-07 17:02:55 -0800 Committed 259987@main (fa5a06a66c96): <https://commits.webkit.org/259987@main> Reviewed commits have been landed. Closing PR #9730 and removing active labels. 1931891 7 webkit-bug-importer 2023-02-07 17:03:22 -0800 <rdar://problem/105154132> 346421 2018-08-02 15:15:39 -0700 2018-08-02 15:15:39 -0700 The test page mentioned in the bug. rangeOrdering.html text/html 5319 bicknellr PCFkb2N0eXBlIGh0bWw+Cgo8dGVtcGxhdGUgaWQ9Im9yaWdpbmFsIj4KICA8Yy1lPgogICAgKHJv b3QpCiAgICA8Yy1lPgogICAgICAocm9vdC0wKQogICAgICA8Yy1lPgogICAgICAgIChyb290LTAt MCkKICAgICAgICA8Yy1lPihyb290LTAtMC0wKTwvYy1lPgogICAgICAgIDxjLWU+KHJvb3QtMC0w LTEuLi4uLi48c3BhbiBjbGFzcz0ic3RhcnQiPjwvc3Bhbj4uLi4uLik8L2MtZT4KICAgICAgICA8 Yy1lPihyb290LTAtMC0yKTwvYy1lPgogICAgICA8L2MtZT4KICAgICAgPGMtZT4KICAgICAgICAo cm9vdC0wLTEpCiAgICAgICAgPGMtZT4ocm9vdC0wLTEtMCk8L2MtZT4KICAgICAgICA8Yy1lPihy b290LTAtMS0xKTwvYy1lPgogICAgICAgIDxjLWU+KHJvb3QtMC0xLTIpPC9jLWU+CiAgICAgIDwv Yy1lPgogICAgPC9jLWU+CiAgICA8Yy1lPihyb290LTEpPC9jLWU+CiAgICA8Yy1lPgogICAgICAo cm9vdC0yKQogICAgICA8Yy1lPgogICAgICAgIChyb290LTItMCkKICAgICAgICA8Yy1lPihyb290 LTItMC0wKTwvYy1lPgogICAgICAgIDxjLWU+KHJvb3QtMi0wLTEpPC9jLWU+CiAgICAgICAgPGMt ZT4ocm9vdC0yLTAtMik8L2MtZT4KICAgICAgPC9jLWU+CiAgICAgIDxjLWU+CiAgICAgICAgKHJv b3QtMi0xKQogICAgICAgIDxjLWU+KHJvb3QtMi0xLTApPC9jLWU+CiAgICAgICAgPGMtZT4ocm9v dC0yLTEtMS4uLi4uPHNwYW4gY2xhc3M9ImVuZCI+PC9zcGFuPi4uLi4pPC9jLWU+CiAgICAgICAg PGMtZT4ocm9vdC0yLTEtMik8L2MtZT4KICAgICAgPC9jLWU+CiAgICA8L2MtZT4KICA8L2MtZT4K PC90ZW1wbGF0ZT4KCjxoMT5DaG9vc2UgZXZlbnRzIHRvIGxvZzo8L2gxPgo8dGFibGU+CiAgPHRo ZWFkPgogICAgPHRyPgogICAgICA8dGQ+ZW5hYmxlPC90ZD4KICAgICAgPHRkIGNvbHNwYW49IjIi PmxlZ2VuZDwvdGQ+CiAgICA8L3RyPgogIDwvdGhlYWQ+CiAgPHRib2R5PgogICAgPHRyPgogICAg ICA8dGQ+PGlucHV0IHR5cGU9ImNoZWNrYm94IiBpZD0ibG9nQ29uc3RydWN0b3IiIGNoZWNrZWQ+ PC90ZD4KICAgICAgPHRkPiM8dmFyPm48L3Zhcj48L3RkPgogICAgICA8dGQ+Y29uc3RydWN0b3Ig Y2FsbGVkIGF0IHN0ZXAgPHZhcj5uPC92YXI+PC90ZD4KICAgIDwvdHI+CiAgICA8dHI+CiAgICAg IDx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIGlkPSJsb2dOZXciIGNoZWNrZWQ+PC90ZD4KICAg ICAgPHRkPk5FVzwvdGQ+CiAgICAgIDx0ZD5jcmVhdGVkIGR1cmluZyB0aGUgcmFuZ2Ugb3BlcmF0 aW9uPC90ZD4KICAgIDwvdHI+CiAgICA8dHI+CiAgICAgIDx0ZD48aW5wdXQgdHlwZT0iY2hlY2ti b3giIGlkPSJsb2dDb25uZWN0ZWQiPjwvdGQ+CiAgICAgIDx0ZD5DPHZhcj5uPC92YXI+PC90ZD4K ICAgICAgPHRkPjxjb2RlPmNvbm5lY3RlZENhbGxiYWNrPC9jb2RlPiBjYWxsZWQgYXQgc3RlcCA8 dmFyPm48L3Zhcj48L3RkPgogICAgPC90cj4KICAgIDx0cj4KICAgICAgPHRkPjxpbnB1dCB0eXBl PSJjaGVja2JveCIgaWQ9ImxvZ0Rpc2Nvbm5lY3RlZCI+PC90ZD4KICAgICAgPHRkPkQ8dmFyPm48 L3Zhcj48L3RkPgogICAgICA8dGQ+PGNvZGU+ZGlzY29ubmVjdGVkQ2FsbGJhY2s8L2NvZGU+IGNh bGxlZCBhdCBzdGVwIDx2YXI+bjwvdmFyPjwvdGQ+CiAgICA8L3RyPgogIDwvdGJvZHk+CjwvdGFi bGU+Cgo8aHI+Cgo8aDE+MS4gQ3JlYXRlIHRoZSBzb3VyY2UgdHJlZTo8L2gxPgo8YnV0dG9uIGlk PSJjcmVhdGVTb3VyY2VUcmVlIj5jcmVhdGUgc291cmNlPC9idXR0b24+Cgo8ZGl2IGlkPSJpbnB1 dCI+PC9kaXY+Cgo8aDE+Mi4gUGVyZm9ybSBhIHJhbmdlIG9wZXJhdGlvbjo8L2gxPgo8YnV0dG9u IGlkPSJleHRyYWN0IiBkaXNhYmxlZD5leHRyYWN0PC9idXR0b24+CjxidXR0b24gaWQ9ImNsb25l IiBkaXNhYmxlZD5jbG9uZTwvYnV0dG9uPgoKPGRpdiBpZD0ib3V0cHV0Ij48L2Rpdj4KCjxzY3Jp cHQ+CiJ1c2Ugc3RyaWN0IjsKCgovLyBBIGN1c3RvbSBlbGVtZW50IHRoYXQgbG9ncyBiYXNlZCBv biB0aGUgY2hlY2tib3hlcyBpbiB0aGlzIHBhZ2UuCgpsZXQgYW5ub3RhdGlvbiA9ICcnOwpsZXQg b3JkZXIgPSAwOwpjbGFzcyBDRSBleHRlbmRzIEhUTUxFbGVtZW50IHsKICBjb25zdHJ1Y3Rvcigp IHsKICAgIHN1cGVyKCk7CiAgICB0aGlzLmF0dGFjaFNoYWRvdyh7bW9kZTogJ29wZW4nfSkuaW5u ZXJIVE1MID0gYAogICAgICBbPHNwYW4gaWQ9ImxvZyI+PC9zcGFuPl0gPHNsb3Q+PC9zbG90Pgog ICAgYDsKICAgIGlmIChsb2dDb25zdHJ1Y3Rvci5jaGVja2VkKSB7CiAgICAgIHRoaXMuX2xvZyhg IyR7b3JkZXIrK31gKTsKICAgIH0KICAgIGlmIChsb2dOZXcuY2hlY2tlZCAmJiBhbm5vdGF0aW9u ICE9PSAnJykgewogICAgICB0aGlzLl9sb2coYCAke2Fubm90YXRpb259YCk7CiAgICB9CiAgfQoK ICBjb25uZWN0ZWRDYWxsYmFjaygpIHsKICAgIGlmIChsb2dDb25uZWN0ZWQuY2hlY2tlZCkgewog ICAgICB0aGlzLl9sb2coYCwgQyR7b3JkZXIrK31gKTsKICAgIH0KICB9CgogIGRpc2Nvbm5lY3Rl ZENhbGxiYWNrKCkgewogICAgaWYgKGxvZ0Rpc2Nvbm5lY3RlZC5jaGVja2VkKSB7CiAgICAgdGhp cy5fbG9nKGAsIEQke29yZGVyKyt9YCk7CiAgICB9CiAgfQoKICBfbG9nKHRleHQpIHsKICAgIHRo aXMuc2hhZG93Um9vdC5xdWVyeVNlbGVjdG9yKCcjbG9nJykuYXBwZW5kQ2hpbGQobmV3IFRleHQo dGV4dCkpOwogIH0KfQpjdXN0b21FbGVtZW50cy5kZWZpbmUoJ2MtZScsIENFKTsKCgovLyBjaGVj a2JveGVzCmNvbnN0IGxvZ0NvbnN0cnVjdG9yID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2xv Z0NvbnN0cnVjdG9yJyk7CmNvbnN0IGxvZ05ldyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCds b2dOZXcnKTsKY29uc3QgbG9nQ29ubmVjdGVkID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2xv Z0Nvbm5lY3RlZCcpOwpjb25zdCBsb2dEaXNjb25uZWN0ZWQgPSBkb2N1bWVudC5nZXRFbGVtZW50 QnlJZCgnbG9nRGlzY29ubmVjdGVkJyk7CgovLyBidXR0b25zCmNvbnN0IGNyZWF0ZVNvdXJjZVRy ZWVCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY3JlYXRlU291cmNlVHJlZScpOwpj b25zdCBleHRyYWN0QnV0dG9uID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2V4dHJhY3QnKTsK Y29uc3QgY2xvbmVCdXR0b24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY2xvbmUnKTsKCgpj cmVhdGVTb3VyY2VUcmVlQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewog IGNvbnN0IHRlbXBsYXRlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ29yaWdpbmFsJyk7CiAg Y29uc3QgaW5wdXQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnaW5wdXQnKTsKCiAgLy8gVXNl IGBpbm5lckhUTUxgIHNvIHRoYXQgdGhlc2UgZWxlbWVudHMgYXJlIGNyZWF0ZWQgYnkgdGhlIHBh cnNlci4KICBpbnB1dC5pbm5lckhUTUwgPSB0ZW1wbGF0ZS5pbm5lckhUTUw7CgogIC8vIERpc2Fi bGUgLyBlbmFibGUgY29udHJvbHMgZm9yIG5leHQgc3RlcC4KICBjcmVhdGVTb3VyY2VUcmVlQnV0 dG9uLmRpc2FibGVkID0gdHJ1ZTsKICBjbG9uZUJ1dHRvbi5kaXNhYmxlZCA9IGZhbHNlOwogIGV4 dHJhY3RCdXR0b24uZGlzYWJsZWQgPSBmYWxzZTsKfSk7CgoKZnVuY3Rpb24gZ2V0UmFuZ2UoKSB7 CiAgY29uc3QgcmFuZ2UgPSBuZXcgUmFuZ2UoKTsKICBjb25zdCBzdGFydCA9IGRvY3VtZW50LnF1 ZXJ5U2VsZWN0b3IoJyNpbnB1dCAuc3RhcnQnKTsKICBjb25zdCBlbmQgPSBkb2N1bWVudC5xdWVy eVNlbGVjdG9yKCcjaW5wdXQgLmVuZCcpOwogIHJhbmdlLnNldFN0YXJ0KHN0YXJ0LnBhcmVudE5v ZGUsIEFycmF5LmZyb20oc3RhcnQucGFyZW50Tm9kZS5jaGlsZE5vZGVzKS5pbmRleE9mKHN0YXJ0 KSk7CiAgcmFuZ2Uuc2V0RW5kKGVuZC5wYXJlbnROb2RlLCBBcnJheS5mcm9tKGVuZC5wYXJlbnRO b2RlLmNoaWxkTm9kZXMpLmluZGV4T2YoZW5kKSArIDEpOwogIHJldHVybiByYW5nZTsKfQoKCmNs b25lQnV0dG9uLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogIGFubm90YXRpb24g PSAnTkVXJzsKCiAgLy8gR2V0IHRoZSByYW5nZSwgY2xvbmUgaXQsIGFwcGVuZCB0aGUgcmVzdWx0 aW5nIGZyYWdtZW50IHRvIHRoZSBvdXRwdXQgZGl2LgogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlk KCdvdXRwdXQnKS5hcHBlbmRDaGlsZCgKICAgIGdldFJhbmdlKCkuY2xvbmVDb250ZW50cygpCiAg KTsKCiAgLy8gRGlzYWJsZSBjb250cm9scy4KICBjbG9uZUJ1dHRvbi5kaXNhYmxlZCA9IHRydWU7 CiAgZXh0cmFjdEJ1dHRvbi5kaXNhYmxlZCA9IHRydWU7Cn0pOwoKZXh0cmFjdEJ1dHRvbi5hZGRF dmVudExpc3RlbmVyKCdjbGljaycsICgpID0+IHsKICBhbm5vdGF0aW9uID0gJ05FVyc7CgogIC8v IEdldCB0aGUgcmFuZ2UsIGV4dHJhY3QgaXQsIGFwcGVuZCB0aGUgcmVzdWx0aW5nIGZyYWdtZW50 IHRvIHRoZSBvdXRwdXQgZGl2LgogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdvdXRwdXQnKS5h cHBlbmRDaGlsZCgKICAgIGdldFJhbmdlKCkuZXh0cmFjdENvbnRlbnRzKCkKICApOwoKICAvLyBE aXNhYmxlIGNvbnRyb2xzLgogIGNsb25lQnV0dG9uLmRpc2FibGVkID0gdHJ1ZTsKICBleHRyYWN0 QnV0dG9uLmRpc2FibGVkID0gdHJ1ZTsKfSk7Cjwvc2NyaXB0PgoKPHN0eWxlPgpib2R5IHsKICBm b250LWZhbWlseTogc2Fucy1zZXJpZjsKfQoKaDEgewogIGZvbnQtc2l6ZTogMXJlbTsKfQoKI2lu cHV0LCAjb3V0cHV0IHsKICBtYXJnaW46IDRweDsKICBib3JkZXItd2lkdGg6IDRweDsKICBib3Jk ZXItc3R5bGU6IGRhc2hlZDsKICBwYWRkaW5nOiA0cHg7Cn0KCiNpbnB1dCB7CiAgYm9yZGVyLWNv bG9yOiBibHVlOwp9Cgojb3V0cHV0IHsKICBib3JkZXItY29sb3I6IG9yYW5nZTsKfQoKYy1lIHsK ICBkaXNwbGF5OiBibG9jazsKICBtYXJnaW46IDJweDsKICBib3JkZXI6IDFweCBzb2xpZCBncmF5 OwogIHBhZGRpbmc6IDJweDsKfQoKYy1lIGMtZSB7CiAgbWFyZ2luLWxlZnQ6IDJjaDsKfQoKLnN0 YXJ0OjpiZWZvcmUgewogIGNvbnRlbnQ6ICdTVEFSVCc7CiAgYmFja2dyb3VuZC1jb2xvcjogIzBm MDsKfQoKLmVuZDo6YmVmb3JlIHsKICBjb250ZW50OiAnRU5EJzsKICBiYWNrZ3JvdW5kLWNvbG9y OiAjZjAwOwp9Cgp0YWJsZSB7CiAgYm9yZGVyLXNwYWNpbmc6IDBweDsKfQoKdGFibGUgdGQgewog IHBhZGRpbmc6IDJweDsKfQoKdGhlYWQgdGQgewogIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAj Y2NjOwp9Cgp0ZDpub3QoOmxhc3Qtb2YtdHlwZSkgewogIGJvcmRlci1yaWdodDogMXB4IHNvbGlk ICNjY2M7Cn0KPC9zdHlsZT4K