Bug 1793897 [wpt PR 36306] - Update backgrounds on transformed root e…

…lement tests, a=testonly

Automatic update from web-platform-tests
Update backgrounds on transformed root element tests (#36306)

It was decided that transforms on the root element and on the canvas should not apply to the background-image.
See: w3c/csswg-drafts#6683 (comment)

Fixes web-platform-tests/interop#138
--

wpt-commits: 8c3d8900b04afb95d56ee1bee254d94657160f1b
wpt-pr: 36306

testing/web-platform/tests/css/css-transforms/transform-background-007.html

@@ -5,23 +5,10 @@
     <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
     <link rel="reviewer" title="Apple Inc." href="http://www.apple.com">
-    <meta name="assert" content='"If the root element is transformed, the
-    transformation applies to the entire canvas, including any background
-    specified for the root element. Since the background painting area for the
-    root element is the entire canvas, which is infinite, the transformation
-    might cause parts of the background that were originally off-screen to
-    appear. For example, if the root element&apos;s background were repeating
-    dots, and a transformation of &apos;scale(0.5)&apos; were specified on the
-    root element, the dots would shrink to half their size, but there will be
-    twice as many, so they still cover the whole viewport."  In this case, the
-    background is specified on the body but propagates to the root element.
-    The transform is on the root element, so it needs to affect the background.
-    The rotation 90 degrees clockwise means that most of the screen will be
-    filled with triangles that were originally above the top of the viewport;
-    the original top row of triangles will now be on the left.'>
+    <meta name="assert" content='"If the root element is transformed, the transformation should not apply to
+    any background specified for the root element.'>
     <meta name="flags" content="svg">
-    <link rel="match" href="transform-background-ref-2.html">
-    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4800">
+    <link rel="match" href="transform-root-bg-001-ref.html">
     <style>
       html {
         overflow: hidden;

testing/web-platform/tests/css/css-transforms/transform-background-008.html

@@ -10,8 +10,7 @@
     root element instead of being specified on the body and propagating to the
     root.'>
     <meta name="flags" content="svg">
-    <link rel="match" href="transform-background-ref-2.html">
-    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4800">
+    <link rel="match" href="transform-root-bg-001-ref.html">
     <style>
       html {
         background: url(support/transform-triangle-left.svg);

testing/web-platform/tests/css/css-transforms/transform-root-bg-001-ref.html

@@ -5,7 +5,7 @@
     <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
     <style>
       html {
-        background: url(support/transform-triangle-right.svg) top right;
+        background: url(support/transform-triangle-left.svg) top left;
       }
       body {
         /* The default 8px margin makes the background not line up exactly */

testing/web-platform/tests/css/css-transforms/transform-root-bg-001.html

@@ -5,15 +5,10 @@
     <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
     <meta name="assert" content="The background here extends to the whole
-    canvas, and a transform on the root element must transform the whole
-    canvas, background included.  Thus the entire tiled background of
-    left-pointing triangles needs to be rotated 180 degrees (same as scale(-1))
-    around the top center of the viewport, which is the default
-    transform-origin of 50% 50% in this case.  An implementation that doesn't
-    draw the background on parts of the canvas outside the viewport might
-    incorrectly display nothing, because the part of the background that's
-    supposed to be rotated into view was initially above the visible part of
-    the canvas.">
+    canvas, and a transform on the root element should not transform the
+    canvas background. Thus the entire tiled background of left-pointing triangles
+    should not be rotated. An implementation that doesn't draw the background
+    correctly may rotate the background, or incorrectly clip it.">
     <link rel="match" href="transform-root-bg-001-ref.html">
     <style>
       html {

testing/web-platform/tests/css/css-transforms/transform-root-bg-003.html

@@ -8,7 +8,7 @@
     transform-root-bg-001.html, except that it uses scale(0.5) instead of
     scale(-1).  It also specifies a transform-origin, because the default of
     50% 50% wouldn't work well with the way the reference image is constructed.">
-    <link rel="match" href="transform-root-bg-003-ref.html">
+    <link rel="match" href="transform-root-bg-001-ref.html">
     <style>
       html {
         background: url(support/transform-triangle-left.svg);

testing/web-platform/tests/css/css-transforms/transform-translate-background-001.html

@@ -6,10 +6,10 @@
 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=988446">
 <link rel="match" href="transform-translate-background-001-ref.html">
-<meta name="assert" content="Checks that the linear gradient is modified when you vertically translate the root element. The test passes if you see only green.">
+<meta name="assert" content="Checks that the linear gradient is not modified when you vertically translate the root element. The test passes if you see only green.">
 <style>
   html {
-    background: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
+    background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%);
     transform: translate(0, -250vh);
   }
 </style>

testing/web-platform/tests/css/css-transforms/transform-translate-background-002.html

@@ -6,11 +6,11 @@
 <link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=988446">
 <link rel="match" href="transform-translate-background-001-ref.html">
-<meta name="assert" content="Checks that the linear gradient is modified when you dynamically translate the root element. The test passes if you see only green.">
+<meta name="assert" content="Checks that the linear gradient is not modified when you dynamically translate the root element. The test passes if you see only green.">
 <script src="/common/reftest-wait.js"></script>
 <style>
   html {
-    background: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
+    background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%);
   }
 </style>
 <div style="height: 400vh;"></div>