Created
October 4, 2024 09:23
-
-
Save whoisYeshua/b821f0f0091a371803a754772a072a2f to your computer and use it in GitHub Desktop.
CSS Zoom Check
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Check zoom</title> | |
| <style> | |
| .zoom2 { | |
| zoom: 2; | |
| } | |
| .child { | |
| padding-top: 10px; | |
| padding-left: 20px; | |
| } | |
| .grandchild { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .transform2 { | |
| transform: scale(2); | |
| transform-origin: 0 0; | |
| } | |
| #scrollerObject { | |
| height: 30px; | |
| width: 30px; | |
| overflow: scroll; | |
| zoom: 3; | |
| } | |
| #content { | |
| height: 100px; | |
| width: 25px; | |
| background-image: linear-gradient(red, yellow); | |
| } | |
| </style> | |
| <script type="module"> | |
| function rectStr(rect) { | |
| return `x=${rect.x} y=${rect.y} width=${rect.width} height=${rect.height}` | |
| } | |
| function println(str) { | |
| output.innerText += str + '\n' | |
| } | |
| function drawRect(rect, color) { | |
| let div = document.createElement('div') | |
| div.style = | |
| `position:absolute; width: ${rect.width}px; height: ${rect.height}px; left: ${rect.x}px;` + | |
| `top: ${rect.y}px; border: 1px solid ${color}` | |
| document.body.appendChild(div) | |
| } | |
| function printFields(obj) { | |
| println(obj.id + '.getBoundingClientRect(): ' + rectStr(x2.getBoundingClientRect())) | |
| println(obj.id + '.getClientRects(): ' + rectStr(x2.getClientRects()[0])) | |
| println(obj.id + '.offsetWidth: ' + obj.offsetWidth) | |
| println(obj.id + '.offsetHeight: ' + obj.offsetHeight) | |
| println(obj.id + '.clientWidth: ' + obj.clientWidth) | |
| println(obj.id + '.clientHeight: ' + obj.clientHeight) | |
| println(obj.id + '.offsetTop: ' + obj.offsetTop) | |
| println(obj.id + '.offsetLeft: ' + obj.offsetLeft) | |
| } | |
| onload = () => { | |
| printFields(x2) | |
| println('') | |
| printFields(x4) | |
| drawRect(x2.getBoundingClientRect(), 'green') | |
| drawRect(x4.getBoundingClientRect(), 'red') | |
| println('') | |
| println('') | |
| printFields(unzoomedChild) | |
| println('') | |
| printFields(unzoomedGrandchild) | |
| drawRect(unzoomedChild.getBoundingClientRect(), 'green') | |
| drawRect(unzoomedGrandchild.getBoundingClientRect(), 'red') | |
| println('') | |
| println('') | |
| printFields(x2t) | |
| println('') | |
| printFields(x4t) | |
| drawRect(x2t.getBoundingClientRect(), 'green') | |
| drawRect(x4t.getBoundingClientRect(), 'red') | |
| println('') | |
| println('') | |
| println('legend: green=bounding rectangle of x2; red=bonding rectangle of x4') | |
| println('') | |
| println('') | |
| println('Height of scrollbar is: ' + scrollerObject.scrollHeight) | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div> | |
| <div class="child zoom2" id="x2"> | |
| x2: zoom=2 | |
| <div class="child grandchild zoom2" id="x4">x4: zoom=2 (nested)</div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="child" id="unzoomedChild"> | |
| unzoomedChild | |
| <div class="child grandchild" id="unzoomedGrandchild">unzoomedGrandchild</div> | |
| </div> | |
| </div> | |
| <div style="height: 500px"> | |
| <div class="transform2 child" id="x2t"> | |
| x2t: scale(2) | |
| <div class="transform2 child grandchild" id="x4t">x4t: scale(2) (nested)</div> | |
| </div> | |
| </div> | |
| <div id="scrollerObject"> | |
| <div id="content"></div> | |
| </div> | |
| <div class="intersectionRect" id="intersectionNoZoom"></div> | |
| <div class="intersectionRect" id="intersectionZoomx2" style="zoom: 2"></div> | |
| <hr /> | |
| Output: | |
| <pre id="output"></pre> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment