Adding 3 new additional background-position tests which

Gérard Talbot · Gérard Talbot · commit ce34f7b8aa88 · 2015-03-26T23:43:54.000-04:00
use a 'width: auto' for the document root element in
vertical-rl writing-mode. These 3 tests will help
corner and identify a bug in some browsers.

'background-color: white' set on &lt;html&gt; element was
removed from all 20 background-position-* tests
because unneeded and already defined in uncommon
assumptions.
diff --git a/css-writing-modes-3/background-position-vlr-003.xht b/css-writing-modes-3/background-position-vlr-003.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left top;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vlr-005.xht b/css-writing-modes-3/background-position-vlr-005.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left bottom;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vlr-007.xht b/css-writing-modes-3/background-position-vlr-007.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right top;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vlr-009.xht b/css-writing-modes-3/background-position-vlr-009.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right bottom;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vlr-011.xht b/css-writing-modes-3/background-position-vlr-011.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left top;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vlr-013.xht b/css-writing-modes-3/background-position-vlr-013.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left bottom;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vlr-015.xht b/css-writing-modes-3/background-position-vlr-015.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right top;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vlr-017.xht b/css-writing-modes-3/background-position-vlr-017.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right bottom;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vrl-002.xht b/css-writing-modes-3/background-position-vrl-002.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left top;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vrl-004.xht b/css-writing-modes-3/background-position-vrl-004.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left bottom;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vrl-006.xht b/css-writing-modes-3/background-position-vrl-006.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right top;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vrl-008.xht b/css-writing-modes-3/background-position-vrl-008.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right bottom;
       background-repeat: repeat-x;
diff --git a/css-writing-modes-3/background-position-vrl-010.xht b/css-writing-modes-3/background-position-vrl-010.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left top;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vrl-012.xht b/css-writing-modes-3/background-position-vrl-012.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: left bottom;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vrl-014.xht b/css-writing-modes-3/background-position-vrl-014.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right top;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vrl-016.xht b/css-writing-modes-3/background-position-vrl-016.xht
@@ -15,7 +15,6 @@
   <style type="text/css"><![CDATA[
   html
     {
-      background-color: white;
       background-image: url("support/cat.png");
       background-position: right bottom;
       background-repeat: repeat-y;
diff --git a/css-writing-modes-3/background-position-vrl-018-ref.xht b/css-writing-modes-3/background-position-vrl-018-ref.xht
@@ -0,0 +1,44 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Reftest Reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+
+  <meta content="image" name="flags" />
+
+  <style type="text/css"><![CDATA[
+  div#expected
+    {
+      text-align: right;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      top: 0px;
+      width: 100px;
+    }
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div id="expected"><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/css-writing-modes-3/background-position-vrl-018.xht b/css-writing-modes-3/background-position-vrl-018.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left top' and 'vertical-rl' when document root element does not fill viewport width</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="background-position-vrl-018-ref.xht" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left top' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/100x100-red.png");
+      background-position: left top;
+      background-repeat: repeat-y;
+      width: auto; /* Very important: we intentionally want the
+      document root element to not fill the viewport width */
+      writing-mode: vertical-rl;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      /*
+        8px : body's margin-right
+    +
+      357px : pass-cdts-background-position.png's image width
+    +
+        8px : body's margin-left
+    -
+      100px : background-image width (100x100-red.png)
+    ==========
+      273px is
+      */
+      top: 0px;
+      width: 100px;
+    }
+
+    /*
+    This test requires a viewport width of at least (strict minimum) of 473px !
+    */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/css-writing-modes-3/background-position-vrl-020.xht b/css-writing-modes-3/background-position-vrl-020.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left center' and 'vertical-rl' when document root element does not fill viewport width</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="background-position-vrl-018-ref.xht" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left center' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/100x100-red.png");
+      background-position: left center;
+      background-repeat: repeat-y;
+      width: auto; /* Very important: we intentionally want the
+      document root element to not fill the viewport width */
+      writing-mode: vertical-rl;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      /*
+        8px : body's margin-right
+    +
+      357px : pass-cdts-background-position.png's image width
+    +
+        8px : body's margin-left
+    -
+      100px : background-image width (100x100-red.png)
+    ==========
+      273px is
+      */
+      top: 0px;
+      width: 100px;
+    }
+
+    /*
+    This test requires a viewport width of at least (strict minimum) of 473px !
+    */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/css-writing-modes-3/background-position-vrl-022.xht b/css-writing-modes-3/background-position-vrl-022.xht
@@ -0,0 +1,67 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+ <head>
+
+  <title>CSS Writing Modes Test: 'background-position: left bottom' and 'vertical-rl' when document root element does not fill viewport width</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
+  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings" />
+  <link rel="match" href="background-position-vrl-018-ref.xht" />
+
+  <meta content="image interact" name="flags" />
+  <meta content="This test checks that 'background-position: left bottom' will make background-image start at left side of document root element (even in case there is resizing of the window) because background properties should not be affected by vertical writing-mode." name="assert" />
+
+  <style type="text/css"><![CDATA[
+  html
+    {
+      background-image: url("support/100x100-red.png");
+      background-position: left bottom;
+      background-repeat: repeat-y;
+      width: auto; /* Very important: we intentionally want the
+      document root element to not fill the viewport width */
+      writing-mode: vertical-rl;
+    }
+
+  div#reference-overlapping-green
+    {
+      background-color: green;
+      height: 100%;
+      position: absolute;
+      right: 273px;
+      /*
+        8px : body's margin-right
+    +
+      357px : pass-cdts-background-position.png's image width
+    +
+        8px : body's margin-left
+    -
+      100px : background-image width (100x100-red.png)
+    ==========
+      273px is
+      */
+      top: 0px;
+      width: 100px;
+    }
+
+    /*
+    This test requires a viewport width of at least (strict minimum) of 473px !
+    */
+  ]]></style>
+ </head>
+
+ <body>
+
+  <div><img src="support/pass-cdts-bg-pos-vrl-018.png" width="357" height="17" alt="Image download support must be enabled" /></div>
+
+<!--
+  The image says:
+
+  Test passes if there is a <strong>no red</strong>.
+-->
+
+  <div id="reference-overlapping-green"></div>
+
+ </body>
+</html>
diff --git a/css-writing-modes-3/support/pass-cdts-bg-pos-vrl-018.png b/css-writing-modes-3/support/pass-cdts-bg-pos-vrl-018.png

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,6 @@`
`15`	`15`	`<style type="text/css"><![CDATA[`
`16`	`16`	`html`
`17`	`17`	`{`
`18`		`- background-color: white;`
`19`	`18`	`background-image: url("support/cat.png");`
`20`	`19`	`background-position: left top;`
`21`	`20`	`background-repeat: repeat-x;`