Adding 5 new contain-content-* tests, 1 contain-strict test and 2 ref… (#16145)
Adding
contain-content-001.html
contain-content-002.html
contain-content-003.html
contain-content-004.html
contain-content-011.html
contain-strict-011.html
reference/contain-content-011-ref.html
reference/contain-strict-011-ref.html
where contain-content-011 test and contain-strict-011 test explicitly verify that **'contain: strict' and 'contain: content' do not turn on style containment**
diff --git a/css/css-contain/contain-content-001.html b/css/css-contain/contain-content-001.html
new file mode 100644
index 0000000..649bf54
--- /dev/null
+++ b/css/css-contain/contain-content-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Containment Test: a block with 'contain: content' alongside a float</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
+ <link rel="match" href="reference/contain-layout-ifc-022-ref.html">
+
+ <meta content="" name="flags">
+
+ <style>
+ div
+ {
+ color: transparent;
+ font-size: 16px;
+ padding: 8px;
+ }
+
+ div#floated-left
+ {
+ background-color: blue;
+ float: left;
+ margin: 8px;
+ width: 6em;
+ }
+
+ div#with-contain-content
+ {
+ background-color: orange;
+ width: 12em;
+
+ contain: content;
+ }
+ </style>
+
+
+ <p>Test passes if the orange rectangle and blue rectangle do not overlap.
+
+ <div id="floated-left">Some text in a blue rectangle.</div>
+
+ <div id="with-contain-content">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
diff --git a/css/css-contain/contain-content-002.html b/css/css-contain/contain-content-002.html
new file mode 100644
index 0000000..d18ba3c
--- /dev/null
+++ b/css/css-contain/contain-content-002.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Containment Test: 'contain: content' and margin collapsing</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
+ <link rel="match" href="reference/contain-paint-ifc-011-ref.html">
+
+ <meta content="This test checks that a block element with 'contain: content' establishes a new block formatting context which is independent and separate from others. This causes margin collapsing to be ineffective among vertically-adjacent boxes. In this test, the top margin of parent boxes and top margin of their respective first in-flow child do not collapse. Also, in this test, the bottom margin of the last in-flow child of boxes and bottom margin of their respective parent boxes do not collapse." name="assert">
+ <meta name="flags" content="">
+
+ <style>
+ div
+ {
+ contain: content;
+ margin: 30px 0px;
+ }
+
+ div#grand-grand-parent-orange
+ {
+ background-color: orange;
+ }
+
+ div#grand-parent-blue
+ {
+ background-color: blue;
+ }
+
+ div#parent-lime
+ {
+ background-color: lime;
+ }
+
+ div#collapse-through-child /* margin collapsing through element */
+ {
+ contain: none;
+ }
+ </style>
+
+ <p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
+
+ <div id="grand-grand-parent-orange">
+
+ <div id="grand-parent-blue">
+
+ <div id="parent-lime">
+
+ <div id="collapse-through-child"></div>
+
+ </div>
+
+ </div>
+
+ </div>
diff --git a/css/css-contain/contain-content-003.html b/css/css-contain/contain-content-003.html
new file mode 100644
index 0000000..bb421c0
--- /dev/null
+++ b/css/css-contain/contain-content-003.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Containment Test: element with 'contain: content' and absolutely positioned descendants</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+ <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+
+ <meta name="flags" content="">
+ <meta name="assert" content="This test checks that an element with 'contain: content' acts as containing block for its absolutely positioned descendants.">
+
+ <style>
+ div
+ {
+ width: 100px;
+ }
+
+ div#contain-content
+ {
+ background-color: red;
+ contain: content;
+ height: 100px;
+ }
+
+ div.abspos
+ {
+ background-color: green;
+ height: 50px;
+ position: absolute;
+ right: 0;
+ }
+
+ div#first-abspos
+ {
+ top: 0px;
+ }
+
+ div#second-abspos
+ {
+ bottom: 0px;
+ }
+ </style>
+
+ <body>
+
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+ <div id="contain-content">
+ <div id="first-abspos" class="abspos"></div>
+ <div id="second-abspos" class="abspos"></div>
+ </div>
diff --git a/css/css-contain/contain-content-004.html b/css/css-contain/contain-content-004.html
new file mode 100644
index 0000000..37b2daf
--- /dev/null
+++ b/css/css-contain/contain-content-004.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Containment Test: 'contain: content' applies to 'table-cell' elements</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+ <link rel="match" href="reference/contain-layout-cell-001-ref.html">
+
+ <meta content="In this test, the td#contain should act as the containing block for div#abs-pos ." name="assert">
+ <meta name="flags" content="">
+
+ <style>
+ table
+ {
+ background-color: blue;
+ border-spacing: 2px;
+ height: 206px;
+ table-layout: fixed;
+ width: 206px;
+ }
+
+ td
+ {
+ background-color: white;
+ padding: 0px;
+ vertical-align: top;
+ }
+
+ td#contain
+ {
+ contain: content;
+ }
+
+ span
+ {
+ background-color: red;
+ color: yellow;
+ font-family: monospace;
+ vertical-align: top;
+ }
+
+ div#abs-pos
+ {
+ background-color: green;
+ color: white;
+ font-family: monospace;
+ left: 0px;
+ position: absolute;
+ top: 0px;
+ }
+ </style>
+
+ <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
+
+ <table>
+
+ <tr><td> <td>
+
+ <tr><td> <td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
+
+ </table>
diff --git a/css/css-contain/contain-content-011.html b/css/css-contain/contain-content-011.html
new file mode 100644
index 0000000..1646413
--- /dev/null
+++ b/css/css-contain/contain-content-011.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Containment Test: 'contain: content' does not turn on style containment</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+ <link rel="match" href="reference/contain-content-011-ref.html">
+
+ <meta name="flags" content="">
+ <meta name="assert" content="'contain: content' does not turn on style containment. So, in this test, the counter of div.abspos child should not be reset and must not be reset.">
+
+ <style>
+ body
+ {
+ counter-reset: counter-of-abspos-div 17;
+ }
+
+ /*
+ This creates a new counter identified as
+ "counter-of-abspos-div" and initially sets
+ such counter to 17 (an entirely arbitrary
+ number)
+ */
+
+ div
+ {
+ width: 100px;
+ }
+
+
+ div#contain-content
+ {
+ background-color: red;
+ contain: content;
+ height: 100px;
+ }
+
+ div.abspos
+ {
+ background-color: green;
+ height: 50px;
+ position: absolute;
+ right: 0;
+ }
+
+ div#contain-content > div.abspos
+ {
+ counter-increment: counter-of-abspos-div 4;
+ }
+
+ /*
+ This increments the counter identified as
+ "counter-of-abspos-div" of the step value
+ of 4 (an entirely arbitrary number) each and
+ every time there is a div.abspos child
+ within the subtree of div#contain-content
+ */
+
+ div#first-abspos
+ {
+ top: 0px;
+ }
+
+ div#second-abspos
+ {
+ bottom: 0px;
+ }
+
+ div#result::after
+ {
+ content: counter(counter-of-abspos-div);
+ font-size: 3em;
+ }
+
+ /*
+ Now, the generated content is set to the
+ current value of the counter identified
+ as "counter-of-abspos-div":
+ 17 + 4 * 2 == 25
+ */
+ </style>
+
+ <body>
+
+ <p>Test passes if there is a filled green square, no red and the number 25.
+
+ <div id="contain-content">
+ <div id="first-abspos" class="abspos"></div>
+ <div id="second-abspos" class="abspos"></div>
+ </div>
+
+ <div id="result"></div>
diff --git a/css/css-contain/contain-strict-011.html b/css/css-contain/contain-strict-011.html
new file mode 100644
index 0000000..a3c506b
--- /dev/null
+++ b/css/css-contain/contain-strict-011.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Containment Test: 'contain: strict' does not turn on style containment</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+ <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+ <link rel="match" href="reference/contain-strict-011-ref.html">
+
+ <meta name="flags" content="">
+ <meta name="assert" content="'contain: strict' does not turn on style containment. So, in this test, the counter of spans should not be reset and must not be reset.">
+
+ <style>
+ body
+ {
+ counter-reset: counter-of-span 17;
+ }
+
+ /*
+ This creates a new counter identified as "counter-of-span"
+ and initially sets such counter to 17 (an entirely
+ arbitrary number)
+ */
+
+ div
+ {
+ contain: strict;
+ }
+
+ div > span
+ {
+ background-color: yellow;
+ color: red;
+ counter-increment: counter-of-span 3;
+ }
+
+ /*
+ This increments the counter identified as "counter-of-span"
+ of the step value of 3 (an entirely arbitrary number) each
+ and every time there is a <span> child within the subtree
+ of div
+ */
+
+ p#test::after
+ {
+ content: counter(counter-of-span);
+ font-size: 3em;
+ }
+
+ /*
+ Now, the generated content is set to the current
+ value of the counter identified as "counter-of-span":
+ 17 + 3 * 3 == 26
+ */
+ </style>
+
+ <body>
+
+ <div><span>FAIL1</span> <span>FAIL2</span> <span>FAIL3</span></div>
+
+ <p id="pass-fail-conditions-sentence">Test passes if there is the number 26.
+
+ <p id="test">
diff --git a/css/css-contain/reference/contain-content-011-ref.html b/css/css-contain/reference/contain-content-011-ref.html
new file mode 100644
index 0000000..21043b0
--- /dev/null
+++ b/css/css-contain/reference/contain-content-011-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ div#green-square
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+
+ div#result
+ {
+ font-size: 3em;
+ }
+ </style>
+
+ <p>Test passes if there is a filled green square, no red and the number 25.
+
+ <div id="green-square"></div>
+
+ <div id="result">25</div>
diff --git a/css/css-contain/reference/contain-strict-011-ref.html b/css/css-contain/reference/contain-strict-011-ref.html
new file mode 100644
index 0000000..3e69ee5
--- /dev/null
+++ b/css/css-contain/reference/contain-strict-011-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+ <meta charset="UTF-8">
+
+ <title>CSS Reference Test</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <style>
+ p
+ {
+ margin-top: 1.5em;
+ }
+
+ div
+ {
+ font-size: 3em;
+ }
+ </style>
+
+ <p>Test passes if there is the number 26.
+
+ <div>26</div>
