updating resize observer examples to use contentBoxSize

chrisdavidmills · chrisdavidmills · commit 0c9009d47b09 · 2019-08-29T11:23:18.000+01:00
diff --git a/resize-observer/resize-observer-border-radius.html b/resize-observer/resize-observer-border-radius.html
@@ -28,8 +28,8 @@
     <script>
       const resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
-          entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
-                                                          (entry.contentRect.height/10)) + 'px';
+          entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
+                                                          (entry.contentBoxSize.blockSize/10)) + 'px';
         }
       });
 
diff --git a/resize-observer/resize-observer-text.html b/resize-observer/resize-observer-text.html
@@ -46,8 +46,8 @@ <h1>So what happened?</h1>
 
         const resizeObserver = new ResizeObserver(entries => {
           for (let entry of entries) {
-            h1Elem.style.fontSize = Math.max(2, entry.contentRect.width/200) + 'rem';
-            pElem.style.fontSize = Math.max(1.2, entry.contentRect.width/600) + 'rem';
+            h1Elem.style.fontSize = Math.max(2, entry.contentBoxSize.inlineSize/200) + 'rem';
+            pElem.style.fontSize = Math.max(1.2, entry.contentBoxSize.inlineSize/600) + 'rem';
           }
         });
 

Original file line number	Diff line number	Diff line change
`@@ -46,8 +46,8 @@ <h1>So what happened?</h1>`
`46`	`46`
`47`	`47`	`const resizeObserver = new ResizeObserver(entries => {`
`48`	`48`	`for (let entry of entries) {`
`49`		`- h1Elem.style.fontSize = Math.max(2, entry.contentRect.width/200) + 'rem';`
`50`		`- pElem.style.fontSize = Math.max(1.2, entry.contentRect.width/600) + 'rem';`
	`49`	`+ h1Elem.style.fontSize = Math.max(2, entry.contentBoxSize.inlineSize/200) + 'rem';`
	`50`	`+ pElem.style.fontSize = Math.max(1.2, entry.contentBoxSize.inlineSize/600) + 'rem';`
`51`	`51`	`}`
`52`	`52`	`});`
`53`	`53`