Add tests for JS APIs affected by zoom

For more information see https://docs.google.com/document/d/1AcnDShjT-kEuRaMchZPm5uaIgNZ4OiYtM4JI9qiV8Po/edit Change-Id: I9c9d81b413f93523079222a563fd7c69b0289b32 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5190711 Commit-Queue: Yotam Hacohen <[email protected]> Reviewed-by: Chris Harrelson <[email protected]> Cr-Commit-Position: refs/heads/main@{#1246549}
web-platform-tests · Jan 12, 2024 · b22db43 · b22db43
1 parent a09d86d
commit b22db43
Show file tree

Hide file tree

Showing 5 changed files with 287 additions and 2 deletions.
diff --git a/css/cssom-view/client-props-zoom.html b/css/cssom-view/client-props-zoom.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>Client properties for elements with css zoom</title>
+<link rel="author" title="Yotam Hacohen" href="mailto:[email protected]">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">"
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+  <head>
+    <style>
+      div {
+        width: 64px;
+        height: 64px;
+        background-color: blue
+      }
+      div.x4_zoom {
+        zoom: 4.0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="no_zoom"></div>
+    <div class="x4_zoom" id="element_with_zoom"></div>
+
+    <div class="x4_zoom">
+      <div id="direct_child_of_element_with_zoom"></div>
+      <div>
+        <div id="indirect_child_of_element_with_zoom"></div>
+      </div>
+      <div class="x4_zoom", id="both_child_and_parent_has_zoom"></div>
+    </div>
+
+
+    <script>
+      setup(() => {
+        window.noZoom = document.getElementById("no_zoom");
+      });
+      function compareObjectToDivWithNoZoom(object){
+        assert_equals(object.clientTop, noZoom.clientTop, 'clientTop');
+        assert_equals(object.clientLeft, noZoom.clientLeft, 'clientLeft');
+        assert_equals(object.clientWidth, noZoom.clientWidth, 'clientWidth');
+        assert_equals(object.clientHeight ,noZoom.clientHeight, 'clientHeight');
+      }
+      test(function() {
+        assert_true(!!noZoom, "no zoom target exists");
+      });
+      test(function() {
+        compareObjectToDivWithNoZoom(document.getElementById("element_with_zoom"));
+        compareObjectToDivWithNoZoom(document.getElementById("direct_child_of_element_with_zoom"));
+        compareObjectToDivWithNoZoom(document.getElementById("indirect_child_of_element_with_zoom"));
+        compareObjectToDivWithNoZoom(document.getElementById("both_child_and_parent_has_zoom"));
+      });
+    </script>
+  </body>
diff --git a/css/cssom-view/getBoundingClientRect-zoom.html b/css/cssom-view/getBoundingClientRect-zoom.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<title>getBoundingClientRect for elements with css zoom</title>
+<link rel="author" title="Yotam Hacohen" href="mailto:[email protected]">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+  <head>
+    <style>
+      div {
+        width: 64px;
+        height: 64px;
+        background-color: blue
+      }
+      div.x4_zoom {
+        zoom: 4.0;
+        background-color: blueviolet;
+      }
+      div.x2_zoom {
+        background-color: chartreuse;
+        zoom: 2.0;
+      }
+
+      div.transform {
+        transform: scale(2);
+        transform-origin: top left;
+      }
+
+
+    </style>
+  </head>
+  <body>
+    <div id="no_zoom"></div>
+    <div class="x4_zoom" id="with_zoom">
+    </div>
+    <div class="x2_zoom">
+      <div class="x4_zoom" id="nested_zoom"></div>
+    </div>
+    <div id="transform_and_zoom" class="x4_zoom transform"></div>
+    <script>
+      setup(() => {
+        window.noZoom = document.getElementById("no_zoom");
+        window.withZoom = document.getElementById("with_zoom");
+        window.nestedZoom = document.getElementById("nested_zoom");
+        window.transformAndZoom = document.getElementById("transform_and_zoom");
+      });
+      test(function() {
+        assert_true(!!noZoom, "no zoom target exists");
+        assert_true(!!withZoom, "zoom target exists");
+      });
+      test(function() {
+        let noZoomRect = noZoom.getBoundingClientRect();
+        assert_equals(noZoomRect.left, 8, 'no zoom left');
+        assert_equals(noZoomRect.top, 8, 'no zoom top');
+        assert_equals(noZoomRect.width, 64, 'no zoom width');
+        assert_equals(noZoomRect.height, 64, 'no zoom height');
+      });
+      test(function() {
+        let ZoomRect = withZoom.getBoundingClientRect();
+        assert_equals(ZoomRect.left, 8, 'x4 zoom left');
+        assert_equals(ZoomRect.top, 8 + 64, 'x4 zoom top');
+        assert_equals(ZoomRect.width, 256, 'x4 zoom width');
+        assert_equals(ZoomRect.height, 256, 'x4 zoom height');
+      });
+      test(function() {
+        let nestedZoomRect = nestedZoom.getBoundingClientRect();
+        assert_equals(nestedZoomRect.left, 8, 'nested zoom left');
+        assert_equals(nestedZoomRect.top, 8 + 64 + 256, 'nested zoom top');
+        assert_equals(nestedZoomRect.width, 512, 'nested zoom width');
+        assert_equals(nestedZoomRect.height, 512, 'nested zoom height');
+      });
+      test(function() {
+        let transformAndZoomRect = transformAndZoom.getBoundingClientRect();
+        assert_equals(transformAndZoomRect.left, 8, 'transform and zoom left');
+        assert_equals(transformAndZoomRect.top, 8 + 64 + 256 + 128, 'transform and zoom top');
+        assert_equals(transformAndZoomRect.width, 512, 'transform and zoom width');
+        assert_equals(transformAndZoomRect.height, 512, 'transform and zoom height');
+      });
+    </script>
+  </body>
+`
diff --git a/css/cssom-view/getClientRects-zoom.html b/css/cssom-view/getClientRects-zoom.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<title>getBoundingClientRect for elements with css zoom</title>
+<link rel="author" title="Yotam Hacohen" href="mailto:[email protected]">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-viewport/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+  <head>
+    <style>
+      div {
+        width: 64px;
+        height: 64px;
+        background-color: blue
+      }
+      div.x4_zoom {
+        zoom: 4.0;
+        background-color: blueviolet;
+      }
+      div.x2_zoom {
+        background-color: chartreuse;
+        zoom: 2.0;
+      }
+
+      div.transform {
+        transform: scale(2);
+        transform-origin: top left;
+      }
+
+
+    </style>
+  </head>
+  <body>
+    <div id="no_zoom"></div>
+    <div class="x4_zoom" id="with_zoom">
+    </div>
+    <div class="x2_zoom">
+      <div class="x4_zoom" id="nested_zoom"></div>
+    </div>
+    <div id="transform_and_zoom" class="x4_zoom transform"></div>
+    <script>
+      setup(() => {
+        window.noZoom = document.getElementById("no_zoom");
+        window.withZoom = document.getElementById("with_zoom");
+        window.nestedZoom = document.getElementById("nested_zoom");
+        window.transformAndZoom = document.getElementById("transform_and_zoom");
+      });
+      test(function() {
+        assert_true(!!noZoom, "no zoom target exists");
+        assert_true(!!withZoom, "zoom target exists");
+      });
+      test(function() {
+        let noZoomRect = noZoom.getClientRects()[0];
+        assert_equals(noZoomRect.left, 8, 'no zoom left');
+        assert_equals(noZoomRect.top, 8, 'no zoom top');
+        assert_equals(noZoomRect.width, 64, 'no zoom width');
+        assert_equals(noZoomRect.height, 64, 'no zoom height');
+      });
+      test(function() {
+        let ZoomRect = withZoom.getClientRects()[0];
+        assert_equals(ZoomRect.left, 8, 'x4 zoom left');
+        assert_equals(ZoomRect.top, 8 + 64, 'x4 zoom top');
+        assert_equals(ZoomRect.width, 256, 'x4 zoom width');
+        assert_equals(ZoomRect.height, 256, 'x4 zoom height');
+      });
+      test(function() {
+        let nestedZoomRect = nestedZoom.getClientRects()[0];
+        assert_equals(nestedZoomRect.left, 8, 'nested zoom left');
+        assert_equals(nestedZoomRect.top, 8 + 64 + 256, 'nested zoom top');
+        assert_equals(nestedZoomRect.width, 512, 'nested zoom width');
+        assert_equals(nestedZoomRect.height, 512, 'nested zoom height');
+      });
+      test(function() {
+        let transformAndZoomRect = transformAndZoom.getClientRects()[0];
+        assert_equals(transformAndZoomRect.left, 8, 'transform and zoom left');
+        assert_equals(transformAndZoomRect.top, 8 + 64 + 256 + 128, 'transform and zoom top');
+        assert_equals(transformAndZoomRect.width, 512, 'transform and zoom width');
+        assert_equals(transformAndZoomRect.height, 512, 'transform and zoom height');
+      });
+    </script>
+  </body>
+`
diff --git a/css/cssom-view/offsetTop-offsetLeft-with-zoom.html b/css/cssom-view/offsetTop-offsetLeft-with-zoom.html
@@ -60,14 +60,14 @@
   <div id="zoomed_three" class="square three"></div>
 </div>
 
-<div class = outer_div style="margin: 30px;">
+<div class ="outer_div" style="margin: 30px;" id="outer_div">
     <div id="zoomed_middle" style="margin: 10px; zoom:2">
         <div class="square" id="unzoomed_inner"></div>
     </div>
 </div>
 <div class = outer_div style="margin: 30px;">
     <div id="unzoomed_middle">
-        <div class="square" id="zoomed_inner" style="zoom:2"></div>
+        <div class="square" id="zoomed_inner" style="zoom:2; width: 100px; height: 100px; border: 1px solid black;"></div>
     </div>
 </div>
 
@@ -91,5 +91,11 @@
   assert_equals(zoomed_inner.offsetTop, 0, 'zoomed_inner.offsetTop');
   assert_equals(zoomed_inner.offsetLeft, 1, 'zoomed_inner.offsetLeft');
 
+  // check that offset is equal between elements when one of them has css zoom
+  assert_equals(unzoomed_one.offsetWidth, zoomed_one.offsetWidth, "offsetWidth");
+  assert_equals(unzoomed_one.offsetHeight, zoomed_one.offsetHeight, "offsetHeight");
+  assert_equals(zoomed_inner.offsetWidth, outer_div.offsetWidth, "offsetWidth for nested element");
+  assert_equals(zoomed_inner.offsetHeight, outer_div.offsetHeight, "offsetHeight for nested element");
+
 }, 'Verifies that offsetTop and offsetLeft find the right OffsetParent and return values excluding the target zoom');
 </script>
