mirror of
				https://github.com/RGBCube/serenity
				synced 2025-10-31 14:42:44 +00:00 
			
		
		
		
	 036cd9b2dd
			
		
	
	
		036cd9b2dd
		
	
	
	
	
		
			
			When a node is removed from the DOM tree, its paintable needs to be removed to ensure that it is not used to obtain sizes that are no longer valid. This change enables the ResizeObserver to send a notification if a node is removed, as it should, because a removed node now has a size of zero It should be okay to nullify pointers without concerning parent/sibling/child relationships because the layout and paintable trees will be rebuilt following any DOM mutation anyway.
		
			
				
	
	
		
			46 lines
		
	
	
	
		
			1.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			46 lines
		
	
	
	
		
			1.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!DOCTYPE html>
 | |
| <head>
 | |
|     <style>
 | |
|         #box {
 | |
|             width: 200px;
 | |
|             height: 200px;
 | |
|             background-color: lightblue;
 | |
|         }
 | |
|     </style>
 | |
| </head>
 | |
| <body>
 | |
|     <div id="box"></div>
 | |
| </body>
 | |
| <script src="../include.js"></script>
 | |
| <script>
 | |
|     asyncTest(async done => {
 | |
|         const box = document.getElementById("box");
 | |
| 
 | |
|         let resolve = null;
 | |
|         function createResizeObserverPromise() {
 | |
|             return new Promise(r => {
 | |
|                 resolve = r;
 | |
|             });
 | |
|         }
 | |
| 
 | |
|         const resizeObserver = new ResizeObserver(entries => {
 | |
|             for (let entry of entries) {
 | |
|                 const { width, height } = entry.contentRect;
 | |
|                 println(`Size changed: ${width}px x ${height}px`);
 | |
|             }
 | |
| 
 | |
|             if (resolve) resolve();
 | |
|         });
 | |
| 
 | |
|         let observerCallbackInvocation = createResizeObserverPromise();
 | |
|         resizeObserver.observe(box);
 | |
|         await observerCallbackInvocation;
 | |
| 
 | |
|         box.remove();
 | |
| 
 | |
|         observerCallbackInvocation = createResizeObserverPromise();
 | |
|         await observerCallbackInvocation;
 | |
| 
 | |
|         done();
 | |
|     });
 | |
| </script>
 |