summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/ui3
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/w3c-css/submitted/ui3')
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001-ref.xht40
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht44
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002-ref.xht41
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht45
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003-ref.xht43
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht47
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004-ref.xht46
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004.xht50
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001-ref.xht41
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht45
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002-ref.xht42
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht46
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003-ref.xht43
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003.xht46
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001-ref.xht52
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht157
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002-ref.xht53
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.xht158
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003-ref.xht48
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht156
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/reftest-stylo.list16
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/reftest.list10
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-1.pngbin0 -> 957 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-10.pngbin0 -> 1775 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-11.pngbin0 -> 1357 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-12.pngbin0 -> 1744 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-13.pngbin0 -> 1357 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-14.pngbin0 -> 1018 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-15.pngbin0 -> 1025 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-16.pngbin0 -> 1018 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-17.pngbin0 -> 1026 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-18.pngbin0 -> 1073 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-19.pngbin0 -> 1074 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-2.pngbin0 -> 1175 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-3.pngbin0 -> 1144 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-4.pngbin0 -> 1018 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-5.pngbin0 -> 1026 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-6.pngbin0 -> 1175 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-7.pngbin0 -> 1276 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-8.pngbin0 -> 1018 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-9.pngbin0 -> 1025 bytes
-rw-r--r--layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max.pngbin0 -> 1083 bytes
42 files changed, 1269 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001-ref.xht
new file mode 100644
index 000000000..e886a0f05
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001-ref.xht
@@ -0,0 +1,40 @@
+<!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 Reference: Box Sizing - Border-Box with specified width</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ width: 140px;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.xht
new file mode 100644
index 000000000..3118bc40b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-001.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 Test: Box Sizing - Border-Box with specified width</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-border-box-001-ref.xht" />
+ <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ box-sizing: border-box;
+ width: 50%;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002-ref.xht
new file mode 100644
index 000000000..7c6bc218a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002-ref.xht
@@ -0,0 +1,41 @@
+<!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 Reference: Box Sizing - Border-Box with specified width</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ width: 120px;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ padding: 0px 10px;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht
new file mode 100644
index 000000000..c18147f7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-002.xht
@@ -0,0 +1,45 @@
+<!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 Test: Box Sizing - Border-Box with specified width</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-border-box-002-ref.xht" />
+ <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge." />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ box-sizing: border-box;
+ width: 50%;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ padding: 0px 10px;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003-ref.xht
new file mode 100644
index 000000000..c468c5b5b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003-ref.xht
@@ -0,0 +1,43 @@
+<!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 Reference: Box Sizing - Border-Box with specified width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ height: 400px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ width: 120px;
+ height: 340px;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ padding: 25px 10px;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht
new file mode 100644
index 000000000..b66b812e4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-003.xht
@@ -0,0 +1,47 @@
+<!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 Test: Box Sizing - Border-Box with specified width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-border-box-003-ref.xht" />
+ <meta name="assert" content="box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ height: 400px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ box-sizing: border-box;
+ width: 50%;
+ height: 100%;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ padding: 25px 10px;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004-ref.xht
new file mode 100644
index 000000000..a635acd13
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004-ref.xht
@@ -0,0 +1,46 @@
+<!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 Reference: Box Sizing - Border-Box with min/max width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <style type="text/css"><![CDATA[
+ .container {
+ min-width: 500px;
+ max-width: 700px;
+ min-height: 70px;
+ max-height: 90px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ min-width: 240px;
+ max-width: 340px;
+ min-height: 60px;
+ max-height: 80px;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004.xht
new file mode 100644
index 000000000..626988214
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-border-box-004.xht
@@ -0,0 +1,50 @@
+<!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 Test: Box Sizing - Border-Box with min/max width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-border-box-004-ref.xht" />
+ <meta name="assert" content="box-sizing: border-box should make the element's (length) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge." />
+ <style type="text/css"><![CDATA[
+ .container {
+ min-width: 500px;
+ max-width: 700px;
+ min-height: 70px;
+ max-height: 90px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ box-sizing: border-box;
+ min-width: 250px;
+ max-width: 350px;
+ min-height: 70px;
+ max-height: 90px;
+ z-index: 1;
+ float: left;
+ border: 5px solid black;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001-ref.xht
new file mode 100644
index 000000000..ca3ff0f7e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001-ref.xht
@@ -0,0 +1,41 @@
+<!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 Reference: Box Sizing - Content-Box with specified width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ height: 110px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ width: 150px;
+ height: 110px;
+ z-index: 1;
+ float: left;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht
new file mode 100644
index 000000000..8a0769239
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-001.xht
@@ -0,0 +1,45 @@
+<!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 Test: Box Sizing - Content-Box with specified width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-content-box-001-ref.xht" />
+ <meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ height: 110px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ box-sizing: content-box;
+ width: 50%;
+ height: 100%;
+ z-index: 1;
+ float: left;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002-ref.xht
new file mode 100644
index 000000000..b280e5769
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002-ref.xht
@@ -0,0 +1,42 @@
+<!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 Reference: Box Sizing - Content-Box with specified width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ height: 100px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ width: 140px;
+ height: 90px;
+ z-index: 1;
+ float: left;
+ padding: 5px 5px;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht
new file mode 100644
index 000000000..83853e6a7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-002.xht
@@ -0,0 +1,46 @@
+<!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 Test: Box Sizing - Content-Box with specified width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-content-box-002-ref.xht" />
+ <meta name="assert" content="box-sizing: content-box should make the element's (calc) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
+ <style type="text/css"><![CDATA[
+ .container {
+ width: 300px;
+ height: 100px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ box-sizing: content-box;
+ width: calc(50% - 10px);
+ height: calc(100% - 10px);
+ z-index: 1;
+ float: left;
+ padding: 5px 5px;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003-ref.xht
new file mode 100644
index 000000000..042b5628a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003-ref.xht
@@ -0,0 +1,43 @@
+<!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 Reference: Box Sizing - Content-Box with min/max width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <style type="text/css"><![CDATA[
+ .container {
+ min-width: 500px;
+ max-width: 700px;
+ height: 90px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ min-width: 250px;
+ max-width: 350px;
+ height: 100%;
+ z-index: 1;
+ float: left;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003.xht
new file mode 100644
index 000000000..a6cee3c4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-content-box-003.xht
@@ -0,0 +1,46 @@
+<!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 Test: Box Sizing - Content-Box with min/max width/height</title>
+ <link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com" />
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-content-box-003-ref.xht" />
+ <meta name="assert" content="box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge."/>
+ <style type="text/css"><![CDATA[
+ .container {
+ min-width: 500px;
+ max-width: 700px;
+ height: 90px;
+ border: 2px solid black;
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ background-color: red;
+ }
+
+ .box-sized {
+ box-sizing: content-box;
+ width: 50%;
+ height: 100%;
+ z-index: 1;
+ float: left;
+ }
+
+ #one {
+ background-color: green;
+ }
+
+ #two {
+ background-color: blue;
+ }
+ ]]></style>
+ </head>
+ <body>
+ The two divs should be side-by-side, not one on top of another. No red should be visible.
+ <br />
+ <div class="container">
+ <div class="box-sized" id="one">LEFT HALF</div>
+ <div class="box-sized" id="two">RIGHT HALF</div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001-ref.xht
new file mode 100644
index 000000000..815813c51
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001-ref.xht
@@ -0,0 +1,52 @@
+<!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 Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+ <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+ <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+ <meta content="image" name="flags"></meta>
+ <!--
+ <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
+ -->
+ <style type="text/css">
+ p {
+ display: inline-block;
+ background-color: white;
+ margin: 0px 0px;
+ padding: 0px 0px;
+ }
+
+ .with-padding {
+ padding: 5px 5px;
+ }
+
+ #img {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>All rectangles should be the same size.</div>
+ <p><img class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+ <p><img id="img" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+ <p><img id="img" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
new file mode 100644
index 000000000..003556b36
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-001.xht
@@ -0,0 +1,157 @@
+<!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 Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+ <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+ <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-replaced-001-ref.xht" />
+ <meta content="image" name="flags"></meta>
+ <meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding around each." />
+ <!--
+ This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
+ test suite.
+ -->
+ <style type="text/css">
+ p {
+ display: inline-block;
+ background-color: white;
+ padding: 0px 0px;
+ margin: 0px 0px;
+ }
+
+ .with-padding {
+ padding: 5px 5px;
+ box-sizing: border-box;
+ }
+
+ #img1 {
+ min-width: 70px;
+ max-width: 115px;
+ min-height: 55px;
+ max-height: 130px;
+ }
+
+ #img2 {
+ max-width: 85px;
+ min-height: 70px;
+ }
+
+ #img3 {
+ max-width: 85px;
+ min-height: 85px;
+ }
+
+ #img4 {
+ min-width: 85px;
+ max-height: 110px;
+ }
+
+ #img5 {
+ min-width: 85px;
+ max-height: 85px;
+ }
+
+ #img6 {
+ min-width: 70px;
+ max-height: 85px;
+ }
+
+ #img7 {
+ min-width: 85px;
+ max-height: 85px;
+ }
+
+ #img8 {
+ max-width: 110px;
+ min-height: 85px;
+ }
+
+ #img9 {
+ max-width: 85px;
+ min-height: 85px;
+ }
+
+ #img10 {
+ min-width: 85px;
+ max-width: 160px;
+ max-height: 85px;
+ }
+
+ #img11 {
+ min-width: 35px;
+ max-width: 235px;
+ max-height: 85px;
+ }
+
+ #img12 {
+ max-width: 85px;
+ min-height: 85px;
+ max-height: 160px;
+ }
+
+ #img13 {
+ max-width: 85px;
+ min-height: 35px;
+ max-height: 235px;
+ }
+
+ #img14 {
+ min-width: 60px;
+ max-width: 110px;
+ min-height: 85px;
+ }
+
+ #img15 {
+ min-width: 65px;
+ max-width: 85px;
+ min-height: 85px;
+ }
+
+ #img16 {
+ min-width: 85px;
+ min-height: 60px;
+ max-height: 110px;
+ }
+
+ #img17 {
+ min-width: 85px;
+ min-height: 65px;
+ max-height: 85px;
+ }
+
+ #img18 {
+ min-width: 85px;
+ max-height: 85px;
+ }
+
+ #img19 {
+ max-width: 85px;
+ min-height: 85px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>All rectangles should be the same size.</div>
+ <p><img id="img0" class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+ <p><img id="img1" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+ <p><img id="img2" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+ <p><img id="img3" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+ <p><img id="img4" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+ <p><img id="img5" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+ <p><img id="img6" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+ <p><img id="img7" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+ <p><img id="img8" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+ <p><img id="img9" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+ <p><img id="img10" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+ <p><img id="img11" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+ <p><img id="img12" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+ <p><img id="img13" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+ <p><img id="img14" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+ <p><img id="img15" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+ <p><img id="img16" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+ <p><img id="img17" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+ <p><img id="img18" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+ <p><img id="img19" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002-ref.xht
new file mode 100644
index 000000000..64204a68a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002-ref.xht
@@ -0,0 +1,53 @@
+<!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 Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+ <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+ <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+ <meta content="image" name="flags"></meta>
+ <!--
+ <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
+ -->
+ <style type="text/css">
+ p {
+ display: inline-block;
+ background-color: white;
+ margin: 0px 0px;
+ padding: 0px 0px;
+ }
+
+ .with-borderpadding {
+ padding: 5px 5px;
+ border: 5px solid blue;
+ }
+
+ #img {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>All rectangles should be the same size.</div>
+ <p><img class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+ <p><img id="img" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.xht
new file mode 100644
index 000000000..fc062f4eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-002.xht
@@ -0,0 +1,158 @@
+<!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 Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+ <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+ <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-replaced-002-ref.xht" />
+ <meta content="image" name="flags"></meta>
+ <meta name="assert" content="All images should be sized at 75px x 75px, with 5px of padding and 5px of blue border around each." />
+ <!--
+ This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
+ test suite.
+ -->
+ <style type="text/css">
+ p {
+ display: inline-block;
+ background-color: white;
+ padding: 0px 0px;
+ margin: 0px 0px;
+ }
+
+ .with-borderpadding {
+ padding: 5px 5px;
+ border: 5px solid blue;
+ box-sizing: border-box;
+ }
+
+ #img1 {
+ min-width: 80px;
+ max-width: 125px;
+ min-height: 65px;
+ max-height: 140px;
+ }
+
+ #img2 {
+ max-width: 95px;
+ min-height: 80px;
+ }
+
+ #img3 {
+ max-width: 95px;
+ min-height: 95px;
+ }
+
+ #img4 {
+ min-width: 95px;
+ max-height: 120px;
+ }
+
+ #img5 {
+ min-width: 95px;
+ max-height: 95px;
+ }
+
+ #img6 {
+ min-width: 80px;
+ max-height: 95px;
+ }
+
+ #img7 {
+ min-width: 95px;
+ max-height: 95px;
+ }
+
+ #img8 {
+ max-width: 120px;
+ min-height: 95px;
+ }
+
+ #img9 {
+ max-width: 95px;
+ min-height: 95px;
+ }
+
+ #img10 {
+ min-width: 95px;
+ max-width: 170px;
+ max-height: 95px;
+ }
+
+ #img11 {
+ min-width: 45px;
+ max-width: 245px;
+ max-height: 95px;
+ }
+
+ #img12 {
+ max-width: 95px;
+ min-height: 95px;
+ max-height: 170px;
+ }
+
+ #img13 {
+ max-width: 95px;
+ min-height: 45px;
+ max-height: 245px;
+ }
+
+ #img14 {
+ min-width: 70px;
+ max-width: 120px;
+ min-height: 95px;
+ }
+
+ #img15 {
+ min-width: 75px;
+ max-width: 95px;
+ min-height: 95px;
+ }
+
+ #img16 {
+ min-width: 95px;
+ min-height: 70px;
+ max-height: 120px;
+ }
+
+ #img17 {
+ min-width: 95px;
+ min-height: 75px;
+ max-height: 95px;
+ }
+
+ #img18 {
+ min-width: 95px;
+ max-height: 95px;
+ }
+
+ #img19 {
+ max-width: 95px;
+ min-height: 95px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>All rectangles should be the same size.</div>
+ <p><img id="img0" class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+ <p><img id="img1" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+ <p><img id="img2" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+ <p><img id="img3" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+ <p><img id="img4" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+ <p><img id="img5" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+ <p><img id="img6" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+ <p><img id="img7" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+ <p><img id="img8" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+ <p><img id="img9" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+ <p><img id="img10" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+ <p><img id="img11" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+ <p><img id="img12" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+ <p><img id="img13" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+ <p><img id="img14" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+ <p><img id="img15" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+ <p><img id="img16" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+ <p><img id="img17" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+ <p><img id="img18" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+ <p><img id="img19" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003-ref.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003-ref.xht
new file mode 100644
index 000000000..85524daf4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003-ref.xht
@@ -0,0 +1,48 @@
+<!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 Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+ <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+ <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+ <meta content="image" name="flags"></meta>
+ <!--
+ <link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
+ -->
+ <style type="text/css">
+ p {
+ display: inline-block;
+ background-color: white;
+ margin: 0px 0px;
+ padding: 0px 0px;
+ }
+
+ #img {
+ width: 75px;
+ height: 75px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>All rectangles should be the same size.</div>
+ <p><img src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+ <p><img id="img" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+ <p><img id="img" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+ <p><img id="img" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+ <p><img id="img" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+ <p><img id="img" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+ <p><img id="img" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+ <p><img id="img" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+ <p><img id="img" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+ <p><img id="img" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+ <p><img id="img" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+ <p><img id="img" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+ <p><img id="img" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+ <p><img id="img" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+ <p><img id="img" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+ <p><img id="img" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+ <p><img id="img" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+ <p><img id="img" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+ <p><img id="img" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+ <p><img id="img" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht
new file mode 100644
index 000000000..ed75c02d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/box-sizing-replaced-003.xht
@@ -0,0 +1,156 @@
+<!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 Test: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
+ <link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author"></link>
+ <link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author"></link>
+ <link rel="help" href="http://www.w3.org/TR/css3-ui/#box-sizing" />
+ <link rel="match" href="box-sizing-replaced-003-ref.xht" />
+ <meta content="image" name="flags"></meta>
+ <meta name="assert" content="All images should be sized at 75px x 75px." />
+ <!--
+ This test is derived from replaced-min-max-001, part of the W3C CSS 2.1
+ test suite.
+ -->
+ <style type="text/css">
+ p {
+ display: inline-block;
+ background-color: white;
+ padding: 0px 0px;
+ margin: 0px 0px;
+ }
+
+ .content-box {
+ box-sizing: content-box;
+ }
+
+ #img1 {
+ min-width: 60px;
+ max-width: 125px;
+ min-height: 45px;
+ max-height: 120px;
+ }
+
+ #img2 {
+ max-width: 75px;
+ min-height: 60px;
+ }
+
+ #img3 {
+ max-width: 75px;
+ min-height: 75px;
+ }
+
+ #img4 {
+ min-width: 75px;
+ max-height: 100px;
+ }
+
+ #img5 {
+ min-width: 75px;
+ max-height: 75px;
+ }
+
+ #img6 {
+ min-width: 60px;
+ max-height: 75px;
+ }
+
+ #img7 {
+ min-width: 75px;
+ max-height: 75px;
+ }
+
+ #img8 {
+ max-width: 100px;
+ min-height: 75px;
+ }
+
+ #img9 {
+ max-width: 75px;
+ min-height: 75px;
+ }
+
+ #img10 {
+ min-width: 75px;
+ max-width: 150px;
+ max-height: 75px;
+ }
+
+ #img11 {
+ min-width: 25px;
+ max-width: 225px;
+ max-height: 75px;
+ }
+
+ #img12 {
+ max-width: 75px;
+ min-height: 75px;
+ max-height: 150px;
+ }
+
+ #img13 {
+ max-width: 75px;
+ min-height: 25px;
+ max-height: 225px;
+ }
+
+ #img14 {
+ min-width: 50px;
+ max-width: 100px;
+ min-height: 75px;
+ }
+
+ #img15 {
+ min-width: 55px;
+ max-width: 75px;
+ min-height: 75px;
+ }
+
+ #img16 {
+ min-width: 75px;
+ min-height: 50px;
+ max-height: 100px;
+ }
+
+ #img17 {
+ min-width: 75px;
+ min-height: 55px;
+ max-height: 75px;
+ }
+
+ #img18 {
+ min-width: 75px;
+ max-height: 75px;
+ }
+
+ #img19 {
+ max-width: 75px;
+ min-height: 75px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>All rectangles should be the same size.</div>
+ <p><img id="img0" class="content-box" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></img></p>
+ <p><img id="img1" class="content-box" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></img></p>
+ <p><img id="img2" class="content-box" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></img></p>
+ <p><img id="img3" class="content-box" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></img></p>
+ <p><img id="img4" class="content-box" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></img></p>
+ <p><img id="img5" class="content-box" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></img></p>
+ <p><img id="img6" class="content-box" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></img></p>
+ <p><img id="img7" class="content-box" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></img></p>
+ <p><img id="img8" class="content-box" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></img></p>
+ <p><img id="img9" class="content-box" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></img></p>
+ <p><img id="img10" class="content-box" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></img></p>
+ <p><img id="img11" class="content-box" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></img></p>
+ <p><img id="img12" class="content-box" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></img></p>
+ <p><img id="img13" class="content-box" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></img></p>
+ <p><img id="img14" class="content-box" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></img></p>
+ <p><img id="img15" class="content-box" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></img></p>
+ <p><img id="img16" class="content-box" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></img></p>
+ <p><img id="img17" class="content-box" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></img></p>
+ <p><img id="img18" class="content-box" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></img></p>
+ <p><img id="img19" class="content-box" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></img></p>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/ui3/reftest-stylo.list b/layout/reftests/w3c-css/submitted/ui3/reftest-stylo.list
new file mode 100644
index 000000000..cba070397
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/reftest-stylo.list
@@ -0,0 +1,16 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== box-sizing-border-box-001.xht box-sizing-border-box-001.xht
+== box-sizing-border-box-002.xht box-sizing-border-box-002.xht
+== box-sizing-border-box-003.xht box-sizing-border-box-003.xht
+== box-sizing-border-box-004.xht box-sizing-border-box-004.xht
+== box-sizing-content-box-001.xht box-sizing-content-box-001.xht
+== box-sizing-content-box-002.xht box-sizing-content-box-002.xht
+== box-sizing-content-box-003.xht box-sizing-content-box-003.xht
+fails == box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht #bug #bug
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(Android,27,874) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-002.xht box-sizing-replaced-002.xht
+# Bug 1128229
+# Initial mulet triage: parity with B2G/B2G Desktop
+fuzzy-if(Android,27,925) random-if((B2G&&browserIsRemote)||Mulet) == box-sizing-replaced-003.xht box-sizing-replaced-003.xht
+# Bug 1128229
+# Initial mulet triage: parity with B2G/B2G Desktop
diff --git a/layout/reftests/w3c-css/submitted/ui3/reftest.list b/layout/reftests/w3c-css/submitted/ui3/reftest.list
new file mode 100644
index 000000000..bb33f595c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/reftest.list
@@ -0,0 +1,10 @@
+== box-sizing-border-box-001.xht box-sizing-border-box-001-ref.xht
+== box-sizing-border-box-002.xht box-sizing-border-box-002-ref.xht
+== box-sizing-border-box-003.xht box-sizing-border-box-003-ref.xht
+== box-sizing-border-box-004.xht box-sizing-border-box-004-ref.xht
+== box-sizing-content-box-001.xht box-sizing-content-box-001-ref.xht
+== box-sizing-content-box-002.xht box-sizing-content-box-002-ref.xht
+== box-sizing-content-box-003.xht box-sizing-content-box-003-ref.xht
+fuzzy-if(skiaContent,15,50) fuzzy-if(OSX,255,1575) skip-if(Android||gtkWidget) == box-sizing-replaced-001.xht box-sizing-replaced-001-ref.xht # bug 982547, Bug 1295466, Bug 1321707
+fuzzy-if(Android,27,874) fuzzy-if(gtkWidget,255,2775) == box-sizing-replaced-002.xht box-sizing-replaced-002-ref.xht # Bug 1128229, Bug 1313772
+fuzzy-if(Android,27,925) fuzzy-if(gtkWidget,14,43) == box-sizing-replaced-003.xht box-sizing-replaced-003-ref.xht # Bug 1128229
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-1.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-1.png
new file mode 100644
index 000000000..d6946724d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-1.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-10.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-10.png
new file mode 100644
index 000000000..bfdca3e6f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-10.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-11.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-11.png
new file mode 100644
index 000000000..38ee90dda
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-11.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-12.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-12.png
new file mode 100644
index 000000000..87433d4d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-12.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-13.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-13.png
new file mode 100644
index 000000000..c07d66e78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-13.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-14.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-14.png
new file mode 100644
index 000000000..e89dbe975
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-14.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-15.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-15.png
new file mode 100644
index 000000000..717ea111b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-15.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-16.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-16.png
new file mode 100644
index 000000000..0a49bbf1c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-16.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-17.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-17.png
new file mode 100644
index 000000000..a2ee273d7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-17.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-18.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-18.png
new file mode 100644
index 000000000..d18f45341
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-18.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-19.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-19.png
new file mode 100644
index 000000000..8900f36c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-19.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-2.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-2.png
new file mode 100644
index 000000000..58338097f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-2.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-3.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-3.png
new file mode 100644
index 000000000..e5e7d6e8a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-3.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-4.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-4.png
new file mode 100644
index 000000000..c099ae427
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-4.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-5.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-5.png
new file mode 100644
index 000000000..9d9d8105f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-5.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-6.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-6.png
new file mode 100644
index 000000000..781f894a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-6.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-7.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-7.png
new file mode 100644
index 000000000..3f91a11f8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-7.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-8.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-8.png
new file mode 100644
index 000000000..69951ec25
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-8.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-9.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-9.png
new file mode 100644
index 000000000..3ac586daa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max-9.png
Binary files differ
diff --git a/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max.png b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max.png
new file mode 100644
index 000000000..3ef233005
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/ui3/support/replaced-min-max.png
Binary files differ