diff --git a/css/cssom-view/scroll-zoom.html b/css/cssom-view/scroll-zoom.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<title>scroll properties for elements with css zoom</title>
+<link rel="author" title="Yotam Hacohen" href="mailto:[email protected]">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scroll">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+  <head>
+    <style>
+      .container {
+        height: 100px;
+        width: 100px;
+        overflow: scroll;
+      }
+      .content {
+        height: 250px;
+        width: 250px;
+        background-image: linear-gradient(red, yellow);
+      }
+      #x4_zoom_container {
+        zoom: 4;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container" id="no_zoom_container">
+      <div class="content"></div>
+    </div>
+    <div class="container" id="x4_zoom_container">
+      <div class="content"></div>
+    </div>
+    <div class="container" id="container_with_zoomed_content">
+      <div class="content" style="zoom: 2;"></div>
+    </div>
+    <div style="zoom: 2;">
+      <div class="container" id="scroller_in_zoomed_element">
+        <div class="content"></div>
+      </div>
+    </div>
+    <script>
+        setup(() => {
+          window.noZoom = document.getElementById("no_zoom_container");
+          window.withZoom = document.getElementById("x4_zoom_container");
+          window.scrollerWithZoomContent = document.getElementById("container_with_zoomed_content");
+          window.scrollerInZoomedElement = document.getElementById("scroller_in_zoomed_element");
+        });
+        test(function() {
+          assert_true(!!noZoom, "no zoom target exists");
+          assert_true(!!withZoom, "zoom target exists");
+        });
+        test(function() {
+            // We remove zoom effects for scroll height and scroll width so values
+            // should be same for elements with and without zoom
+            // However scroll values should be changed by zoom on content
+          assert_equals(noZoom.scrollHeight, withZoom.scrollHeight, 'scrollHeight');
+          assert_equals(noZoom.scrollWidth, withZoom.scrollWidth, 'scrollWidth');
+          assert_equals(noZoom.scrollHeight*2, scrollerWithZoomContent.scrollHeight, 'scroll height for zoomed content');
+          assert_equals(noZoom.scrollWidth*2, scrollerWithZoomContent.scrollWidth, 'scroll width for zoomed content');
+          assert_equals(noZoom.scrollHeight, scrollerInZoomedElement.scrollHeight, 'scroll height for scroller in zoomed element');
+          assert_equals(noZoom.scrollWidth, scrollerInZoomedElement.scrollWidth, 'scroll width for scroller in zoomed element');
+        });
+      </script>
+  </body>