API tools faq
paste
Advertisement
whoisYeshua

CSS Zoom check

whoisYeshua
Sep 24th, 2024
325
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.79 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Check zoom</title>
  8.     <style>
  9.       .zoom2 {
  10.         zoom: 2;
  11.       }
  12.  
  13.       .child {
  14.         padding-top: 10px;
  15.         padding-left: 20px;
  16.       }
  17.       .grandchild {
  18.         width: 100px;
  19.         height: 100px;
  20.       }
  21.  
  22.       .transform2 {
  23.         transform: scale(2);
  24.         transform-origin: 0 0;
  25.       }
  26.  
  27.       #scrollerObject {
  28.         height: 30px;
  29.         width: 30px;
  30.         overflow: scroll;
  31.         zoom: 3;
  32.       }
  33.  
  34.       #content {
  35.         height: 100px;
  36.         width: 25px;
  37.         background-image: linear-gradient(red, yellow);
  38.       }
  39.     </style>
  40.     <script type="module">
  41.       function rectStr(rect) {
  42.         return `x=${rect.x} y=${rect.y} width=${rect.width} height=${rect.height}`
  43.       }
  44.       function println(str) {
  45.         output.innerText += str + '\n'
  46.       }
  47.  
  48.       function drawRect(rect, color) {
  49.         let div = document.createElement('div')
  50.         div.style =
  51.           `position:absolute; width: ${rect.width}px; height: ${rect.height}px; left: ${rect.x}px;` +
  52.           `top: ${rect.y}px; border: 1px solid ${color}`
  53.         document.body.appendChild(div)
  54.       }
  55.  
  56.       function printFields(obj) {
  57.         println(obj.id + '.getBoundingClientRect(): ' + rectStr(x2.getBoundingClientRect()))
  58.         println(obj.id + '.getClientRects(): ' + rectStr(x2.getClientRects()[0]))
  59.         println(obj.id + '.offsetWidth: ' + obj.offsetWidth)
  60.         println(obj.id + '.offsetHeight: ' + obj.offsetHeight)
  61.         println(obj.id + '.clientWidth: ' + obj.clientWidth)
  62.         println(obj.id + '.clientHeight: ' + obj.clientHeight)
  63.         println(obj.id + '.offsetTop: ' + obj.offsetTop)
  64.         println(obj.id + '.offsetLeft: ' + obj.offsetLeft)
  65.       }
  66.  
  67.       onload = () => {
  68.         printFields(x2)
  69.         println('')
  70.         printFields(x4)
  71.         drawRect(x2.getBoundingClientRect(), 'green')
  72.         drawRect(x4.getBoundingClientRect(), 'red')
  73.  
  74.         println('')
  75.         println('')
  76.         printFields(unzoomedChild)
  77.         println('')
  78.         printFields(unzoomedGrandchild)
  79.         drawRect(unzoomedChild.getBoundingClientRect(), 'green')
  80.         drawRect(unzoomedGrandchild.getBoundingClientRect(), 'red')
  81.  
  82.         println('')
  83.         println('')
  84.         printFields(x2t)
  85.         println('')
  86.         printFields(x4t)
  87.         drawRect(x2t.getBoundingClientRect(), 'green')
  88.         drawRect(x4t.getBoundingClientRect(), 'red')
  89.  
  90.         println('')
  91.         println('')
  92.         println('legend: green=bounding rectangle of x2; red=bonding rectangle of x4')
  93.  
  94.         println('')
  95.         println('')
  96.         println('Height of scrollbar is: ' + scrollerObject.scrollHeight)
  97.       }
  98.     </script>
  99.   </head>
  100.   <body>
  101.     <div>
  102.       <div class="child zoom2" id="x2">
  103.         x2: zoom=2
  104.         <div class="child grandchild zoom2" id="x4">x4: zoom=2 (nested)</div>
  105.       </div>
  106.     </div>
  107.     <div>
  108.       <div class="child" id="unzoomedChild">
  109.         unzoomedChild
  110.         <div class="child grandchild" id="unzoomedGrandchild">unzoomedGrandchild</div>
  111.       </div>
  112.     </div>
  113.  
  114.     <div style="height: 500px">
  115.       <div class="transform2 child" id="x2t">
  116.         x2t: scale(2)
  117.         <div class="transform2 child grandchild" id="x4t">x4t: scale(2) (nested)</div>
  118.       </div>
  119.     </div>
  120.  
  121.     <div id="scrollerObject">
  122.       <div id="content"></div>
  123.     </div>
  124.  
  125.     <div class="intersectionRect" id="intersectionNoZoom"></div>
  126.     <div class="intersectionRect" id="intersectionZoomx2" style="zoom: 2"></div>
  127.  
  128.     <hr />
  129.     Output:
  130.     <pre id="output"></pre>
  131.   </body>
  132. </html>
  133.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!