Ignore min-x and min-y when computing view-box (so we return origin b…

…ox). Per web-platform-tests/interop#509, we update the coordinate to match the spec, i.e. When the viewBox includes non-zero min-x or min-y offsets, this origin box does not actually correspond to the visible region rectangle defined by the viewBox. https://drafts.csswg.org/css-box-3/#valdef-box-view-box Also simplify mask-clip-2.html and mask-origin-3.html so that their viewBox is anchored at the origin so it is the same as the origin box. Differential Revision: https://phabricator.services.mozilla.com/D190325 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1856471 gecko-commit: fd4d600a888470384134565a86e444f87cb93d69 gecko-reviewers: dholbert
rakuco · Oct 10, 2023 · 28cb182 · 28cb182
1 parent b3bc25e
commit 28cb182
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/css/css-masking/mask-image/mask-clip-2.html b/css/css-masking/mask-image/mask-clip-2.html
@@ -36,8 +36,8 @@
     </style>
   </head>
   <body>
-    <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
-      <rect class="view mask" x="110" y="110" width="50" height="100"/>
+    <svg width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="none" style="left: 10px;">
+      <rect class="view mask" x="10" y="10" width="50" height="100"/>
     </svg>
     <svg width="200" height="200" style="left: 220px;">
       <rect class="fill mask" x="50" y="50" width="150" height="150"/>

diff --git a/css/css-masking/mask-image/mask-origin-3.html b/css/css-masking/mask-image/mask-origin-3.html
@@ -39,8 +39,8 @@
     </style>
   </head>
   <body>
-    <svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
-      <rect class="view mask" x="125" y="125" width="100" height="100"/>
+    <svg width="200" height="200" viewBox="0 0 100 100" preserveAspectRatio="none" style="left: 10px;">
+      <rect class="view mask" x="25" y="25" width="100" height="100"/>
     </svg>
     <svg width="200" height="200" style="left: 240px;">
       <rect class="fill mask" x="50" y="50" width="80" height="80" stroke="green" stroke-width="20"/>