summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/contain
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/w3c-css/submitted/contain')
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001-ref.html22
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001.html71
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002.html35
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003-ref.html34
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003.html36
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004-ref.html34
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004.html36
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-clip-005.html42
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html22
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html37
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html22
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html37
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001-ref.html29
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html40
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html39
-rw-r--r--layout/reftests/w3c-css/submitted/contain/reftest-stylo.list12
-rw-r--r--layout/reftests/w3c-css/submitted/contain/reftest.list11
19 files changed, 625 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001-ref.html
new file mode 100644
index 000000000..9cffaf9a3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #a {
+ width: 150px;
+ height: 150px;
+ background: green;
+ margin: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001.html
new file mode 100644
index 000000000..cda70052d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-001.html
@@ -0,0 +1,71 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' with various overflowing block descendants.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-clip-001-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ .root {
+ contain: paint;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ .a {
+ width: 100px;
+ height: 200px;
+ background: red;
+ }
+ .b {
+ width: 150px;
+ height: 150px;
+ background: green;
+ position: relative;
+ top: -25px;
+ left: -25px;
+ }
+ .c {
+ width: 100px;
+ height: 100px;
+ background: red;
+ }
+ .background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 200px;
+ height: 200px;
+ background: red;
+ z-index: -1;
+ }
+ .foreground {
+ position: absolute;
+ top: -25px;
+ left: -25px;
+ width: 150px;
+ height: 150px;
+ border: 25px solid red;
+ z-index: 1;
+ }
+ </style>
+</head>
+<body>
+ <div class="root">
+ <div class="a">
+ <div class="b"></div>
+ <!--These two absolutely positioned elements are checking that all sides are-->
+ <!--clipped. They also test that clipping is done correctly on absolutely-->
+ <!--positioned elements.-->
+ <div class="background"></div>
+ <div class="foreground"></div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002-ref.html
new file mode 100644
index 000000000..99e035476
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ .root {
+ overflow: hidden;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div class="root">
+ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+ be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+ nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+ Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+ Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+ torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+ ligula in libero.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002.html
new file mode 100644
index 000000000..b5c9e340b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' with overflowing text contents.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-clip-002-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ .root {
+ contain: paint;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div class="root">
+ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+ be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+ nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+ Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+ Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+ torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+ ligula in libero.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003-ref.html
new file mode 100644
index 000000000..34e79489a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ .root {
+ overflow-x: scroll;
+ overflow-y: scroll;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div class="root">
+ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+ be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+ nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+ Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+ Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+ torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+ ligula in libero.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003.html
new file mode 100644
index 000000000..e02dae14f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-y: scroll'.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-clip-003-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ .root {
+ contain: paint;
+ overflow-y: scroll;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div class="root">
+ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+ be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+ nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+ Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+ Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+ torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+ ligula in libero.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004-ref.html
new file mode 100644
index 000000000..4eda898ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ .root {
+ overflow-y: scroll;
+ overflow-x: scroll;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div class="root">
+ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+ be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+ nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+ Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+ Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+ torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+ ligula in libero.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004.html
new file mode 100644
index 000000000..e3ed25476
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-004.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' with overflowing text contents, and 'overflow-x: scroll'.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-clip-004-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ .root {
+ contain: paint;
+ overflow-x: scroll;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div class="root">
+ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+ be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
+ nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
+ Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
+ Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora
+ torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales
+ ligula in libero.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-005.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-005.html
new file mode 100644
index 000000000..dc9220264
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-clip-005.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' on li with overflowing text contents and
+ bullet, and 'overflow-y: scroll'.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-clip-003-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ ul {
+ padding: 0;
+ }
+ .root {
+ contain: paint;
+ overflow-y: scroll;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 25px;
+ padding: 25px;
+ }
+ </style>
+</head>
+<body>
+ <ul>
+ <li class="root">
+ AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should
+ be clipped to the box. Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
+ Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis
+ ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris
+ massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu
+ ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur
+ sodales ligula in libero.
+ </li>
+ </ul>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html
new file mode 100644
index 000000000..422706802
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #a {
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 50px;
+ }
+ </style>
+</head>
+<body>
+ <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
new file mode 100644
index 000000000..fc04df008
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-absolute-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' element should contain absolute position elements.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ #a {
+ contain: paint;
+ width: 100px;
+ height: 100px;
+ background: red;
+ margin: 50px;
+ }
+ #b {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background: green;
+ }
+ </style>
+</head>
+<body>
+ <div id="a">
+ <div>
+ <div id="b"></div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html
new file mode 100644
index 000000000..422706802
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #a {
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin: 50px;
+ }
+ </style>
+</head>
+<body>
+ <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
new file mode 100644
index 000000000..60f180bea
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-containing-block-fixed-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' element should contain fixed position elements.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ #a {
+ contain: paint;
+ width: 100px;
+ height: 100px;
+ background: red;
+ margin: 50px;
+ }
+ #b {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background: green;
+ }
+ </style>
+</head>
+<body>
+ <div id="a">
+ <div>
+ <div id="b"></div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001-ref.html
new file mode 100644
index 000000000..5a70a21c1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #left {
+ float: left;
+ height: 50px;
+ width: 10px;
+ background: blue;
+ }
+ #a {
+ background: green;
+ margin: 10px;
+ width: 50px;
+ height: 50px;
+ }
+ </style>
+</head>
+<body>
+ <div id="left"></div>
+ <div id="a"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html
new file mode 100644
index 000000000..06a59f2e5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-float-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' should contain floats as a formatting context.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-formatting-context-float-001-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ #left {
+ float: left;
+ height: 50px;
+ width: 10px;
+ background: blue;
+ }
+ #a {
+ contain: paint;
+ background: red;
+ margin: 10px;
+ width: 50px;
+ height: 50px;
+ }
+ #b {
+ clear: left;
+ width: 50px;
+ height: 50px;
+ background: green;
+ }
+ </style>
+</head>
+<body>
+ <div id="left"></div>
+ <div id="a">
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html
new file mode 100644
index 000000000..6dde7bc90
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reftest Test</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <style>
+ body {
+ margin: 0;
+ }
+ #a {
+ background: blue;
+ margin: 10px;
+ width: 50px;
+ height: 50px;
+ }
+ #b {
+ width: 50px;
+ height: 40px;
+ background: green;
+ }
+ #b-padding {
+ height: 10px;
+ }
+ </style>
+</head>
+<body>
+ <div id="a">
+ <div id="b-padding"></div>
+ <div id="b"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html
new file mode 100644
index 000000000..fdc0bb7f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-paint-formatting-context-margin-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: 'contain: paint' with a vertical margin child. Margin collapse should not occur.</title>
+ <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-paint">
+ <link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">
+ <style>
+ body {
+ margin: 0;
+ }
+ #a {
+ contain: paint;
+ background: blue;
+ margin: 10px;
+ width: 50px;
+ height: 50px;
+ }
+ #b {
+ width: 50px;
+ height: 40px;
+ background: green;
+ margin-top: 10px;
+ }
+ #c {
+ background: red;
+ width: 50px;
+ height: 10px;
+ }
+ </style>
+</head>
+<body>
+ <div id="a">
+ <div id="b"></div>
+ <div id="c"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/contain/reftest-stylo.list b/layout/reftests/w3c-css/submitted/contain/reftest-stylo.list
new file mode 100644
index 000000000..3e54d34d8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/reftest-stylo.list
@@ -0,0 +1,12 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+default-preferences pref(layout.css.contain.enabled,true)
+
+== contain-paint-clip-001.html contain-paint-clip-001.html
+== contain-paint-clip-002.html contain-paint-clip-002.html
+== contain-paint-clip-003.html contain-paint-clip-003.html
+== contain-paint-clip-004.html contain-paint-clip-004.html
+random == contain-paint-clip-005.html contain-paint-clip-005.html
+== contain-paint-containing-block-absolute-001.html contain-paint-containing-block-absolute-001.html
+== contain-paint-containing-block-fixed-001.html contain-paint-containing-block-fixed-001.html
+== contain-paint-formatting-context-float-001.html contain-paint-formatting-context-float-001.html
+== contain-paint-formatting-context-margin-001.html contain-paint-formatting-context-margin-001.html
diff --git a/layout/reftests/w3c-css/submitted/contain/reftest.list b/layout/reftests/w3c-css/submitted/contain/reftest.list
new file mode 100644
index 000000000..5326e86a5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -0,0 +1,11 @@
+default-preferences pref(layout.css.contain.enabled,true)
+
+== contain-paint-clip-001.html contain-paint-clip-001-ref.html
+== contain-paint-clip-002.html contain-paint-clip-002-ref.html
+== contain-paint-clip-003.html contain-paint-clip-003-ref.html
+== contain-paint-clip-004.html contain-paint-clip-004-ref.html
+== contain-paint-clip-005.html contain-paint-clip-003-ref.html
+== contain-paint-containing-block-absolute-001.html contain-paint-containing-block-absolute-001-ref.html
+== contain-paint-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
+== contain-paint-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
+== contain-paint-formatting-context-margin-001.html contain-paint-formatting-context-margin-001-ref.html