Re: [csswg-drafts] [resize-observer] Cross-document observing (#3703)

Thanks Simon:) I'd like to share some specific scenarios we discussed. 

1. Frame tree changed in js callback. It's not safe to deliver RO in a frame, since it might be deleted while invoke js callbacks.

frameset.html

```
<frameset rows="50%, 50%">
    <frame id="frame1" src="./frame1.html"></frame>
    <frame id="frame2" src="./frame2.html"></frame>
</frameset>
```

frame1.html

```
frame1
```

frame2.html

```
<script type="text/javascript">
function test0() {
    let ro = new ResizeObserver(entries => {
        for (let entry of entries) {
            if (entry.target.parentNode) {
                entry.target.parentNode.removeChild(entry.target);
            }
        }
    });
    let frame1 = parent.document.querySelector('#frame1');
    let frame2 = parent.document.querySelector('#frame2');
    ro.observe(frame1);
    ro.observe(frame2);
}
test0();

</script>
```

2. The observed target moved to a new document.

frameset.html

```
<frameset rows="50%, 50%">
    <frame id="frame1" src="./frame1.html"></frame>
    <frame id="frame2" src="./frame2.html"></frame>
</frameset>

```

frame1.html

```
<div id="target1">t1</div>
```

frame2.html

```
<div id="target2">t2</target>
<script>
var ro = new ResizeObserver( entries => {
    for (let entry of entries) {
        let target1 = parent.frames[0].document.querySelector('#target1');
        entry.target.parentElement.removeChild(entry.target);
        target1.parentElement.appendChild(entry.target);
    }
});

ro.observe(document.querySelector('#target2'));
</script>
```


3. All targets of ResizeObserver are from other document. RO should be fired even its document is layout clean.

frameset.html

```
<frameset rows="50%, 50%">
    <frame id="frame1" src="./frame1.html"></frame>
    <frame id="frame2" src="./frame2.html"></frame>
</frameset>
```

frame1.html

```
<div id="target1">t1</div>
```

frame2.html

```
<script>
var ro = new ResizeObserver( entries => {
    for (let entry of entries) {
        console.log("Observe targets from other document.");
    }
});

let target1 = parent.frames[0].document.querySelector('#target1');
ro.observe(target1);
</script>
```

4. The depth of target: Calculate the depth of target in frame tree not just current frame.

```
<div style="width:100px;height:100px;">t1
    <div id="target" style="width:100px;height:100px;">t2
        <iframe id="iframe" src="./frame1.html" onload="depth()"></iframe>
    </div>
</div>

<script>
function depth() {
    let target = document.querySelector('#target');
    let target1 = document.querySelector('#iframe').contentDocument.querySelector('#target1');

    var ro = new ResizeObserver( entries => {
        for (let entry of entries) {
            if (entry.target == target) {
                target1.style.width = "200px";
                console.log("There should no error event. target1 is deeper than target.");
            }
        }
    });
    ro.observe(target);
    ro.observe(target1);
}
</script>
```

frame1.html

```
<div id="target1"></div>
```

-- 
GitHub Notification of comment by cathiechen
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3703#issuecomment-477589834 using your GitHub account

Received on Thursday, 28 March 2019 13:15:42 UTC