Update backgrounds on transformed root element tests

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)

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;

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);

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 */

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 {

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);