Bug 1541659 [wpt PR 16145] - Adding 5 new contain-content-* tests, 1 contain-strict test and 2 ref…, a=testonly
authorGérard Talbot <github@gtalbot.org>
Thu, 18 Apr 2019 11:59:00 +0000
changeset 529981 0199adca008d043c3cad2a0bbb497ec7f051f2e8
parent 529980 375f67a38d8805d873047cba17229603241bfd79
child 529982 f4d005bd6f51e94d5bb978d64f194367b236d639
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1541659, 16145
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1541659 [wpt PR 16145] - Adding 5 new contain-content-* tests, 1 contain-strict test and 2 ref…, a=testonly Automatic update from web-platform-tests 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** -- wpt-commits: 3547167a5284e011145013c7705ac7cea8d01c91 wpt-pr: 16145
testing/web-platform/tests/css/css-contain/contain-content-001.html
testing/web-platform/tests/css/css-contain/contain-content-002.html
testing/web-platform/tests/css/css-contain/contain-content-003.html
testing/web-platform/tests/css/css-contain/contain-content-004.html
testing/web-platform/tests/css/css-contain/contain-content-011.html
testing/web-platform/tests/css/css-contain/contain-strict-011.html
testing/web-platform/tests/css/css-contain/reference/contain-content-011-ref.html
testing/web-platform/tests/css/css-contain/reference/contain-strict-011-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>&nbsp;<td>&nbsp;
+
+    <tr><td>&nbsp;<td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
+
+  </table>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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">
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>