import-expectations.json

    "web-platform-tests/css/css-backgrounds": "import", 

    "web-platform-tests/css/css-cascade": "import", 

    "web-platform-tests/css/css-color": "import", 

97 "web-platform-tests/css/css-contain": "import",

    "web-platform-tests/css/css-content": "import", 

    "web-platform-tests/css/css-counter-styles": "import", 

    "web-platform-tests/css/css-display": "import", 

LayoutTests/imported/w3c/resources/resource-files.json

        "web-platform-tests/css/css-color/t421-rgb-hex3-expand-b.xht",

        "web-platform-tests/css/css-color/t422-rgba-a0.6-a.xht",

        "web-platform-tests/css/css-color/t425-hsla-basic-a.xht",

296 "web-platform-tests/css/css-contain/contain-crash.html",

297 "web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html",

        "web-platform-tests/css/css-display/run-in/after-content-display-004.xht",

        "web-platform-tests/css/css-display/run-in/anonymous-box-generation-002.xht",

        "web-platform-tests/css/css-display/run-in/background-applies-to-011.xht",

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/META.yml

spec: https://drafts.csswg.org/css-contain/

suggested_reviewers:

  - tabatkins

  - frivoal

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: contain is not animatable</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">

<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=assert content="the contain property is not animatable">

<style>

div {

  border: 50px solid green;

  background: red;

  position: absolute; /* for shrinkwrap */

  contain: strict;

  animation-duration: 1s;

  animation-name: bad;

  animation-play-state: paused;

  font-size: 100px;

}

@keyframes bad {

  from {

    contain: none;

  }

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div>&nbsp;</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001-expected.txt

PASS chrome does not crash with contain

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001.html

<!DOCTYPE html>

<title>CSS Overflow and Transforms: css-overflow-3</title>

<link rel="author" href="mailto:atotic@google.com">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<link rel="help" href="https://crbug.com/964924">

<meta name="assert" content="chrome does not crash with css contain edge case">

<style>

  * {

    contain: size layout;

  }

  html {

    outline-style: auto;

    margin-bottom: 39%;

  }

  #target {

    -webkit-appearance: push-button;

  }

</style>

<output id="target">text</output>

<script>

test(() => {

  document.body.offsetTop;

  document.querySelector("#target").value = "";

  document.body.offsetTop;

  assert_equals(document.querySelector("#target").value, "");

}, 'chrome does not crash with contain');

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001-expected.html

<!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

    {

      color: transparent;

      float: left;

      font-size: 16px;

      padding: 8px;

    }

  div#blue-rectangle

    {

      background-color: blue;

      margin: 8px;

      width: 6em;

    }

  div#orange-rectangle

    {

      background-color: orange;

      width: 12em;

    }

  </style>

  <p>Test passes if the orange rectangle and blue rectangle do not overlap.

  <div id="blue-rectangle">Some text in a blue rectangle.</div>

  <div id="orange-rectangle">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001.html

<!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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002-expected.html

<!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-bottom: 30px;

    }

  div

    {

      height: 30px;

    }

  div.orange

    {

      background-color: orange;

    }

  div.blue

    {

      background-color: blue;

    }

  div#lime

    {

      background-color: lime;

    }

  </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 class="orange"></div>

  <div class="blue"></div>

  <div id="lime"></div>

  <div class="blue"></div>

  <div class="orange"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002.html

<!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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003.html

<!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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004-expected.html

<!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>

  table

    {

      background-color: blue;

      border-spacing: 2px;

      height: 206px;

      table-layout: fixed;

      width: 206px;

    }

  td

    {

      background-color: white;

      padding: 0px;

      vertical-align: baseline;

    }

  span

    {

      background-color: green;

      color: white;

      font-family: monospace;

      vertical-align: top;

    }

  </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><span>PASS</span>

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004.html

<!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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011-expected.html

<!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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011.html

<!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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-crash.html

<!DOCTYPE html>

<link rel="help" href="https://crbug.com/1129563">

<body style="contain: size layout;">

  <div id="target" style="contain: size layout;"></div>

  <div id="child"></div>

</body>

<script>

document.body.offsetTop;

const target = document.getElementById('target');

const child = document.getElementById('child');

target.appendChild(child);

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline-expected.txt

PASS Pass if no crash

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline.html

<!doctype html>

<title>Test `contain: strict` to Flexbox does not crash</title>

<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">

<link rel="author" href="mailto:kojii@chromium.org">

<style>

body {

  contain: strict;

  display: flex;

}

html {

  outline: 1px auto;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id="target"></div>

<div id="log"></div>

<script>

test(() => {

  document.body.offsetTop;

  target.style.width = '100px';

  document.body.offsetTop;

}, "Pass if no crash");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout containment on non-atomic inlines</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="layout containment does not apply to non atomic inlines">

  <link rel="match" href="../reference/pass_if_pass_below.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<style>

#pa {

  contain: layout;

  height: 100vh; /*If layout containment applies, the span becomes a BFC, height applies, and knocks SS off the page */

}

#ss {

  vertical-align: bottom;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span id="pa">PA</span><span id="ss">SS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout containment on ruby-base</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="ahem">

  <meta name=assert content="layout containment does not apply to ruby-base">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

div {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

rb {

  contain: layout;

  display: ruby-base;

  font-family: Ahem;

  font-size: 100px;

  line-height: 1;

}

rb::after {

  content: "X";

  color: green;

  position: absolute;

  top:0; left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div><ruby><rb></rb></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout containment on ruby-base-container</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="ahem">

  <meta name=assert content="layout containment does not apply to ruby-base-container">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

div {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

rbc {

  contain: layout;

  display: ruby-base-container;

  font-family: Ahem;

  font-size: 100px;

  line-height: 1;

}

rbc::after {

  content: "X";

  color: green;

  position: absolute;

  top:0; left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div><ruby><rbc></rbc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout containment on ruby-text-container</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="ahem">

  <meta name=assert content="layout containment does not apply to ruby-text-container">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

div {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

rtc {

  contain: layout;

  display: ruby-text-container;

  font-family: Ahem;

  font-size: 100px;

  line-height: 1;

}

rtc::after {

  content: "X";

  color: green;

  position: absolute;

  top:0; left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div><ruby><rtc></rtc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout containment on ruby-text</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="ahem">

  <meta name=assert content="layout containment does not apply to ruby-text">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

div {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

rt {

  contain: layout;

  display: -webkit-ruby-text;

  font-family: Ahem;

  font-size: 100px;

  line-height: 1;

}

rt::after {

  content: "X";

  color: green;

  position: absolute;

  top:0; left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div><ruby><rt></rt></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment absolutely positioned descendants</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Layout containment makes an element to act as containing block for absolutely positioned descendants.">

<style>

#contain-layout {

  contain: layout;

  width: 100px;

  height: 100px;

  background: red;

}

#abspos {

  position: absolute;

  bottom: 0;

  right: 0;

  background: green;

  width: 100px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="contain-layout">

  <div id="abspos"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment fixed positioned descendants</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Layout containment makes an element to act as containing block for fixed positioned descendants.">

<style>

#contain-layout {

  contain: layout;

  width: 100px;

  height: 100px;

  background: red;

}

#fixed {

  position: fixed;

  bottom: 0;

  right: 0;

  background: green;

  width: 100px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="contain-layout">

  <div id="fixed"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009.html

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSS Containment Test: Layout containment on table-row-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=flags content="ahem">

<meta name=assert content="Layout containment doesn't apply to table-row-group elements.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

#wrapper {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

#table-row-group {

  display: table-row-group;

  contain: layout;

}

#abspos {

  position: absolute;

  font: 100px/1 Ahem;

  color: green;

  top: 0;

  left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="wrapper">

  <div id="table-row-group">

    <div id="abspos">X</div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010.html

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSS Containment Test: Layout containment on table-header-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=flags content="ahem">

<meta name=assert content="Layout containment doesn't apply to table-header-group elements.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

#wrapper {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

#table-header-group {

  display: table-header-group;

  contain: layout;

}

#abspos {

  position: absolute;

  font: 100px/1 Ahem;

  color: green;

  top: 0;

  left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="wrapper">

  <div id="table-header-group">

    <div id="abspos">X</div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011.html

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSS Containment Test: Layout containment on table-footer-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=flags content="ahem">

<meta name=assert content="Layout containment doesn't apply to table-footer-group elements.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

#wrapper {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

#table-footer-group {

  display: table-footer-group;

  contain: layout;

}

#abspos {

  position: absolute;

  font: 100px/1 Ahem;

  color: green;

  top: 0;

  left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="wrapper">

  <div id="table-footer-group">

    <div id="abspos">X</div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012.html

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSS Containment Test: Layout containment on table-row</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=flags content="ahem">

<meta name=assert content="Layout containment doesn't apply to table-row elements.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

#wrapper {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

  padding: 25px;

  box-sizing: border-box;

}

#table-row {

  display: table-row;

  contain: layout;

}

#abspos {

  position: absolute;

  font: 100px/1 Ahem;

  color: green;

  top: 0;

  left: 0;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="wrapper">

  <div id="table-row">

    <div id="abspos">X</div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013.html

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSS Containment Test: Layout containment on table-cell</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Layout containment does apply to table-cell elements.">

<style>

#table-cell {

  display: table-cell;

  contain: layout;

  width: 100px;

  height: 100px;

  background: red;

}

#abspos {

  position: absolute;

  bottom: 0;

  right: 0;

  background: green;

  width: 100px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="table-cell">

  <div id="abspos"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014.html

<!DOCTYPE html>

<meta charset=utf-8>

<title>CSS Containment Test: Layout containment on table-caption</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Layout containment does apply to table-caption elements.">

<style>

#table-caption {

  display: table-caption;

  contain: layout;

  width: 100px;

  height: 100px;

  background: red;

}

#abspos {

  position: absolute;

  bottom: 0;

  right: 0;

  background: green;

  width: 100px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="table-caption">

  <div id="abspos"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment stacking context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/pass_if_pass_below.html">

<meta name=assert content="Layout containment elements create a stacking context.">

<style>

div {

  contain: layout;

  background: white;

}

span {

  position: relative;

  z-index: -1;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span>PASS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment stacking context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/nothing.html">

<meta name=assert content="Elements in which layout containment doesn't apply, do not create a stacking context.">

<style>

div {

  display: -webkit-ruby-text;

  contain: layout;

  background: white;

}

span {

  position: relative;

  z-index: -1;

}

</style>

<p>There should be nothing below.</p>

<div><span>FAIL</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment stacking context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="../reference/nothing.html">

<meta name=assert content="Elements in which layout containment doesn't apply, do not create a stacking context.">

<style>

div {

  display: inline;

  contain: layout;

  background: white;

}

span {

  position: relative;

  z-index: -1;

}

</style>

<p>There should be nothing below.</p>

<div><span>FAIL</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout containment and baselines</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=assert content="With contain:layout, for the purpose of the vertical-align property, the containing element is treated as having no baseline.">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">

  <meta name="flags" content="">

<style>

#red {

  position: absolute;

  background: red;

  width: 100px;

  height: 100px;

  z-index: -1;

}

.green {

  display: inline-block;

  height: 100px;

  background: green;

  width: 50px;

  contain: layout;

  color: transparent;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id=red></div>

<div class=green></div><div class=green>a</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment supress baseline in flex items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Flex items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the flex item's border box when they're baseline aligned.">

<style>

#flex {

  display: inline-flex;

  align-items: baseline;

  background: red;

}

canvas {

  background: green;

  width: 50px;

  height: 100px;

}

#item {

  contain: layout;

  color: transparent;

  background: green;

  width: 50px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="flex">

  <canvas></canvas>

  <div id="item">item</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment supress baseline in grid items</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Grid items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the grid item's border box when they're baseline aligned.">

<style>

#grid {

  display: inline-grid;

  align-items: baseline;

  background: red;

  grid-auto-flow: column;

}

canvas {

  background: green;

  width: 50px;

  height: 100px;

}

#item {

  contain: layout;

  color: transparent;

  background: green;

  width: 50px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="grid">

  <canvas></canvas>

  <div id="item">item</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

div {

  display: inline-block;

  font: 100px/1 Ahem;

  width: 100px;

  height: 100px;

}

#first {

  color: blue;

  position: relative;

  top: 20px;

}

#second {

  color: green;

}

</style>

<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>

<div id="first">X</div><div id="second">X</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment supress baseline in table cells</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="reference/contain-layout-baseline-004-ref.html">

<meta name=assert content="Table cells with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the cell's border box when they're baseline aligned.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

#table {

  display: table;

  font: 100px/1 Ahem;

}

#table > * {

  display: table-cell;

}

#first {

  color: blue;

}

#second {

  color: green;

  contain: layout;

}

</style>

<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>

<div id="table">

  <div id="first">X</div>

  <div id="second">X</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

.wrapper {

  height: 110px;

}

.wrapper > * {

  vertical-align: bottom;

  background: cyan;

  font-size: 20px;

}

.wrapper > :nth-child(1) {

  background: magenta;

}

.inline-block {

  display: inline-block;

}

canvas {

  width: 100px;

  height: 100px;

}

fieldset, details {

  display: inline-block;

  width: max-content;

}

</style>

<p>Test passes if it has the same output than the reference (all elements are aligned on the bottom edge).</p>

<div class="wrapper">

  <div class="inline-block" style="font-size: 80px;">foo</div>

  <div class="inline-block">foo</div>

  <div class="inline-block" style="border: solid thick; padding: 2px;">foo</div>

  <div style="display: inline-flex;">foo</div>

  <div style="display: inline-flex; border: solid thick; padding: 2px;">foo</div>

  <div style="display: inline-grid;">foo</div>

  <div style="display: inline-grid; border: solid thick; padding: 2px;">foo</div>

</div>

<div class="wrapper">

  <canvas></canvas>

  <div class="inline-block">foo</div>

  <button>foo</button>

  <select><option>foo</option></select>

  <select multiple style="height: 40px;"><option>foo</option></select>

  <textarea style="height: 40px;"></textarea>

</div>

<div class="wrapper">

  <canvas></canvas>

  <input value="foo" size="3"></input>

  <input type="file"></input>

</div>

<div class="wrapper">

  <canvas></canvas>

  <table style="display: inline-table;"><tr><td>foo</td></tr></table>

  <canvas></canvas>

  <fieldset></fieldset>

  <fieldset><legend>foo</legend></fieldset>

  <fieldset><legend>foo</legend>foo</fieldset>

  <details></details>

  <details><summary>foo</summary>foo</details> <details open="true"><summary>foo</summary>foo</details>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment supress baseline</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="reference/contain-layout-baseline-005-ref.html">

<meta name=assert content="This test checks that baseline is suppressed for elements with 'contain: layout', so they are treated as having no baseline (thus its baseline is synthetized).">

<style>

.wrapper {

  height: 110px;

}

.wrapper > * {

  contain: layout;

  background: cyan;

  font-size: 20px;

  vertical-align: baseline;

}

.wrapper > :nth-child(1) {

  background: magenta;

}

.inline-block {

  display: inline-block;

}

canvas {

  width: 100px;

  height: 100px;

}

fieldset, details {

  display: inline-block;

  width: max-content;

}

</style>

<p>Test passes if it has the same output than the reference (all elements are aligned on the bottom edge).</p>

<div class="wrapper">

  <div class="inline-block" style="font-size: 80px;">foo</div>

  <div class="inline-block">foo</div>

  <div class="inline-block" style="border: solid thick; padding: 2px;">foo</div>

  <div style="display: inline-flex;">foo</div>

  <div style="display: inline-flex; border: solid thick; padding: 2px;">foo</div>

  <div style="display: inline-grid;">foo</div>

  <div style="display: inline-grid; border: solid thick; padding: 2px;">foo</div>

</div>

<div class="wrapper">

  <canvas></canvas>

  <div class="inline-block">foo</div>

  <button>foo</button>

  <select><option>foo</option></select>

  <select multiple style="height: 40px;"><option>foo</option></select>

  <textarea style="height: 40px;"></textarea>

</div>

<div class="wrapper">

  <canvas></canvas>

  <input value="foo" size="3"></input>

  <input type="file"></input>

</div>

<div class="wrapper">

  <canvas></canvas>

  <table style="display: inline-table;"><tr><td>foo</td></tr></table>

  <canvas></canvas>

  <fieldset></fieldset>

  <fieldset><legend>foo</legend></fieldset>

  <fieldset><legend>foo</legend>foo</fieldset>

  <details></details>

  <details><summary>foo</summary>foo</details> <details open="true"><summary>foo</summary>foo</details>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

  line-height: 1;

  height: 4em;

  column-fill: auto;

}

div:last-of-type {

  break-before: column;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article>

  <div>A<br>A</div>

  <div>A<br>A</div>

</article>

<article>

  <div>A<br>A</div>

  <div>A<br>A</div>

</article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout containment and forced breaks</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="layout containment allows forced breaks.">

  <link rel="match" href="reference/contain-style-breaks-004-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">

  <link rel=help href="https://drafts.csswg.org/css-break-3/#forced-break">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

  line-height: 1;

  height: 4em;

  column-fill: auto;

}

div > div:last-of-type {

  break-before: column;

}

#test > div {

  contain: layout;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article id=ref>

  <div>

    <div>A<br>A</div>

    <div>A<br>A</div>

  </div>

</article>

<article id=test>

  <div>

    <div>A<br>A</div>

    <div>A<br>A</div>

  </div>

</article>

<!--

Having two blocks to avoid making browsers that don't support forced break at all fail.

Since containment is supposed to have no effect, failing such browsers would not be useful.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002-expected.html

<!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

    {

      float: left;

    }

  img

    {

      vertical-align: top;

    }

  </style>

  <p>Test passes if there is a) a blue square below a yellow square and b) an orange square on the righthand side of the yellow square.

  <div><img src="support/swatch-yellow.png" width="100" height="100" alt="Image download support must be enabled"><br><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>

  <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS-contain test: layout containment and forced breaks</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

  <meta content="" name="flags">

  <meta content="forced breaks within layout containment do not propagate to the parent." name="assert">

  <link href="reference/contain-layout-breaks-002-ref.html" rel="match">

  <link href="https://drafts.csswg.org/css-contain-1/#containment-layout" rel="help">

  <link href="https://drafts.csswg.org/css-break-3/#forced-break" rel="help">

  <style>

  article

    {

      column-fill: auto; /* columns are filled sequentially */

      column-gap: 0em;

      columns: 2 100px; /* 2 columns each 100px wide */

      float: left; /* to make multi-column element shrink-wrap */

      height: 400px; /* give more than enough to go wrong */

    }

  div#yellow-normal

    {

      border-top: yellow solid 100px;

    }

  div#blue-parent

    {

      border-top: blue solid 100px;

      contain: layout;

    }

  div#orange-child

    {

      border-top: orange solid 100px;

      break-before: column;

    }

  </style>

  <p>Test passes if there is a) a blue square below a yellow square and b) an orange square on the righthand side of the yellow square.

  <article>

    <div id="yellow-normal"></div>

    <div id="blue-parent">

      <div id="orange-child"></div>

    </div>

  </article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div.fakeButton {

  display: inline-block;

  border: 5px solid green;

  padding: 0;

  margin-bottom: 2px;

  color: transparent;

  width: 0;

  height: 0px;

  /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */

  position: relative;

  z-index: 1;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>

before<div class="fakeButton"></div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment on button</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">

<link rel="match" href="reference/contain-layout-button-001-ref.html">

<meta name=assert content="Layout containment does apply to buttons, thus their baseline is their margin-bottom edge.">

<style>

button {

  border: 5px solid green;

  padding: 0;

  /* We use a nonzero margin-bottom to be sure we're synthesizing a baseline

     from the margin-box rather than from the border-box: */

  margin-bottom: 2px;

  contain: layout;

  color: transparent;

  width: 0;

  height: 0;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p>

before<button>b</button>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001-expected.html

<!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>

  table

    {

      background-color: blue;

      border-spacing: 2px;

      height: 206px;

      table-layout: fixed;

      width: 206px;

    }

  td

    {

      background-color: white;

      padding: 0px;

      vertical-align: baseline;

    }

  span

    {

      background-color: green;

      color: white;

      font-family: monospace;

      vertical-align: top;

    }

  </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><span>PASS</span>

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' 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 div#contain should act as the containing block for div#abs-pos ." name="assert">

  <meta name="flags" content="">

  <style>

  div#table

    {

      background-color: blue;

      border-spacing: 2px;

      display: table;

      height: 206px;

      table-layout: fixed;

      width: 206px;

    }

  div.row

    {

      display: table-row;

    }

  div.cell

    {

      background-color: white;

      display: table-cell;

      vertical-align: top;

    }

  div#contain

    {

      contain: layout;

    }

  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>.

  <div id="table">

    <div class="row"><div class="cell">&nbsp;</div><div class="cell">&nbsp;</div></div>

    <div class="row"><div class="cell">&nbsp;</div><div class="cell" id="contain"><span>FAIL</span><div id="abs-pos">PASS</div></div></div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002-expected.html

<!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>

  table

    {

      background-color: blue;

      border-spacing: 2px;

      height: 206px;

      table-layout: fixed;

      width: 206px;

    }

  td

    {

      background-color: white;

      padding: 0px;

      vertical-align: baseline;

    }

  span

    {

      background-color: green;

      color: white;

      font-family: monospace;

      vertical-align: top;

    }

  </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><span>PASS</span>

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' 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: layout;

    }

  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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001-expected.html

<!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>

  #a {

      width: 100px;

      height: 100px;

      background: green;

      margin: 50px;

  }

  </style>

</head>

<body>

  <div id="a"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' element should contain absolute position elements.</title>

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

  <link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">

  <style>

  #a {

      contain: layout;

      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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001-expected.html

<!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>

  #a {

      width: 100px;

      height: 100px;

      background: green;

      margin: 50px;

  }

  </style>

</head>

<body>

  <div id="a"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' element should contain fixed position elements.</title>

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

  <link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">

  <style>

  #a {

      contain: layout;

      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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div {

  display: inline-flex;

  border: 5px solid green;

  /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */

  position: relative;

  z-index: 1;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>

before<div></div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment on flexbox container</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="reference/contain-layout-flexbox-001-ref.html">

<meta name=assert content="Layout containment does apply to flexbox containers, thus their baseline is the same than if they don't have contents.">

<style>

div {

  display: inline-flex;

  border: 5px solid green;

  contain: layout;

  color: transparent;

  width: 0;

  height: 0;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>

before<div>f</div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001-expected.html

<!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>

  #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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' should contain floats as a formatting context.</title>

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="match" href="contain-paint-formatting-context-float-001-ref.html">

  <style>

  #left {

    float: left;

    height: 50px;

    width: 10px;

    background: blue;

  }

  #a {

    contain: layout;

    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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001-expected.html

<!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">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  #a {

      background: blue;

      margin: 10px;

      width: 50px;

      height: 50px;

  }

  #b {

      width: 50px;

      height: 40px;

      background: green;

  }

  #b-padding {

      height: 10px;

  }

  #c {

    width: 50px;

    height: 10px;

    background: lightblue;

  }

  </style>

</head>

<body>

  <div id="a">

    <div id="b-padding"></div>

    <div id="b"></div>

    <div id="c"></div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' with a vertical margin child. Margin collapse should not occur, and neither should overflow clipping.</title>

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="match" href="contain-layout-formatting-context-margin-001-ref.html">

  <style>

  #a {

      contain:layout;

      background: blue;

      margin: 10px;

      width: 50px;

      height: 50px;

  }

  #b {

      width: 50px;

      height: 40px;

      background: green;

      margin-top: 10px;

  }

  #c {

      background: lightblue;

      width: 50px;

      height: 10px;

  }

  </style>

</head>

<body>

  <div id="a">

    <div id="b"></div>

    <div id="c"></div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div {

  display: inline-grid;

  border: 5px solid green;

  /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */

  position: relative;

  z-index: 1;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>

before<div></div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment on grid container</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="reference/contain-layout-grid-001-ref.html">

<meta name=assert content="Layout containment does apply to grid containers, thus their baseline is the same than if they don't have contents.">

<style>

div {

  display: inline-grid;

  border: 5px solid green;

  contain: layout;

  color: transparent;

  width: 0;

  height: 0;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p>

before<div>g</div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022-expected.html

<!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

    {

      color: transparent;

      float: left;

      font-size: 16px;

      padding: 8px;

    }

  div#blue-rectangle

    {

      background-color: blue;

      margin: 8px;

      width: 6em;

    }

  div#orange-rectangle

    {

      background-color: orange;

      width: 12em;

    }

  </style>

  <p>Test passes if the orange rectangle and blue rectangle do not overlap.

  <div id="blue-rectangle">Some text in a blue rectangle.</div>

  <div id="orange-rectangle">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' and creation of an independent formating context: text no longer flowing around 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/#containment-layout">

  <link rel="match" href="reference/contain-layout-ifc-022-ref.html">

  <meta content="This test checks that an element with 'contain: layout' will make such element create its own formatting context. In this test, the element with 'contain: layout' acts as if it has its own formatting context independent from div#floated-left element. In other words, the div#with-contain-layout is no longer required to flow its content around the div#floated-left element and current line boxes next to the float are no longer shortened to make room for the margin box of the float." name="assert">

  <meta name="flags" content="">

  <style>

  div

    {

      color: transparent;

      font-size: 16px;

      padding: 8px;

    }

  div#floated-left

    {

      background-color: blue;

      float: left;

      margin: 8px;

      width: 6em;

    }

  div#with-contain-layout

    {

      background-color: orange;

      contain: layout;

      width: 12em;

    }

  </style>

  <p>Test passes if the orange rectangle and blue rectangle do not overlap.

  <!--

  or

  <p>Test passes if the orange rectangle and blue rectangle are side by side.

  or

  <p>Test passes if the orange rectangle and blue rectangle are apart from each other.

  -->

  <div id="floated-left">Some text in a blue rectangle.</div>

  <div id="with-contain-layout">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001-expected.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <style>

    .abspos-box {

      position: absolute;

      width: 200px;

      height: 200px;

    }

    /* The boxes should stack in the order that I've listed their CSS classes

       here.  The class names' first word (outside/before/inside/after) refers

       to the boxes' DOM position, and "background"/"midground"/"foreground"

       refers to their z-index values. */

    .before-IB-background {

      background: darkmagenta;

      z-index: -1;

      top: 50px;

      left: 50px;

    }

    .after-IB-background {

      background: magenta;

      z-index: -1;

      top: 70px;

      left: 70px;

    }

    .outside-span-midground {

      background: darkkhaki;

      top: 90px;

      left: 90px;

    }

    .inside-IB-midground {

      background: khaki;

      top: 110px;

      left: 110px;

    }

    .before-IB-foreground {

      background: darkcyan;

      z-index: 1;

      top: 130px;

      left: 130px;

    }

    .after-IB-foreground {

      background: cyan;

      z-index: 1;

      top: 150px;

      left: 150px;

    }

  </style>

</head>

<body>

  <!-- The expectation here is that 'abspos-box' elements will all interact in

       the same top-level stacking context. That means the box ordering should

       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,

       with the boxes stacked (visually) from top-left to bottom-right. -->

  <div class="abspos-box outside-span-midground"></div>

  <!-- Note: this file is identical to the testcase,

       except for the lack of "contain: layout" on this span. -->

  <span>

    <div class="abspos-box before-IB-background"></div>

    <div class="abspos-box before-IB-foreground"></div>

    <!-- This unstyled div crates the IB split: -->

    <div>

      <div class="abspos-box inside-IB-midground"></div>

    </div>

    <div class="abspos-box after-IB-background"></div>

    <div class="abspos-box after-IB-foreground"></div>

  </span>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' should have no effect on non-atomic inline

         (including its block part, if there's a block-in-inline split)</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="match" href="contain-layout-ignored-cases-ib-split-001-ref.html">

  <style>

    .abspos-box {

      position: absolute;

      width: 200px;

      height: 200px;

    }

    /* The boxes should stack in the order that I've listed their CSS classes

       here.  The class names' first word (outside/before/inside/after) refers

       to the boxes' DOM position, and "background"/"midground"/"foreground"

       refers to their z-index values. */

    .before-IB-background {

      background: darkmagenta;

      z-index: -1;

      top: 50px;

      left: 50px;

    }

    .after-IB-background {

      background: magenta;

      z-index: -1;

      top: 70px;

      left: 70px;

    }

    .outside-span-midground {

      background: darkkhaki;

      top: 90px;

      left: 90px;

    }

    .inside-IB-midground {

      background: khaki;

      top: 110px;

      left: 110px;

    }

    .before-IB-foreground {

      background: darkcyan;

      z-index: 1;

      top: 130px;

      left: 130px;

    }

    .after-IB-foreground {

      background: cyan;

      z-index: 1;

      top: 150px;

      left: 150px;

    }

  </style>

</head>

<body>

  <!-- The expectation here is that 'abspos-box' elements will all interact in

       the same top-level stacking context. That means the box ordering should

       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,

       with the boxes stacked (visually) from top-left to bottom-right. -->

  <div class="abspos-box outside-span-midground"></div>

  <span style="contain: layout">

    <div class="abspos-box before-IB-background"></div>

    <div class="abspos-box before-IB-foreground"></div>

    <!-- This unstyled div crates the IB split: -->

    <div>

      <div class="abspos-box inside-IB-midground"></div>

    </div>

    <div class="abspos-box after-IB-background"></div>

    <div class="abspos-box after-IB-foreground"></div>

  </span>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

      height: 100px;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      display: contents;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

      height: 100px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 300px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1"></div>

  <div id="div2">

    <div id="div2_1"></div>

    <div id="div2_2"></div>

  </div>

  <div id="div3"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' should not create a stacking context when no principle box is generated.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

      height: 100px;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      display: contents;

      contain: layout;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

      height: 100px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 300px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1"></div>

  <div id="div2">

    <div id="div2_1"></div>

    <div id="div2_2"></div>

  </div>

  <div id="div3"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-expected.html

<!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">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  #a {

      display: contents;

      width: 100px;

      height: 100px;

      background: green;

      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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

  <link rel="match" href="contain-layout-ignored-cases-no-principal-box-002-ref.html">

  <style>

  #a {

      contain: layout;

      display: contents;

      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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-expected.html

<!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">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  #a {

    display: contents;

    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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

  <link rel="match" href="contain-layout-ignored-cases-no-principal-box-003-ref.html">

  <style>

  #a {

    contain: layout;

    display: contents;

    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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment independent formatting context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">

<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks.">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 1em 0; contain: layout;">

    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment independent formatting context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">

<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to inline blocks.">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <span style="display: inline-block; margin: 1em 0; vertical-align: top; contain: layout;">

    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

  </span>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Layout containment independent formatting context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">

<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">

<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <span style="margin: 1em 0; contain: layout;">

    <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>

  </span>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013-expected.html

<!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

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      overflow: scroll;

      width: 4ch;

    }

  </style>

 <body>

  <p>Test passes if there is no red.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' and ink overflow</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-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-013-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">

  <style>

  div#outer

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      line-height: 1.5; /* computes to 150px */

      width: 4ch;

      overflow: scroll;

    }

  div#inner

    {

      color: red;

      contain: layout;

      width: 0;

    }

  </style>

 <body onload="document.getElementById('outer').scrollLeft = 4000;">

  <p>Test passes if there is no red.

  <div id="outer">

    <div id="inner">&nbsp;&nbsp;&nbsp;&nbsp;FAIL</div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014-expected.html

<!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

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      overflow: scroll;

      width: 4ch;

    }

  </style>

 <body>

  <p>Test passes if there is no red.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' and ink overflow</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-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-013-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">

  <style>

  div#outer

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      line-height: 1.5; /* computes to 150px */

      width: 4ch;

      overflow: scroll;

    }

  div#inner

    {

      color: red;

      contain: layout;

      height: 0;

    }

  </style>

  <!--

  150px : height of 1 line box

  -->

 <body onload="document.getElementById('outer').scrollLeft = 250; document.getElementById('outer').scrollTop = 150;">

  <p>Test passes if there is no red.

  <div id="outer">

    <div id="inner">&nbsp;<br>FAIL</div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015-expected.html

<!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/">

 <body>

  <p>Test passes if there is no red.

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' and ink overflow</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-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-015-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">

  <style>

  div#outer

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      line-height: 1.5; /* computes to 150px */

      width: 4ch;

      overflow: auto;

    }

  div#inner

    {

      color: red;

      contain: layout;

      width: 0;

    }

  </style>

 <body onload="document.getElementById('outer').scrollLeft = 4000;">

  <p>Test passes if there is no red.

  <div id="outer">

    <div id="inner">&nbsp;&nbsp;&nbsp;&nbsp;FAIL</div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016-expected.html

<!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/">

 <body>

  <p>Test passes if there is no red.

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' and ink overflow</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-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-015-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">

  <style>

  div#outer

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      line-height: 1.5; /* computes to 150px */

      width: 4ch;

      overflow: auto;

    }

  div#inner

    {

      color: red;

      contain: layout;

      height: 0;

    }

  </style>

  <!--

  150px : height of 1 line box

  -->

 <body onload="document.getElementById('outer').scrollLeft = 250; document.getElementById('outer').scrollTop = 150;">

  <p>Test passes if there is no red.

  <div id="outer">

    <div id="inner">&nbsp;<br>FAIL</div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017-expected.html

<!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

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      overflow: scroll;

      width: 4ch;

    }

  </style>

 <body>

  <p>Test passes if there is no red.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' and ink overflow</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-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-013-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">

  <style>

  div#outer

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      line-height: 1.5; /* computes to 150px */

      width: 4ch;

      overflow: scroll;

    }

  div#inner

    {

      color: red;

      contain: layout;

      height: 0;

      width: 0;

    }

  </style>

  <!--

  150px : height of 1 line box

  -->

 <body onload="document.getElementById('outer').scrollLeft = 4000; document.getElementById('outer').scrollTop = 150;">

  <p>Test passes if there is no red.

  <div id="outer">

    <div id="inner"><br>FAIL</div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018-expected.html

<!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/">

 <body>

  <p>Test passes if there is no red.

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: layout' and ink overflow</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-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-015-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">

  <style>

  div#outer

    {

      font-family: monospace;

      font-size: 100px;

      height: 2.8ch;

      line-height: 1.5; /* computes to 150px */

      width: 4ch;

      overflow: auto;

    }

  div#inner

    {

      color: red;

      contain: layout;

      height: 0;

      width: 0;

    }

  </style>

  <!--

  150px : height of 1 line box

  -->

 <body onload="document.getElementById('outer').scrollLeft = 4000; document.getElementById('outer').scrollTop = 150;">

  <p>Test passes if there is no red.

  <div id="outer">

    <div id="inner"><br>FAIL</div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019-expected.html

<!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#parent

    {

      height: 100px;

      width: 100px;

      overflow: scroll;

    }

  div#child

    {

      background-color: green;

      height: 100px;

      width: 100px;

    }

  </style>

  <body onload="document.getElementById('parent').scrollLeft = 100; document.getElementById('parent').scrollTop = 125;">

  <p>Test passes if there is a filled green square <strong>with 2 scroll bars</strong> and if there is <strong>no red</strong>.

  <div id="parent">

    <div id="child"></div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Test: 'contain: layout' on element that overflows and its parent has 'overflow: scroll'</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-019-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: scroll'." name="assert">

  <style>

  div

    {

      height: 100px;

      width: 100px;

    }

    /* this means that each and all 4 div's use the same definite height and width */

  div#parent-with-overflow-scroll

    {

      overflow: scroll;

    }

  div#contain

    {

      contain: layout;

    }

  div#pass

    {

      background-color: green;

    }

  div#fail

    {

      background-color: red;

    }

  </style>

  <!--

    25px  : height of a very tall horizontal scrollbar

 +

   100px  : height of div#fail

  =======

   125px

  -->

  <body onload="document.getElementById('parent-with-overflow-scroll').scrollLeft = 100; document.getElementById('parent-with-overflow-scroll').scrollTop = 125;">

  <p>Test passes if there is a filled green square <strong>with 2 scroll bars</strong> and if there is <strong>no red</strong>.

  <div id="parent-with-overflow-scroll">

    <div id="contain">

      <div id="pass"></div>

      <div id="fail"></div>

    </div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020-expected.html

<!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

    {

      background-color: green;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green square, <strong>no scrollbar around it</strong> and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Test: 'contain: layout' on element that overflows and its parent has 'overflow: auto'</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">

  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">

  <link rel="match" href="reference/contain-layout-ink-overflow-020-ref.html">

  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its overflowing content must be treated as ink overflow. Such overflowing content therefore can not be reached and can not be accessed by the scrollbars or by the scrolling mechanism of the parent of such element. In this test, the parent has 'overflow: auto' and therefore will not create scrollbars or a scrolling mechanism because the ink overflow is not a scrollable region for the parent." name="assert">

  <style>

  div

    {

      height: 100px;

      width: 100px;

    }

    /* this means that each and all 4 div's use the same definite height and width */

  div#parent-with-overflow-auto

    {

      overflow: auto;

    }

  div#contain

    {

      contain: layout;

    }

  div#pass

    {

      background-color: green;

    }

  div#fail

    {

      background-color: red;

    }

  </style>

  <!--

    25px  : height of a very tall horizontal scrollbar

 +

   100px  : height of div#fail

  =======

   125px

  -->

  <body onload="document.getElementById('parent-with-overflow-auto').scrollLeft = 100; document.getElementById('parent-with-overflow-auto').scrollTop = 125;">

  <p>Test passes if there is a filled green square, <strong>no scrollbar around it</strong> and <strong>no red</strong>.

  <div id="parent-with-overflow-auto">

    <div id="contain">

      <div id="pass"></div>

      <div id="fail"></div>

    </div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .outer {

    height: 100px;

    width: 100px;

  }

  .auto {

    overflow: auto;

  }

  .inner-sm {

    height: 50px;

    width: 50px;

    background: lightblue;

  }

  .inner-lg-1 {

    height: 95px;

    width: 95px;

    background: lightblue;

  }

  .inner-lg-2 {

    height: 200px;

    width: 200px;

  }

  .pass {

    background: green;

  }

  .border {

    border: 5px solid green;

  }

  </style>

</head>

<body>

  <div class="outer">

    <div class="inner-sm"></div>

  </div>

  <br>

  <div class="outer auto">

    <div class="inner-lg-2 pass">

    </div>

  </div>

  <br>

  <div class="inner-sm border">

    <div class="inner-lg-1">

    </div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' should force all overflow to be ink overflow.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="match" href="contain-layout-overflow-001-ref.html">

  <style>

  .contain {

    contain: layout;

  }

  .outer {

    height: 100px;

    width: 100px;

  }

  .auto {

    overflow: auto;

  }

  .inner-sm {

    height: 50px;

    width: 50px;

    background: lightblue;

  }

  .inner-lg {

    height: 200px;

    width: 200px;

    background: lightblue;

  }

  .pass {

    background: green;

  }

  .fail {

    background: red;

  }

  .border {

    border: 5px solid green;

  }

  </style>

</head>

<body>

  <!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. -->

  <div class="outer">

    <div class="inner-sm contain"></div>

  </div>

  <br>

  <!--CSS Test: Layout-contained elements that overflow their container and have children who overflow should produce the same amount of scrollable overflow as if there were no children. -->

  <div class="outer auto">

    <div class="inner-lg contain">

      <div class="inner-lg pass"></div>

      <div class="inner-lg fail"></div>

    </div>

  </div>

  <br>

  <!--CSS Test: Layout-contained elements that do not overflow their container, but have children who overflow, should not allow their children to affect the scrollable overflow regions of their parent. -->

  <div class="outer auto">

    <div class="inner-sm contain border">

      <div class="inner-lg">

      </div>

    </div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .outer {

    height: 100px;

    width: 100px;

  }

  .auto {

    overflow: auto;

  }

  .inner-sm {

    height: 50px;

    width: 50px;

    background: lightblue;

  }

  .inner-lg-1 {

    height: 95px;

    width: 95px;

    float:left;

    background: lightblue;

  }

  .inner-lg-2 {

    height: 200px;

    width: 200px;

    float:left;

  }

  .pass {

    background: green;

  }

  .border {

    border: 5px solid green;

  }

  </style>

</head>

<body>

  <div class="outer">

    <div class="inner-sm" style="float:left;"></div>

  </div>

  <br>

  <div class="outer auto">

    <div class="inner-lg-2 pass">

    </div>

  </div>

  <br>

  <div class="inner-sm border">

    <div class="inner-lg-1">

    </div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' should force all overflow to be ink overflow (including when the overflow comes from floated descendants)</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="match" href="contain-layout-overflow-002-ref.html">

  <style>

  .contain {

    contain: layout;

  }

  .float { float: left; }

  .outer {

    height: 100px;

    width: 100px;

  }

  .auto {

    overflow: auto;

  }

  .inner-sm {

    height: 50px;

    width: 50px;

    background: lightblue;

  }

  .inner-lg {

    height: 200px;

    width: 200px;

    background: lightblue;

  }

  .pass {

    background: green;

  }

  .fail {

    background: red;

  }

  .border {

    border: 5px solid green;

  }

  </style>

</head>

<body>

  <!--CSS Test: Elements with contain:layout that do not produce scrollable overflow should paint as if containment were not applied. -->

  <div class="outer">

    <div class="inner-sm contain float"></div>

  </div>

  <br>

  <!--CSS Test: Layout-contained elements that overflow their container and have children who overflow should produce the same amount of scrollable overflow as if there were no children. -->

  <div class="outer auto">

    <div class="inner-lg contain">

      <div class="inner-lg pass float"></div>

      <div class="inner-lg fail float"></div>

    </div>

  </div>

  <br>

  <!--CSS Test: Layout-contained elements that do not overflow their container, but have children who overflow, should not allow their children to affect the scrollable overflow regions of their parent. -->

  <div class="outer auto">

    <div class="inner-sm contain border">

      <div class="inner-lg float">

      </div>

    </div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003-expected.html

<!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

    {

      color: transparent;

      float: left;

      font-size: 16px;

      padding: 8px;

    }

  div#blue-rectangle

    {

      background-color: blue;

      margin: 8px;

      width: 6em;

    }

  div#orange-rectangle

    {

      background-color: orange;

      height: 0px;

      width: 12em;

    }

  </style>

  <p>Test passes if the orange rectangle and blue rectangle do not overlap.

  <div id="blue-rectangle">Some text in a blue rectangle.</div>

  <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: a block with 'contain: layout size' 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-size-003-ref.html">

  <meta name="flags" content="">

  <style>

  div

    {

      color: transparent;

      font-size: 16px;

      padding: 8px;

    }

  div#floated-left

    {

      background-color: blue;

      float: left;

      margin: 8px;

      width: 6em;

    }

  div#with-contain-layout-size

    {

      background-color: orange;

      width: 12em;

      contain: layout size;

    }

  </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-layout-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      z-index: 1;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 100px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1">

    <br/><br/>

  </div>

  <div id="div2">

    <div id="div2_1">

      <br/><br/>

    </div>

    <div id="div2_2">

    </div>

  </div>

  <div id="div3">

    <br/><br/>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' with stacking contents. Z-index is defined only for siblings and children.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="match" href="contain-paint-stacking-context-001-ref.html">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      contain: layout;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 100px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1">

    <br/><br/>

  </div>

  <div id="div2">

    <div id="div2_1">

      <br/><br/>

    </div>

    <div id="div2_2">

    </div>

  </div>

  <div id="div3">

    <br/><br/>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001-expected.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <style>

  .flexBaselineCheck {

    display: flex;

    border: 1px solid black;

    height: 100px;

  }

  .flexBaselineCheck > * {

    border: 2px solid teal;

    /* In the testcase, the (baseline-aligned) items should all have their

       bottom borders aligned with the 80px-tall canvas.  In other words, their

       bottom borders should all be 20px away from the bottom of their flex

       container.  Here in the reference case, we just use "flex-end" alignment

       plus a hardcoded 20px margin-bottom to produce a precise reference

       for what that should look like. */

    align-self: flex-end;

    margin-bottom: 20px;

  }

  canvas {

    background: purple;

    width: 20px;

    height: 80px;

    box-sizing: border-box;

  }

  .flex {

    display: flex;

  }

  .grid {

    display: grid;

  }

  .multicol {

    column-count: 2;

  }

  </style>

</head>

<body>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <div>block</div>

    <fieldset><legend>leg</legend>fieldset</fieldset>

    <div class="flex">flex</div>

    <div class="grid">grid</div>

    <div class="multicol">multi<br>col</div>

    <details open><summary>summary</summary>details</details>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">

  <link rel="match" href="contain-layout-suppress-baseline-001-ref.html">

  <style>

  .flexBaselineCheck {

    display: flex;

    border: 1px solid black;

    height: 100px;

  }

  .flexBaselineCheck > * {

    contain: layout;

    border: 2px solid teal;

    align-self: baseline;

  }

  canvas {

    background: purple;

    width: 20px;

    height: 80px;

    box-sizing: border-box;

  }

  .flex {

    display: flex;

  }

  .grid {

    display: grid;

  }

  .multicol {

    column-count: 2;

  }

  </style>

</head>

<body>

  <div class="flexBaselineCheck">

    <!-- This canvas just exists to establish a precise, far-down baseline

         alignment position: -->

    <canvas></canvas>

    <!-- "contain:layout" should force all the elements below to behave as if

         they have no baseline. That means they all should *synthesize* a

         baseline from their border-box edge, in order to participate in flex

         item baseline alignment (to honor the outer flex container's

         "align-items:baseline"). So, the expectation here is that all of these

         elements' border-bottom edges should be aligned. -->

    <div>block</div>

    <fieldset><legend>leg</legend>fieldset</fieldset>

    <div class="flex">flex</div>

    <div class="grid">grid</div>

    <div class="multicol">multi<br>col</div>

    <details open><summary>summary</summary>details</details>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002-expected.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <style>

  .flexBaselineCheck {

    display: flex;

    border: 1px solid black;

  }

  .flexBaselineCheck > * {

    border: 2px solid teal;

    /* In the testcase, the (baseline-aligned) items should all have their

       bottom borders aligned with the 50px-tall canvas.  In other words, their

       bottom borders should all be aligned at the bottom of their flex

       container, separated from the bottom by only by their margin-end

       distance.  Here in the reference case, we just use "flex-end" alignment

       (plus the same amount of margin) to produce a precise reference for what

       that should look like. */

    align-self: flex-end;

    margin: 2px;

  }

  canvas {

    background: purple;

    width: 20px;

    height: 50px;

    box-sizing: border-box;

  }

  </style>

</head>

<body>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <button>btn</button>

    <input type="button" value="i-btn">

    <input type="submit" value="i-sub">

  </div>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <input type="text" value="text">

    <input type="number" value="0">

  </div>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <input type="date">

    <input type="time">

  </div>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <input type="file">

    <textarea>textarea</textarea>

  </div>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <select><option>dropdown</option></select>

    <select multiple style="max-height:40px"><option>multi</option></select>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">

  <link rel="match" href="contain-layout-suppress-baseline-002-ref.html">

  <style>

  .flexBaselineCheck {

    display: flex;

    border: 1px solid black;

  }

  .flexBaselineCheck > * {

    contain: layout;

    border: 2px solid teal;

    align-self: baseline;

    margin: 2px;

  }

  canvas {

    background: purple;

    width: 20px;

    height: 50px;

    box-sizing: border-box;

  }

  </style>

</head>

<body>

  <div class="flexBaselineCheck">

    <!-- This canvas just exists to establish a precise, far-down baseline

         alignment position: -->

    <canvas></canvas>

    <!-- "contain:layout" should force all the elements below to behave as if

         they have no baseline. That means they all should *synthesize* a

         baseline from their border-box edge, in order to participate in flex

         item baseline alignment (to honor the outer flex container's

         "align-items:baseline"). So, the expectation here is that all of these

         elements' border-bottom edges should be aligned. -->

    <button>btn</button>

    <input type="button" value="i-btn">

    <input type="submit" value="i-sub">

  </div>

  <!-- Same as above, but with different form controls:

       (split into multiple flex containers so as not to be too wide): -->

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <input type="text" value="text">

    <input type="number" value="0">

  </div>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <input type="date">

    <input type="time">

  </div>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <input type="file">

    <textarea>textarea</textarea>

  </div>

  <div class="flexBaselineCheck">

    <canvas></canvas>

    <select><option>dropdown</option></select>

    <select multiple style="max-height:40px"><option>multi</option></select>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment use the padding edge</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

div {

  width: 100px;

  height: 100px;

  background: blue;

  padding: 50px;

  border-radius: 100px;

  overflow: hidden

}

div::before {

  content:"";

  display: block;

  background: green;

  width: 100px;

  height: 100px;

}

</style>

<p>Test passes if there is a green square in a rounded blue box, and no red.

<div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment use the padding edge</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="paint containment clips at the padding edge, not content edge, and takes corner clipping into account">

  <link rel="match" href="reference/contain-paint-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<style>

div {

  width: 100px;

  height: 100px;

  background: blue;

  padding: 50px;

  border-radius: 100px;

  contain: paint;

}

div::before {

 content:"";

 display: block;

 background: green;

 width: 100px;

 height: 100px;

}

div::after {

  content:"";

  display: block;

  background: red;

  width: 50px;

  height: 50px;

  margin-top: 38px;

  margin-left: -50px;

}

</style>

<p>Test passes if there is a green square in a rounded blue box, and no red.

<div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment on non-atomic inlines</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="paint containment does not apply to non atomic inlines">

  <link rel="match" href="../reference/pass_if_pass_below.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<style>

span {

  contain: paint;

  width: 0; /* Because if the test fails, the span may get blockified, and which would make wide enough to hold the PASS */

}

span::after {

  content: "PASS";

  position: absolute;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span></span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment applies to the principal box for list items</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="paint containment applies to the principal box, which for list items excludes the list marker">

  <link rel="match" href="../reference/nothing.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<style>

li { contain: paint; }

</style>

<p>There should be nothing below.</p>

<ol>

  <li>

  <li>

  <li>

  <li>

  <li>

  <li>

</ol>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment on ruby-base</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="paint containment does not apply to ruby-base">

  <link rel="match" href="../reference/pass_if_pass_below.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<style>

rb {

  contain: paint;

  display: ruby-base;

  width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */

}

rb::after {

  content: "PASS";

  position: absolute;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><ruby><rb></rb></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment on ruby-base-container</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="paint containment does not apply to ruby-base-container">

  <link rel="match" href="../reference/pass_if_pass_below.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<style>

rbc {

  contain: paint;

  display: ruby-base-container;

  width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */

}

rbc::after {

  content: "PASS";

  position: absolute;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><ruby><rbc></rbc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

rtc {

  display: ruby-text-container;

  font-size: 1rem;

}

rtc::after {

  content: "PASS";

  position: absolute;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rtc></rtc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment on ruby-text-container</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="paint containment does not apply to ruby-text-container">

  <link rel="match" href="reference/contain-paint-007-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<style>

rtc {

  contain: paint;

  display: ruby-text-container;

  width: 0; /* Because if the test fails, this may get blockified, and which could make wide enough to hold the PASS */

  font-size: 1rem;

}

rtc::after {

  content: "PASS";

  position: absolute;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rtc></rtc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment on ruby-text</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

rt {

  display: -webkit-ruby-text;

  font-size: 1rem;

  font-family: monospace;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rt><span style="margin-left: 4ch;"></span>PASS</rt></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment on ruby-text</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="paint containment does not apply to ruby-text">

  <link rel="match" href="reference/contain-paint-008-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<style>

rt {

  contain: paint;

  display: -webkit-ruby-text;

  font-size: 1rem;

  font-family: monospace;

}

rt::after {

  content: "PASS";

  /* Doing the following instead of position:absolute to move it out into the area that would be

     clipped because Firefox clips absolutely positioned content of rt even in builds without

     support for css containment.

     Since this technique works also, there's no need to trigger a false negative.

   */

  position: relative;

  left: 4ch;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rt></rt></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment absolutely positioned descendants</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Paint containment makes an element to act as containing block for absolutely positioned descendants.">

<style>

#contain-paint {

  contain: paint;

  width: 100px;

  height: 100px;

  background: red;

}

#abspos {

  position: absolute;

  bottom: 0;

  right: 0;

  background: green;

  width: 100px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="contain-paint">

  <div id="abspos"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment fixed positioned descendants</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Paint containment makes an element to act as containing block for fixed positioned descendants.">

<style>

#contain-paint {

  contain: paint;

  width: 100px;

  height: 100px;

  background: red;

}

#fixed {

  position: fixed;

  bottom: 0;

  right: 0;

  background: green;

  width: 100px;

  height: 100px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="contain-paint">

  <div id="fixed"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment absolutely positioned descendants</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for absolutely positioned descendants.">

<style>

#containing-block {

  position: relative;

  background: red;

  width: 100px;

  height: 100px;

}

#contain-paint {

  contain: paint;

}

#abspos {

  position: absolute;

  bottom: 0;

  right: 0;

  background: green;

  width: 100%;

  height: 100%;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="containing-block">

  <span id="contain-paint">

    <div id="abspos"></div>

  </span>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment fixed positioned descendants</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for fixed positioned descendants.">

<style>

#containing-block {

  transform: translateX(0);

  background: red;

  width: 100px;

  height: 100px;

}

#contain-paint {

  contain: paint;

}

#fixed {

  position: fixed;

  bottom: 0;

  right: 0;

  background: green;

  width: 100%;

  height: 100%;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="containing-block">

  <span id="contain-paint">

    <div id="fixed"></div>

  </span>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment on table-cell</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/nothing.html">

<meta name=assert content="Paint containment does apply to table-cell elements.">

<style>

div {

  display: table-cell;

  contain: paint;

}

span {

  position: absolute;

}

</style>

<p>There should be nothing below.</p>

<div><span>FAIL</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment on table-row-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/pass_if_pass_below.html">

<meta name=assert content="Paint containment doesn't apply to table-row-group elements.">

<style>

div {

  display: table-row-group;

  contain: paint;

}

span {

  position: absolute;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span>PASS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment on table-header-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/pass_if_pass_below.html">

<meta name=assert content="Paint containment doesn't apply to table-header-group elements.">

<style>

div {

  display: table-header-group;

  contain: paint;

}

span {

  position: absolute;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span>PASS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment on table-footer-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/pass_if_pass_below.html">

<meta name=assert content="Paint containment doesn't apply to table-footer-group elements.">

<style>

div {

  display: table-footer-group;

  contain: paint;

}

span {

  position: absolute;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span>PASS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment on table-row</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/pass_if_pass_below.html">

<meta name=assert content="Paint containment doesn't apply to table-row elements.">

<style>

div {

  display: table-row;

  contain: paint;

}

span {

  position: absolute;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span>PASS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment on table-caption</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/nothing.html">

<meta name=assert content="Paint containment does apply to table-caption elements.">

<style>

div {

  display: table-caption;

  contain: paint;

}

span {

  position: absolute;

}

</style>

<p>There should be nothing below.</p>

<div><span>FAIL</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

   <link rel="author" title="Opera" href="https://www.opera.com/">

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment stacking context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/pass_if_pass_below.html">

<meta name=assert content="Paint containment elements create a stacking context.">

<style>

div {

  contain: paint;

  background: white;

}

span {

  position: relative;

  z-index: -1;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span>PASS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment stacking context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/nothing.html">

<meta name=assert content="Elements in which paint containment doesn't apply, do not create a stacking context.">

<style>

div {

  display: -webkit-ruby-text;

  contain: paint;

  background: white;

}

span {

  position: relative;

  z-index: -1;

}

</style>

<p>There should be nothing below.</p>

<div><span>FAIL</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022-expected.html

<!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

    {

      background-color: green;

      height: 100px;

      left: 100px;

      position: relative;

      top: 100px;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</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-paint">

  <link rel="match" href="reference/contain-paint-022-ref.html">

  <meta content="This test checks that paint containment applies to atomic inline elements and then they act as containing block for absolutely positioned descendants." name="assert">

  <meta name="flags" content="">

  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

  <style>

  div#incorrect-containing-block

    {

      color: transparent;

      font-family: Ahem;

      font-size: 100px;

      height: 2em;

      line-height: 1;

      position: relative;

      width: 2em;

    }

  div#correct-containing-block

    {

      background-color: red;

      contain: paint;

      display: inline-block;

      height: 1em;

      width: 1em;

    }

  div#abspos

    {

      background-color: green;

      height: 1em;

      left: 0;

      position: absolute;

      top: 0;

      width: 1em;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="incorrect-containing-block">

  AB C<div id="correct-containing-block">

      <div id="abspos"></div>

    </div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</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-paint">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <meta content="This test checks that paint containment applies to atomic inline elements so that they can act as containing block for absolutely positioned descendants." name="assert">

  <meta name="flags" content="">

  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

  <style>

  div#rel-pos-red

    {

      background-image: url("support/pattern-gg-gr-100x100.png");

      color: green;

      font-family: Ahem;

      font-size: 50px;

      height: 2em;

      line-height: 1;

      position: relative;

      width: 2em;

    }

  div#containing-block

    {

      contain: paint;

      display: inline-block;

      height: 50%;

      vertical-align: top;

      width: 50%;

    }

  div#abspos

    {

      background-color: green;

      height: 50px;

      position: absolute;

      left: 0px;

      width: 50px;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="rel-pos-red">

    AB C<div id="containing-block">

      <div id="abspos"></div>

    </div>

  </div>

  <!--

    |--------|

    |  A  B  |

    |    .---|

    |  C |c-b|

    |----|---|

  -->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</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-paint">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <meta content="This test checks that paint containment does not apply to non-atomic inline elements so they do not act as containing block for absolutely positioned descendants." name="assert">

  <meta name="flags" content="">

  <style>

  div#correct-containing-block

    {

      background-color: red;

      height: 100px;

      position: relative;

      width: 100px;

    }

  div#incorrect-containing-block

    {

      contain: paint;

      display: inline;

    }

  div#abspos

    {

      background-color: green;

      bottom: 0;

      height: 100%;

      position: absolute;

      right: 0;

      width: 100%;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="correct-containing-block">

    <div id="incorrect-containing-block">

      <div id="abspos"></div>

    </div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment stacking context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="../reference/nothing.html">

<meta name=assert content="Elements in which paint containment doesn't apply, do not create a stacking context.">

<style>

div {

  display: inline;

  contain: paint;

  background: white;

}

span {

  position: relative;

  z-index: -1;

}

</style>

<p>There should be nothing below.</p>

<div><span>FAIL</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047-expected.html

<!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

    {

      color: green;

      font-family: monospace;

      font-size: 100px;

  }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge</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-paint">

  <link rel="match" href="reference/contain-paint-047-ref.html">

  <meta content="This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge." name="assert">

  <meta name="flags" content="">

  <style>

  div

    {

      color: green;

      contain: paint;

      font-family: monospace;

      font-size: 100px;

      width: 4ch;

    }

  span

    {

      background-color: red;

      color: yellow;

    }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div>PASS<span>FAIL</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

 </head>

 <body>

  <p>Test passes if there is <strong>no red</strong>.</p>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge</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-paint">

  <link rel="match" href="reference/ref-if-there-is-no-red.xht">

  <meta content="This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge." name="assert">

  <meta name="flags" content="">

  <style>

  div

    {

      color: red;

      contain: paint;

      font-size: 100px;

      width: 0;

    }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div>FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001-expected.html

<!doctype html>

<html lang=en>

<meta charset=utf-8>

<title>CSS test reference</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

div {

  display: inline-block;

  height: 5px;

  background: blue;

  width: 50px;

  color: transparent;

  font-size: 100px;

}

</style>

<p>Test passes if there are two, not one, blue lines below.</p>

<div></div><div>a</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: paint containment and baselines</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=assert content="contain:paint does not suppress baseline alignment">

  <link rel="match" href="reference/contain-baseline-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">

  <meta name="flags" content="">

<style>

div {

  display: inline-block;

  height: 5px;

  background: blue;

  width: 50px;

  contain: paint;

  color: transparent;

  font-size: 100px;

}

</style>

<p>Test passes if there are two, not one, blue lines below.</p>

<div></div><div>a</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001-expected.html

<!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

    {

      color: green;

      font-family: monospace;

      font-size: 100px;

  }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' 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-paint">

  <link rel="match" href="reference/contain-paint-047-ref.html">

  <meta content="This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box." name="assert">

  <meta name="flags" content="">

  <style>

  div#table

    {

      display: table;

      font-family: monospace;

      font-size: 100px;

      table-layout: fixed;

      width: 4ch;

    }

  div.column

    {

      display: table-column;

    }

  div#middle-column

    {

      width: 4ch;

    }

  div.row

    {

      display: table-row;

    }

  div.cell

    {

      background-color: white;

      display: table-cell;

    }

  div#contain

    {

      color: green;

      contain: paint;

    }

  span

    {

      background-color: red;

      color: yellow;

    }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div id="table">

    <div class="column"></div><div class="column" id="middle-column"></div><div class="column"></div>

    <div class="row"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>

    <div class="row"><div class="cell"></div><div class="cell" id="contain">PASS<span>FAIL</span></div><div class="cell"></div></div>

    <div class="row"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002-expected.html

<!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

    {

      color: green;

      font-family: monospace;

      font-size: 100px;

  }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and 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-paint">

  <link rel="match" href="reference/contain-paint-047-ref.html">

  <meta content="This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box." name="assert">

  <meta name="flags" content="">

  <style>

  table

    {

      border-spacing: 0px;

      /* to help reuse an already created reference file */

      font-family: monospace;

      font-size: 100px;

      table-layout: fixed;

      width: 4ch;

    }

  td

    {

      padding: 0px;

      /* to help reuse an already created reference file */

    }

  col#middle-column

    {

      width: 4ch;

    }

  td#test

    {

      color: green;

      contain: paint;

  }

  span

    {

      background-color: red;

      color: yellow;

    }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <table>

    <col><col id="middle-column"><col>

    <tr><td><td><td>

    <tr><td><td id="test">PASS<span>FAIL</span><td>

    <tr><td><td><td>

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001-expected.html

<!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>

  #a {

      width: 150px;

      height: 150px;

      background: green;

      margin: 25px;

  }

  </style>

</head>

<body>

  <div id="a"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-clip-001-ref.html">

  <style>

  .root {

    contain: paint;

    width: 100px;

    height: 100px;

    background: blue;

    margin: 25px;

    padding: 25px;

  }

  .a {

    width: 100px;

    height: 200px;

    background: red;

  }

  .b {

    width: 150px;

    height: 150px;

    background: green;

    position: relative;

    top: -25px;

    left: -25px;

  }

  .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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <style>

  .root {

    overflow: hidden;

    width: 100px;

    height: 100px;

    background: green;

    margin: 25px;

    padding: 10px;

    border-radius: 4em;

  }

  </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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: paint' with overflowing text contents inside a rounded rectangle box.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-clip-002-ref.html">

  <style>

  .root {

    contain: paint;

    width: 100px;

    height: 100px;

    background: green;

    margin: 25px;

    padding: 10px;

    border-radius: 4em;

  }

  </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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003-expected.html

<!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>

  .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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-clip-003-ref.html">

  <style>

  .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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004-expected.html

<!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>

  .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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-clip-004-ref.html">

  <style>

  .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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005-expected.html

<!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>

  .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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-clip-003-ref.html">

  <style>

  ul {

    padding: 0;

    margin: 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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <style>

  .root {

    width: 100px;

    height: 100px;

    background: green;

    margin: 25px;

    padding: 25px;

    overflow: hidden;

    overflow-clip-box: content-box;

  }

  </style>

</head>

<body>

  <div class="root">

    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should

    be clipped to the content 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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: paint' with overflowing text contents while "overflow-clip-box: content-box" enabled.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-clip-006-ref.html">

  <style>

  .root {

    contain: paint;

    width: 100px;

    height: 100px;

    background: green;

    margin: 25px;

    padding: 25px;

    overflow-clip-box: content-box;

  }

  </style>

</head>

<body>

  <div class="root">

    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA This text should

    be clipped to the content 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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</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-paint">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta name="flags" content="">

  <style>

  div

    {

      width: 100px;

    }

  div#red-overlapped-test

    {

      background-color: red;

      contain: paint;

    }

  img

    {

      vertical-align: bottom;

    }

  div#green-overlapping-reference

    {

      background-color: green;

      bottom: 100px;

      height: 100px;

      position: relative;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="200" height="100" alt="Image download support must be enabled"></div>

  <div id="green-overlapping-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</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-paint">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta name="flags" content="">

  <style>

  div

    {

      height: 100px;

      width: 100px;

    }

  div#red-overlapped-test

    {

      background-color: red;

      contain: paint;

    }

  img

    {

      vertical-align: bottom;

    }

  div#green-overlapping-reference

    {

      background-color: green;

      bottom: 100px;

      position: relative;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="100" height="200" alt="Image download support must be enabled"></div>

  <div id="green-overlapping-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</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-paint">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta name="flags" content="">

  <style>

  div#red-overlapped-test

    {

      background-color: red;

      contain: paint;

      padding: 0px 25px;

      width: 50px;

    }

  img

    {

      vertical-align: bottom;

    }

  div#green-overlapping-reference

    {

      background-color: green;

      bottom: 100px;

      height: 100px;

      position: relative;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="175" height="100" alt="Image download support must be enabled"></div>

  <div id="green-overlapping-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</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-paint">

  <link rel="match" href="../reference/ref-filled-green-100px-square.xht">

  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta name="flags" content="">

  <style>

  div#red-overlapped-test

    {

      background-color: red;

      contain: paint;

      height: 50px;

      padding: 25px 0px;

      width: 100px;

    }

  img

    {

      vertical-align: bottom;

    }

  div#green-overlapping-reference

    {

      background-color: green;

      bottom: 100px;

      height: 100px;

      position: relative;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="red-overlapped-test"><img src="support/swatch-red.png" width="100" height="175" alt="Image download support must be enabled"></div>

  <div id="green-overlapping-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015-expected.html

<!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

    {

      background-color: green;

      border-radius: 50%;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</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-paint">

  <link rel="match" href="reference/contain-paint-clip-015-ref.html">

  <!--

  This test fails in Chromium 66.0.3359.117

  -->

  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta name="flags" content="">

  <style>

  div

    {

      border-radius: 50%;

      height: 50px;

      width: 50px;

    }

  div#red-container-circle

    {

      background-color: red;

      contain: paint;

      padding: 25px;

    }

  img

    {

      vertical-align: bottom;

    }

  div#green-overlapping-reference

    {

      background-color: green;

      bottom: 100px;

      height: 100px;

      position: relative;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div id="red-container-circle"><img src="support/swatch-red.png" width="175" height="100" alt="Image download support must be enabled"></div>

  <div id="green-overlapping-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016-expected.html

<!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

    {

      background-color: green;

      border-radius: 50%;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping descendants at padding edge</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-paint">

  <link rel="match" href="reference/contain-paint-clip-015-ref.html">

  <!--

  This test fails in Chromium 66.0.3359.117

  -->

  <meta content="This test checks that the paint of the descendant (a red square image) and its geometry is clipped to the padding edge of the element's principal box, taking corner clipping into account." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta name="flags" content="">

  <style>

  div#red-container-circle

    {

      background-color: red;

      border-radius: 50%;

      contain: paint;

      height: 50px;

      padding: 25px 0px;

      width: 100px;

    }

  img

    {

      vertical-align: bottom;

    }

  div#green-overlapping-reference

    {

      background-color: green;

      border-radius: 50%;

      bottom: 100px;

      height: 100px;

      position: relative;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div id="red-container-circle"><img src="support/swatch-red.png" width="100" height="175" alt="Image download support must be enabled"></div>

  <div id="green-overlapping-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017-expected.html

<!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

    {

      background-color: green;

      border-radius: 50%;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017.html

<!DOCTYPE html>

 <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge (generated ::before content)</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-paint">

  <link rel="match" href="reference/contain-paint-clip-015-ref.html">

  <meta content="This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta content="" name="flags">

  <style>

  div

    {

      background-color: green;

      border-radius: 100px;

      contain: paint;

      height: 50px;

      padding: 25px;

      width: 50px;

    }

  div::before

    {

      background-color: red;

      content: "";

      display: block;

      height: 18px;

      margin-left: 61px;

      margin-top: -28px;

      width: 18px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018-expected.html

<!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

    {

      background-color: green;

      border-radius: 50%;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018.html

<!DOCTYPE html>

 <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' and clipping at padding edge (generated ::after content)</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-paint">

  <link rel="match" href="reference/contain-paint-clip-015-ref.html">

  <meta content="This test checks that the paint containment of an element clips at its padding edge. In this test, the generated element (a red square image) is located outside the content edge, into what would have been the padding belt of the element." name="assert">

  <!--

  contain-paint-clip-011: content overflows horizontally, principal box has no padding

  contain-paint-clip-012: content overflows vertically, principal box has no padding

  contain-paint-clip-013: content overflows horizontally, principal box has horizontal padding

  contain-paint-clip-014: content overflows vertically, principal box has vertical padding

  contain-paint-clip-015: content overflow horizontally, principal box has horizontal padding and corner clipping is involved

  contain-paint-clip-016: content overflow vertically, principal box has vertical padding and corner clipping is involved

  contain-paint-clip-017: principal box has horizontal and vertical padding, generated ::before content is inside top-right corner

  contain-paint-clip-018: principal box has horizontal and vertical padding, generated ::after content is inside top-left corner

  -->

  <meta content="" name="flags">

  <style>

  div

    {

      background-color: green;

      border-radius: 100px;

      contain: paint;

      height: 50px;

      padding: 25px;

      width: 50px;

    }

  div::after

    {

      background-color: red;

      content: "";

      display: block;

      height: 18px;

      margin-left: -29px;

      margin-top: -28px;

      width: 18px;

    }

  </style>

  <p>Test passes if there is a filled green circle and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019-expected.html

<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Reference Test</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<style>

  #green {

    background-color: green;

    width: 100px;

    height: 100px;

  }

</style>

<p>Test passes if there there is a green square. No red and no scrollbars should be visible.</p>

<div id="green"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019.html

<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Containment Test: 'contain: paint' and clipping prevents scrollbars</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">

<link rel="match" href="reference/contain-paint-clip-019-ref.html">

<meta content="This test checks that the paint containment of an element clips contents.

  It should also prevent layout overflow from being propagated to ancestors." name="assert">

<meta content="" name="flags">

<style>

  #container {

    contain: paint;

    width: 100px;

    height: 100px;

  }

  #green {

    background-color: green;

    width: 100px;

    height: 100px;

  }

  #red {

    background-color: red;

    width: 100px;

    height: 10000px;

  }

</style>

<p>Test passes if there there is a green square. No red and no scrollbars should be visible.</p>

<div id="container">

  <div id="green"></div>

  <div id="red"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001-expected.html

<!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>

  #a {

      width: 100px;

      height: 100px;

      background: green;

      margin: 50px;

  }

  </style>

</head>

<body>

  <div id="a"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-containing-block-absolute-001-ref.html">

  <style>

  #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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001-expected.html

<!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>

  #a {

      width: 100px;

      height: 100px;

      background: green;

      margin: 50px;

  }

  </style>

</head>

<body>

  <div id="a"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-containing-block-fixed-001-ref.html">

  <style>

  #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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001-expected.html

<!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>

  #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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-formatting-context-float-001-ref.html">

  <style>

  #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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001-expected.html

<!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>

  #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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001.html

<!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="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">

  <style>

  #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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011-expected.html

<!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-bottom: 30px;

    }

  div

    {

      height: 30px;

    }

  div.orange

    {

      background-color: orange;

    }

  div.blue

    {

      background-color: blue;

    }

  div#lime

    {

      background-color: lime;

    }

  </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 class="orange"></div>

  <div class="blue"></div>

  <div id="lime"></div>

  <div class="blue"></div>

  <div class="orange"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' 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/#containment-paint">

  <link rel="match" href="reference/contain-paint-ifc-011-ref.html">

  <meta content="This test checks that a block element with 'contain: paint' 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: paint;

      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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001-expected.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <style>

    .abspos-box {

      position: absolute;

      width: 200px;

      height: 200px;

    }

    /* The boxes should stack in the order that I've listed their CSS classes

       here.  The class names' first word (outside/before/inside/after) refers

       to the boxes' DOM position, and "background"/"midground"/"foreground"

       refers to their z-index values. */

    .before-IB-background {

      background: darkmagenta;

      z-index: -1;

      top: 50px;

      left: 50px;

    }

    .after-IB-background {

      background: magenta;

      z-index: -1;

      top: 70px;

      left: 70px;

    }

    .outside-span-midground {

      background: darkkhaki;

      top: 90px;

      left: 90px;

    }

    .inside-IB-midground {

      background: khaki;

      top: 110px;

      left: 110px;

    }

    .before-IB-foreground {

      background: darkcyan;

      z-index: 1;

      top: 130px;

      left: 130px;

    }

    .after-IB-foreground {

      background: cyan;

      z-index: 1;

      top: 150px;

      left: 150px;

    }

  </style>

</head>

<body>

  <!-- The expectation here is that 'abspos-box' elements will all interact in

       the same top-level stacking context. That means the box ordering should

       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,

       with the boxes stacked (visually) from top-left to bottom-right. -->

  <div class="abspos-box outside-span-midground"></div>

  <!-- Note: this file is identical to the testcase,

       except for the lack of "contain: paint" on this span. -->

  <span>

    <div class="abspos-box before-IB-background"></div>

    <div class="abspos-box before-IB-foreground"></div>

    <!-- This unstyled div crates the IB split: -->

    <div>

      <div class="abspos-box inside-IB-midground"></div>

    </div>

    <div class="abspos-box after-IB-background"></div>

    <div class="abspos-box after-IB-foreground"></div>

  </span>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: paint' should have no effect on non-atomic inline

         (including its block part, if there's a block-in-inline split)</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-ignored-cases-ib-split-001-ref.html">

  <style>

    .abspos-box {

      position: absolute;

      width: 200px;

      height: 200px;

    }

    /* The boxes should stack in the order that I've listed their CSS classes

       here.  The class names' first word (outside/before/inside/after) refers

       to the boxes' DOM position, and "background"/"midground"/"foreground"

       refers to their z-index values. */

    .before-IB-background {

      background: darkmagenta;

      z-index: -1;

      top: 50px;

      left: 50px;

    }

    .after-IB-background {

      background: magenta;

      z-index: -1;

      top: 70px;

      left: 70px;

    }

    .outside-span-midground {

      background: darkkhaki;

      top: 90px;

      left: 90px;

    }

    .inside-IB-midground {

      background: khaki;

      top: 110px;

      left: 110px;

    }

    .before-IB-foreground {

      background: darkcyan;

      z-index: 1;

      top: 130px;

      left: 130px;

    }

    .after-IB-foreground {

      background: cyan;

      z-index: 1;

      top: 150px;

      left: 150px;

    }

  </style>

</head>

<body>

  <!-- The expectation here is that 'abspos-box' elements will all interact in

       the same top-level stacking context. That means the box ordering should

       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,

       with the boxes stacked (visually) from top-left to bottom-right. -->

  <div class="abspos-box outside-span-midground"></div>

  <span style="contain: paint">

    <div class="abspos-box before-IB-background"></div>

    <div class="abspos-box before-IB-foreground"></div>

    <!-- This unstyled div crates the IB split: -->

    <div>

      <div class="abspos-box inside-IB-midground"></div>

    </div>

    <div class="abspos-box after-IB-background"></div>

    <div class="abspos-box after-IB-foreground"></div>

  </span>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a-expected.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset=utf-8>

    <title>CSS Reftest Reference</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <style>

      tr {

        z-index: 10;

      }

      th {

        background-color: blue;

        padding-left: 50px;

      }

      caption {

        position: fixed;

        background-color: yellow;

        z-index: 2;

      }

    </style>

  </head>

  <body>

    <table>

      <caption>PASS</caption>

      <tr>

        <th>&emsp;</th>

      </tr>

    </table>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset=utf-8>

    <title>CSS-contain test: paint containment on internal table elements except table-cell.</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

    <link rel="match" href="contain-paint-ignored-cases-internal-table-001-ref.html">

    <meta name="assert" content="Paint containment should not apply to internal table elements except table-cell. This test testes only the tr element, and confirms contain:paint does not create a stacking context.">

    <style>

      tr {

        contain: paint;

        z-index: 10;

      }

      th {

        background-color: blue;

        padding-left: 50px;

      }

      caption {

        position: fixed;

        background-color: yellow;

        z-index: 2;

      }

    </style>

  </head>

  <body>

    <table>

      <caption>PASS</caption>

      <tr>

        <th>&emsp;</th>

      </tr>

    </table>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b-expected.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset=utf-8>

    <title>CSS Reftest Reference</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <style>

      tr {

        z-index: 10;

      }

      th {

        background-color: blue;

        padding-left: 50px;

      }

      caption {

        position: fixed;

        background-color: yellow;

        z-index: 2;

      }

    </style>

  </head>

  <body>

    <table>

      <caption>PASS</caption>

      <tr>

        <th>&emsp;</th>

      </tr>

    </table>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset=utf-8>

    <title>CSS-contain test: paint containment on internal table elements except table-cell.</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

    <link rel="match" href="contain-paint-ignored-cases-internal-table-001-ref.html">

    <meta name="assert" content="Paint containment should not apply to internal table elements except table-cell. This test testes only the tbody element, and confirms contain:paint does not create a stacking context.">

    <style>

      tbody {

        contain: paint;

        z-index: 10;

      }

      th {

        background-color: blue;

        padding-left: 50px;

      }

      caption {

        position: fixed;

        background-color: yellow;

        z-index: 2;

      }

    </style>

  </head>

  <body>

    <table>

      <caption>PASS</caption>

      <tbody>

        <tr>

          <th>&emsp;</th>

        </tr>

      </tbody>

    </table>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

      height: 100px;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      display: contents;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

      height: 100px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 300px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1"></div>

  <div id="div2">

    <div id="div2_1"></div>

    <div id="div2_2"></div>

  </div>

  <div id="div3"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: paint' with 'display: contents'.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-ignored-cases-no-principal-box-001-ref.html">

  <meta name="assert" content="Contain:paint should have no effect when no principle box is generated.">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

      height: 100px;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      display: contents;

      contain: paint;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

      height: 100px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 300px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1"></div>

  <div id="div2">

    <div id="div2_1"></div>

    <div id="div2_2"></div>

  </div>

  <div id="div3"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001-expected.html

<!doctype html>

<html lang=en>

  <head>

    <meta charset=utf-8>

    <title>CSS Reftest Reference</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <style>

      rb,

      rbc,

      rt,

      rtc {

        background-color: yellow;

        font-size: 2em;

      }

      rbc {

        display: ruby-base-container;

      }

      .contained {

        width: 50px;

        height: 10px;

        background-color: blue;

        top: 0;

        left: 0;

        position: fixed;

      }

      .wrapper {

        display: inline-block;

      }

    </style>

  </head>

  <body>

    <div class="wrapper"><ruby><rt>&emsp;<div class="contained"></div></rt></ruby></div>

    <div class="wrapper"><ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby></div>

    <div class="wrapper"><ruby><rb>&emsp;<div class="contained"></div></rb></ruby></div>

    <div class="wrapper"><ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby></div>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001.html

<!doctype html>

<html lang=en>

  <head>

    <meta charset=utf-8>

    <title>CSS-contain test: paint containment on internal ruby elements.</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

    <link rel="match" href="contain-paint-ignored-cases-ruby-containing-block-001-ref.html">

    <meta name="assert" content="Paint containment should not apply to ruby base, ruby base container, ruby text, and ruby text container. This test confirms contain:paint does not act as a containing block for fixed positioned descendants.">

    <style>

      rb,

      rbc,

      rt,

      rtc {

        contain: paint;

        background-color: yellow;

        font-size: 2em;

      }

      rbc {

        display: ruby-base-container;

      }

      .contained {

        width: 50px;

        height: 10px;

        background-color: blue;

        top: 0;

        left: 0;

        position: fixed;

      }

      .wrapper {

        display: inline-block;

      }

    </style>

  </head>

  <body>

    <div class="wrapper"><ruby><rt>&emsp;<div class="contained"></div></rt></ruby></div>

    <div class="wrapper"><ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby></div>

    <div class="wrapper"><ruby><rb>&emsp;<div class="contained"></div></rb></ruby></div>

    <div class="wrapper"><ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby></div>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001-expected.html

<!doctype html>

<html lang=en>

  <head>

    <meta charset=utf-8>

    <title>CSS Reftest Reference</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <style>

      div {

        position: relative;

      }

      rbc {

        display: ruby-base-container;

      }

      .contained {

        z-index: 5;

        width: 70px;

        height: 10px;

        background-color: blue;

        margin-left: -25px;

      }

      .background {

        display: inline-block;

        background-color: yellow;

        height: 50px;

        width: 50px;

        position: fixed;

        z-index: 2;

      }

      .group {

        display: inline-block;

      }

    </style>

  </head>

  <body>

    <div class="group">

      <div class="background"></div>

      <ruby><rb>&emsp;<div class="contained"></div></rb></ruby>

    </div>

    <div class="group">

      <div class="background"></div>

      <ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby>

    </div>

    <div class="group">

      <div class="background"></div>

      <ruby><rt>&emsp;<div class="contained"></div></rt></ruby>

    </div>

    <div class="group">

      <div class="background"></div>

      <ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby>

    </div>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html

<!doctype html>

<html lang=en>

  <head>

    <meta charset=utf-8>

    <title>CSS-contain test: paint containment on internal ruby elements.</title>

    <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

    <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

    <link rel="match" href="contain-paint-ignored-cases-ruby-stacking-and-clipping-001-ref.html">

    <meta name="assert" content="Paint containment should not apply to ruby base, ruby base container, ruby text, and ruby text container. This test confirms that contain:paint does not create a stacking context and does not apply overflow clipping.">

    <style>

      div {

        position: relative;

      }

      rb,

      rbc,

      rt,

      rtc {

        contain: paint;

      }

      rbc {

        display: ruby-base-container;

      }

      .contained {

        z-index: 5;

        width: 70px;

        height: 10px;

        background-color: blue;

        margin-left: -25px;

      }

      .background {

        background-color: yellow;

        height: 50px;

        width: 50px;

        position: fixed;

        z-index: 2;

      }

      .group {

        display: inline-block;

      }

    </style>

  </head>

  <body>

    <div class="group">

      <div class="background"></div>

      <ruby><rb>&emsp;<div class="contained"></div></rb></ruby>

    </div>

    <div class="group">

      <div class="background"></div>

      <ruby><rbc>&emsp;<div class="contained"></div></rbc></ruby>

    </div>

    <div class="group">

      <div class="background"></div>

      <ruby><rt>&emsp;<div class="contained"></div></rt></ruby>

    </div>

    <div class="group">

      <div class="background"></div>

      <ruby><rtc>&emsp;<div class="contained"></div></rtc></ruby>

    </div>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment independent formatting context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">

<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks.">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 1em 0; contain: paint;">

    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment independent formatting context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="reference/contain-paint-independent-formatting-context-001-ref.html">

<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to inline blocks.">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <span style="display: inline-block; margin: 1em 0; contain: paint;">

    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>

  </span>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Paint containment independent formatting context</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">

<link rel="match" href="reference/contain-paint-independent-formatting-context-003-ref.html">

<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">

<style>

.wrapper {

  border: solid thick;

  margin: 1em;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<div class="wrapper">

  <span style="margin: 1em 0; contain: paint;">

    <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>

  </span>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001-expected.html

<!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

    {

      background-color: green;

      height: 40px;

      width: 206px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint size' and table caption</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-size-001-ref.html">

  <meta name="flags" content="">

  <style>

  table

    {

      table-layout: fixed;

      width: 206px;

    }

  caption

    {

      background-color: red;

      border: green solid 1em;

      color: red;

      contain: paint size;

      font-size: 20px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <table>

  <caption>FAIL FAIL FAIL FAIL FAIL FAIL</caption>

    <tr><td>&nbsp;<td>&nbsp;

    <tr><td>&nbsp;<td>&nbsp;

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002-expected.html

<!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

    {

      background-color: green;

      height: 40px;

      width: 206px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint size' and block box</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-size-001-ref.html">

  <meta name="flags" content="">

  <style>

  div

    {

      background-color: red;

      border: green solid 1em;

      color: red;

      contain: paint size;

      font-size: 20px;

      width: 166px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <div>FAIL FAIL FAIL FAIL FAIL FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003-expected.html

<!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

    {

      color: transparent;

      float: left;

      font-size: 16px;

      padding: 8px;

    }

  div#blue-rectangle

    {

      background-color: blue;

      margin: 8px;

      width: 6em;

    }

  div#orange-rectangle

    {

      background-color: orange;

      height: 0px;

      width: 12em;

    }

  </style>

  <p>Test passes if the orange rectangle and blue rectangle do not overlap.

  <div id="blue-rectangle">Some text in a blue rectangle.</div>

  <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: a block with 'contain: paint size' 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-size-003-ref.html">

  <meta name="flags" content="">

  <style>

  div

    {

      color: transparent;

      font-size: 16px;

      padding: 8px;

    }

  div#floated-left

    {

      background-color: blue;

      float: left;

      margin: 8px;

      width: 6em;

    }

  div#with-contain-paint-size

    {

      background-color: orange;

      width: 12em;

      contain: paint size;

    }

  </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-paint-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      z-index: 1;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 100px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1">

    <br/><br/>

  </div>

  <div id="div2">

    <div id="div2_1">

      <br/><br/>

    </div>

    <div id="div2_2">

    </div>

  </div>

  <div id="div3">

    <br/><br/>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-stacking-context-001-ref.html">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      contain: paint;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 100px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1">

    <br/><br/>

  </div>

  <div id="div2">

    <div id="div2_1">

      <br/><br/>

    </div>

    <div id="div2_2">

    </div>

  </div>

  <div id="div3">

    <br/><br/>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      z-index: 1;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 100px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1">

    <br/><br/>

  </div>

  <div id="div2">

    <div id="div2_1">

      <br/><br/>

    </div>

    <div id="div2_2">

    </div>

  </div>

  <div id="div3">

    <br/><br/>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'will-change: contain' with stacking contents. Z-index is defined only for siblings and children.</title>

  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel="match" href="contain-paint-stacking-context-001-ref.html">

  <style>

    div {

      position: relative;

      width: 100px;

    }

    #div1,

    #div3 {

      background-color: #cfc;

    }

    #div1 {

      z-index: 5;

    }

    #div2 {

      will-change: contain;

      background-color: #fdd;

      height: 100px;

      top: -20px;

    }

    #div2_1 {

      background-color: #ffc;

      z-index: 6;

      top: -10px;

    }

    #div2_2 {

      z-index: 3;

      position: absolute;

      top: -15px;

      width: 40px;

      height: 100px;

      background-color: #ddf;

    }

    #div3 {

      z-index: 2;

      top: -50px;

    }

  </style>

</head>

<body>

  <div id="div1">

    <br/><br/>

  </div>

  <div id="div2">

    <div id="div2_1">

      <br/><br/>

    </div>

    <div id="div2_2">

    </div>

  </div>

  <div id="div3">

    <br/><br/>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001-expected.html

<!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

    {

      color: green;

      font-family: monospace;

      font-size: 100px;

  }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' applies to 'table' elements</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <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-paint">

  <link rel="match" href="reference/contain-paint-047-ref.html">

  <meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element should be clipped to the padding edge of its principal box." name="assert">

  <meta name="flags" content="">

  <style>

  div#table

    {

      display: table;

      font-family: monospace;

      font-size: 100px;

      table-layout: fixed;

      width: 4ch;

      contain: paint;

    }

  div.cell

    {

      display: table-cell;

      color: green;

    }

  span

    {

      background-color: red;

      color: yellow;

    }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div id="table">

    <div class="cell">PASS<span>FAIL</span></div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002-expected.html

<!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

    {

      color: green;

      font-family: monospace;

      font-size: 100px;

  }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: paint' applies to 'table' elements</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <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-paint">

  <link rel="match" href="reference/contain-paint-047-ref.html">

  <meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element (including its caption) should be clipped to the padding edge of its principal box." name="assert">

  <meta name="flags" content="">

  <style>

  div#table

    {

      display: table;

      font-family: monospace;

      font-size: 100px;

      table-layout: fixed;

      width: 4ch;

      contain: paint;

    }

  div.caption

    {

      display: table-caption;

      color: green;

      /* We have to limit the width of the caption here, or else the caption's

         intrinsic width (including the "FAIL" span) would "prop up" the width

         of the table to be a size that'd be larger than its specified width.

         Really, we want the table to be *only* 4 characters wide (as wide as

         the text "PASS"), with "FAIL" overflowing and getting clipped by

         "contain:paint" on the table wrapper box. */

      width: 4ch;

    }

  span

    {

      background-color: red;

      color: yellow;

    }

  </style>

  <p>Test passes if there is <strong>no red</strong>.

  <div id="table">

    <div class="caption">

      PASS<span>FAIL</span>

    </div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment on non-atomic inlines</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="size containment does not apply to non atomic inlines">

  <link rel="match" href="reference/pass_if_pass_below_clipped.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

<style>

div { overflow: hidden; }

span { contain: size; }

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><span>PASS</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment on ruby-base</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="size containment does not to apply ruby-base, which is an internal ruby element">

  <link rel="match" href="reference/pass_if_pass_below_clipped.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">

<style>

div {

  overflow: hidden;

  position: absolute;

}

rb {

  contain: size;

  display: ruby-base;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><ruby><rb>PASS</rb></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment on ruby-base-container</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="size containment does not to apply ruby-base-container, which is an internal ruby element">

  <link rel="match" href="reference/pass_if_pass_below_clipped.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">

<style>

div {

  overflow: hidden;

  position: absolute;

}

rbc {

  contain: size;

  display: ruby-base-container;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div><ruby><rbc>PASS</rbc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

rtc {

  display: ruby-text-container;

  font-size: 1rem;

}

div {

  overflow: hidden;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rtc>PASS</rtc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment on ruby-text-container</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="size containment does not to apply ruby-text-container, which is an internal ruby element">

  <link rel="match" href="reference/contain-size-004-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">

<style>

div {

  overflow: hidden;

  position: absolute;

}

rtc {

  contain: size;

  display: ruby-text-container;

  font-size: 1rem;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rtc>PASS</rtc></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

div { overflow: hidden; }

rt {

  display: -webkit-ruby-text;

  font-size: 1rem;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rt>PASS</rt></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment on ruby-text</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="size containment does not to apply ruby-text, which is an internal ruby element">

  <link rel="match" href="reference/contain-size-005-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

  <link rel=help href="https://drafts.csswg.org/css-display-3/#internal-ruby-element">

<style>

div {

  overflow: hidden;

  position: absolute;

}

rt {

  contain: size;

  display: -webkit-ruby-text;

  font-size: 1rem;

}

</style>

<p>This test passes if you can see the word PASS below.

<div><ruby><rt>PASS</rt></ruby></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on table-cell</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/pass_if_pass_below_clipped.html">

<meta name=assert content="Size containment doesn't apply to table-cell elements.">

<style>

div {

  display: table-cell;

  contain: size;

  overflow: hidden;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on table-row-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/pass_if_pass_below_clipped.html">

<meta name=assert content="Size containment doesn't apply to table-row-group elements.">

<style>

div {

  display: table-row-group;

  contain: size;

}

section {

  overflow: hidden;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<section>

<div>PASS</div>

<section>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on table-header-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/pass_if_pass_below_clipped.html">

<meta name=assert content="Size containment doesn't apply to table-header-group elements.">

<style>

div {

  display: table-header-group;

  contain: size;

}

section {

  overflow: hidden;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<section>

<div>PASS</div>

</section>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on table-footer-group</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/pass_if_pass_below_clipped.html">

<meta name=assert content="Size containment doesn't apply to table-footer-group elements.">

<style>

div {

  display: table-footer-group;

  contain: size;

}

section {

  overflow: hidden;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<section>

<div>PASS</div>

</section>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on table-row</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/pass_if_pass_below_clipped.html">

<meta name=assert content="Size containment doesn't apply to table-row elements.">

<style>

div {

  display: table-row;

  contain: size;

}

section {

  overflow: hidden;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<section>

<div>PASS</div>

</section>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011-expected.html

<!DOCTYPE html>

<title>CSS Reftest Reference</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>There should be nothing below.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on table-caption</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="../reference/nothing.html">

<meta name=assert content="Size containment does apply to table-caption elements.">

<style>

div {

  display: table-caption;

  contain: size;

  overflow: hidden;

}

</style>

<p>There should be nothing below.</p>

<div>FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on display:table</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/pass_if_pass_below_clipped.html">

<meta name=assert content="Size containment doesn't apply to table boxes.">

<style>

div {

  display: table;

  contain: size;

  overflow: hidden;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b-expected.html

<!doctype html>

<html>

<head>

   <title>Reference rendering - passes if there is the word "PASS" below</title>

<style>

div { overflow: hidden; }

</style>

</head>

<body>

   <p>Test passes if there is the word "PASS" below.</p>

   <div>PASS</div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on display:inline-table</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/pass_if_pass_below_clipped.html">

<meta name=assert content="Size containment doesn't apply to inline-table boxes.">

<style>

div {

  display: inline-table;

  contain: size;

  overflow: hidden;

}

</style>

<p>Test passes if there is the word "PASS" below.</p>

<div>PASS</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">

<style>

img {

  background: green;

  padding: 50px;

  contain: size;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<img src="/css/support/60x60-red.png" alt="Image download support must be enabled" />

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

  div.inline-block {

    display: inline-block;

    height: 100px;

    width: 100px;

  }

  div#blue-test {

    background-color: blue;

    padding: 50px;

    box-sizing: border-box;

  }

  div#orange-reference {

    background-color: orange;

  }

</style>

<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

<div>

  <div id="blue-test" class="inline-block"><img src="support/blue50wBy46h.png" alt="Image download support must be enabled"></div>

</div>

<div>

  <div id="orange-reference" class="inline-block"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to inline-block (basic)</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-size">

  <link rel="match" href="reference/contain-size-021-ref.html">

  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 1 image and no in-flow block descendant." name="assert">

  <meta name="flags" content="">

  <!--

  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison

  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison

  contain-size-023: inline-block with text and no in-flow block descendant: width comparison

  contain-size-024: inline-block with text and no in-flow block descendant: height comparison

  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison

  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison

  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison

  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison

  -->

  <style>

  div#inline-block-blue-test

    {

      background-color: blue;

      contain: size;

      display: inline-block;

      padding: 50px;

    }

  div#orange-reference

    {

      background-color: orange;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

  <div>

    <div id="inline-block-blue-test"><img src="support/blue50wBy46h.png" alt="Image download support must be enabled"></div>

  </div>

  <div id="orange-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

  div.inline-block {

    display: inline-block;

    height: 100px;

    width: 100px;

  }

  div#blue-test {

    background-color: blue;

    color: transparent;

    font-size: 100px;

    padding: 50px;

    box-sizing: border-box;

  }

  div#orange-reference {

    background-color: orange;

  }

</style>

<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

<div>

  <div id="blue-test" class="inline-block">B</div>

</div>

<div>

  <div id="orange-reference" class="inline-block"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to inline-block (basic)</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-size">

  <link rel="match" href="reference/contain-size-023-ref.html">

  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has text and no in-flow block descendant." name="assert">

  <meta name="flags" content="">

  <!--

  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison

  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison

  contain-size-023: inline-block with text and no in-flow block descendant: width comparison

  contain-size-024: inline-block with text and no in-flow block descendant: height comparison

  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison

  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison

  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison

  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison

  -->

  <style>

  div.inline-block

    {

      display: inline-block;

    }

  div#blue-test

    {

      background-color: blue;

      color: transparent;

      contain: size;

      font-size: 100px;

      padding: 50px;

    }

  div#orange-reference

    {

      background-color: orange;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

  <div>

    <div id="blue-test" class="inline-block">B</div>

  </div>

  <div>

    <div id="orange-reference" class="inline-block"></div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025-expected.html

<!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/">

  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

  <div><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>

  <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to inline-block</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-size">

  <link rel="match" href="reference/contain-size-025-ref.html">

  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of images." name="assert">

  <meta name="flags" content="">

  <!--

  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison

  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison

  contain-size-023: inline-block with text and no in-flow block descendant: width comparison

  contain-size-024: inline-block with text and no in-flow block descendant: height comparison

  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison

  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison

  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison

  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison

  -->

  <style>

  div.inline-block

    {

      display: inline-block;

    }

  div#blue-test

    {

      background-color: blue;

      contain: size;

      padding: 50px;

    }

  span.block-descendant, img

    {

      display: block;

    }

  div#orange-reference

    {

      background-color: orange;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

  <div>

    <div id="blue-test" class="inline-block">

      <span class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>

      <span id="last-line-box" class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>

    </div>

  </div>

  <div id="orange-reference" class="inline-block"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

  div.inline-block {

    display: inline-block;

    height: 100px;

    width: 100px;

  }

  div#blue-test {

    background-color: blue;

    color: transparent;

    font-size: 50px;

    line-height: 1;

    padding: 50px;

    box-sizing: border-box;

  }

  div#orange-reference {

    background-color: orange;

  }

  span {

    display: block;

  }

</style>

<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

<div>

  <div id="blue-test" class="inline-block">

    <span>B</span>

    <span>L</span>

  </div>

</div>

<div>

  <div id="orange-reference" class="inline-block"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to inline-block</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-size">

  <link rel="match" href="reference/contain-size-027-ref.html">

  <meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of text." name="assert">

  <meta name="flags" content="">

  <!--

  contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison

  contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison

  contain-size-023: inline-block with text and no in-flow block descendant: width comparison

  contain-size-024: inline-block with text and no in-flow block descendant: height comparison

  contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison

  contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison

  contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison

  contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison

  -->

  <style>

  div.inline-block

    {

      display: inline-block;

    }

  div#blue-test

    {

      background-color: blue;

      color: transparent;

      contain: size;

      font-size: 50px;

      line-height: 1;

      padding: 50px;

    }

  span.block-descendant

    {

      display: block;

    }

  div#orange-reference

    {

      background-color: orange;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

  <div>

    <div id="blue-test" class="inline-block">

      <span class="block-descendant">B</span>

      <span id="last-line-box" class="block-descendant">L</span>

    </div>

  </div>

  <div>

    <div id="orange-reference" class="inline-block"></div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041-expected.html

<!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/">

  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

  <div><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div>

  <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to inline replaced element (basic)</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-size">

  <link rel="match" href="reference/contain-size-025-ref.html">

  <meta content="This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0." name="assert">

  <meta name="flags" content="">

  <style>

  img#blue-test

    {

      background-color: blue;

      contain: size;

      padding: 50px;

    }

  div#orange-reference

    {

      background-color: orange;

      height: 100px;

      width: 100px;

    }

  </style>

  <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square.

  <div><img id="blue-test" src="support/blue-100x100.png" alt="Image download support must be enabled"></div>

  <div id="orange-reference"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042-expected.html

<!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/">

  <p>This test passes if the painted blue area is <strong>exactly as tall as</strong> the orange square.

  <div><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"> <img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to inline replaced element (basic)</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-size">

  <link rel="match" href="reference/contain-size-022-ref.html">

  <meta content="This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0." name="assert">

  <meta name="flags" content="">

  <style>

  img#blue-test

    {

      background-color: blue;

      contain: size;

      padding: 50px;

    }

  </style>

  <p>This test passes if the painted blue area is <strong>exactly as tall as</strong> the orange square.

  <div><img id="blue-test" src="support/blue-100x100.png" alt="Image download support must be enabled"> <img id="orange-reference" src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051-expected.html

<!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>

  td

    {

      font-size: 50px;

    }

  </style>

  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.

  <table>

    <tr>

      <td>5<td>6<td>7<td>8

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' does not apply to table-cell element</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-size">

  <link rel="match" href="reference/contain-size-051-ref.html">

  <meta name="flags" content="">

  <style>

  td

    {

      contain: size;

      font-size: 50px;

    }

  </style>

  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.

  <table>

    <tr>

      <td>5<td>6<td>7<td>8

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052-expected.html

<!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>

  td

    {

      font-size: 50px;

    }

  </style>

  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.

  <table>

    <tr>

      <td>5<td>6<td>7<td>8

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' does not apply to table-cell element</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-size">

  <link rel="match" href="reference/contain-size-051-ref.html">

  <meta name="flags" content="">

  <style>

  div#table

    {

      border-spacing: 2px;

      display: table;

    }

  div#table-row

    {

      display: table-row;

    }

  div.table-cell

    {

      contain: size;

      display: table-cell;

      font-size: 50px;

      padding: 1px;

    }

  </style>

  <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other.

  <div id="table">

    <div id="table-row">

      <div class="table-cell">5</div><div class="table-cell">6</div><div class="table-cell">7</div><div class="table-cell">8</div>

    </div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056-expected.html

<!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>

  table

    {

      width: 400px;

    }

  caption

    {

      border-top: orange solid 6px;

      color: blue;

      font-size: 32px;

    }

  span

    {

      bottom: 3px;

      position: relative;

    }

  </style>

  <p>Test passes if the words "Table caption" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Table caption" in it.

  <table>

    <caption><span>Table caption</span></caption>

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to caption element</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-size">

  <link rel="match" href="reference/contain-size-056-ref.html">

  <meta name="flags" content="">

  <style>

  table

    {

      width: 400px;

    }

  caption

    {

      border: orange solid 3px;

      color: blue;

      contain: size;

      font-size: 32px;

    }

  </style>

  <p>Test passes if the words "Table caption" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Table caption" in it.

  <table>

    <caption>Table caption</caption>

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061-expected.html

<!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/">

  <p>Test passes if the word FAIL is absent.

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to block box (basic)</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-size">

  <link rel="match" href="reference/contain-size-061-ref.html">

  <meta name="flags" content="">

  <style>

  div

    {

      contain: size;

      font-size: 100px;

      overflow: hidden;

    }

  </style>

  <p>Test passes if the word FAIL is absent.

  <div>FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062-expected.html

<!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

    {

      border: orange solid 3px;

      color: blue;

      font-size: 32px;

      height: 0px;

      width: 400px;

    }

  </style>

  <p>Test passes if the words "Text sample" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Text sample" in it.

  <div>Text sample</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' applies to block box (basic)</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-size">

  <link rel="match" href="reference/contain-size-062-ref.html">

  <meta name="flags" content="">

  <style>

  div

    {

      border: orange solid 3px;

      color: blue;

      contain: size;

      font-size: 32px;

      width: 400px;

    }

  </style>

  <p>Test passes if the words "Text sample" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Text sample" in it.

  <div>Text sample</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063-expected.html

<!DOCTYPE html>

<meta charset="UTF-8">

<title>Test reference</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if there is no red below.

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063.html

<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Containment Test: 'contain: size' affects intrinsic size</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-063-ref.html">

<meta name="flags" content="">

<meta name="asserts" content="the intrinsic size of a size-contained element is treated as 0 in various scenarios involving intrinsic sizing.">

<style>

.red {

    background: red;

}

.abs {

    position: absolute;

}

.float {

    float: left;

}

.zero {

    width: 0;

}

.contained {

    contain: size;

    color: transparent;

}

.grid {

    display: grid;

    grid: max-content auto / min-content auto;

}

table {

    border-collapse: collapse;

}

td {

    padding: 0;

}

</style>

<p>Test passes if there is no red below.

<!-- max content sized-->

<div class="red abs"><div class="contained">Arbitrary content content<br>that takes up size.<br>Block Layout</div></div>

<!-- max content sized-->

<div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float</div></div>

<!-- min content sized-->

<div class=zero><div class="red float"><div class="contained">Arbitrary content content<br>that takes up size.<br>Float in narrow wrapper</div></div></div>

<div class="grid red">

    <div class="red"></div>

    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first row it's height</div>

    <div class="contained">Arbitrary content content<br>that takes up size.<br>Grid item giving the first column its width</div>

</div>

<table class=red>

    <tr>

        <td class=red>

        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the fist row it's height</div>

    <tr>

        <td><div class="contained">Arbitrary content content<br>that takes up size.<br>content of a table cell giving the first column it's width</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

div { font-size: 50px; }

.green { background: green; }

.grid {

    display: grid;

    grid-template-columns: min-content max-content;

}

</style>

<p>This test passes if there are two green rectangles and no red.

<div class=grid>

    <div style="grid-area: 1/1">&nbsp;</div>

    <div style="grid-area: 2/2"id=test class="grid">

        <div>&nbsp;</div>

        <div class=green></div>

        <div class=green></div>

        <div>&nbsp;</div>

    </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment: layout in place</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="The size containment box's content (including any pseudo-elements) must be laid out into the now fixed-size size containment box normally.">

  <link rel="match" href="reference/contain-size-064-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

<style>

div { font-size: 50px; }

.red { background: red; }

.green { background: green; }

.grid {

    display: grid;

    grid-template-columns: min-content max-content;

}

#test { contain: size; }

#test::after { content: "\a0" ; }

</style>

<p>This test passes if there are two green rectangles and no red.

<div class=grid>

    <div style="grid-area: 1/1">&nbsp;</div>

    <div style="grid-area: 1/2"class=red></div><!-- will show if the size containment doesn't result in 0x0-->

    <div style="grid-area: 1/3"></div>

    <div class=red></div><!-- will show if the size containment doesn't result in 0x0-->

    <div id=test class="grid red"><!-- will show if the size containment doesn't result in 0x0-->

        <div>&nbsp;</div>

        <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized-->

        <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized-->

    </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001-expected.html

<!doctype html>

<html lang=en>

<meta charset=utf-8>

<title>CSS test reference</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

div {

  display: inline-block;

  height: 5px;

  background: blue;

  width: 50px;

  color: transparent;

  font-size: 100px;

}

</style>

<p>Test passes if there are two, not one, blue lines below.</p>

<div></div><div>a</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment and baselines</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=assert content="contain:size does not suppress baseline alignment">

  <link rel="match" href="reference/contain-baseline-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

  <meta name="flags" content="">

<style>

div {

  display: inline-block;

  height: 5px;

  background: blue;

  width: 50px;

  contain: size;

  color: transparent;

  font-size: 100px;

}

</style>

<p>Test passes if there are two, not one, blue lines below.</p>

<div></div><div>a</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    border: 1em solid green;

  }

  .height-ref {

    height: 50px;

    background: lightblue;

  }

  .width-ref {

    width: 50px;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 50px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  .innerContents {

    color: transparent;

    width: 0;

    height: 0;

  }

  </style>

</head>

<body>

  <div class="basic"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic floatLBasic-ref"></div>

  <br>

  <div class="basic floatLWidth-ref"></div>

  <br>

  <div class="flexBaselineCheck">

  outside before<div class="basic innerContents">i</div>outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on block elements should cause them to be sized as if they had no contents</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-block-001-ref.html">

  <style>

  .contain {

    contain: size;

    border: 1em solid green;

    background: red;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 50px;

    background: lightblue;

  }

  .height {

    height: 50px;

    background: lightblue;

  }

  .maxWidth {

    max-width: 50px;

  }

  .width {

    width: 50px;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 50px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained block element with no specified size should render at 0 height regardless of content.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained block element with specified min-height should render at given min-height regardless of content.-->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained block element with specified height should render at given height regardless of content.-->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained block element with specified max-width should render at given max-width and zero height regardless of content.-->

  <div class="contain maxWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained block element with specified width should render at given width and zero height regardless of content.-->

  <div class="contain width"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated block element with no specified size should render at 0px by 0px regardless of content.-->

  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated block element with specified width and no specified height should render at given width and 0 height regardless of content.-->

  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained block element should perform baseline alignment regularly.-->

  <div class="flexBaselineCheck">

  outside before<div class="contain"><div class="innerContents">inner</div></div>outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    overflow: scroll;

    position: relative;

    border: 2px solid green;

  }

  .height-ref {

    height: 60px;

    background: lightblue;

  }

  .width-ref {

    width: 60px;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 60px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

    position: absolute;

  }

  .zeroHeightContents {

    color: transparent;

    height: 0px;

    width: 0px;

  }

  </style>

</head>

<body>

  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in

       the testcase, and we simply use 'position: absolute' on the descendants

       wherever the testcase has 'contain: size' on the container.  This

       produces an accurate reference rendering, because out-of-flow content

       doesn't contribute to the container's sizing, but does create scrollable

       overflow (i.e. it produces scrollbars of the appropriate size for the

       amount of overflow). -->

  <div class="basic"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="flexBaselineCheck">

    outside before

    <div class="basic">

      <!-- We use the out-of-flow "innerContents" to create the correct

           amount of scrollable overflow to match the testcase, and we

           use the smaller in-flow "zeroHeightContents" to provide a

           baseline that we can use to verify the testcase's baseline

           alignment position. -->

      <div class="innerContents">inner</div>

      <div class="zeroHeightContents">i</div>

    </div>

    outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on 'overflow:scroll' block elements should cause them to be sized as if they had no contents</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-block-002-ref.html">

  <style>

  .contain {

    contain: size;

    overflow: scroll;

    border: 2px solid green;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 60px;

    background: lightblue;

  }

  .height {

    height: 60px;

    background: lightblue;

  }

  .maxWidth {

    max-width: 60px;

  }

  .width {

    width: 60px;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 60px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  </style>

</head>

<body>

  <!-- NOTE: In all cases below, the expectation is that the size-contained

       element should be sized as if it had no contents (while honoring

       whatever sizing properties are provided). -->

  <!--CSS Test: A size-contained scrollable block with no specified size.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified min-height -->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified height -->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified max-width -->

  <div class="contain maxWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified width -->

  <div class="contain width"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated scrollable block with auto size -->

  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated scrollable block with

      specified width -->

  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block in a

      baseline-aligning flex container: should size as if it's empty, but

      still baseline-align using its contents' baseline -->

  <div class="flexBaselineCheck">

    outside before

    <div class="contain">

      <div class="innerContents">inner</div>

    </div>

    outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    overflow: auto;

    position: relative;

    border: 2px solid green;

  }

  .height-ref {

    height: 60px;

    background: lightblue;

  }

  .width-ref {

    width: 60px;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 60px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

    position: absolute;

  }

  .zeroHeightContents {

    color: transparent;

    height: 0px;

    width: 0px;

  }

  </style>

</head>

<body>

  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in

       the testcase, and we simply use 'position: absolute' on the descendants

       wherever the testcase has 'contain: size' on the container.  This

       produces an accurate reference rendering, because out-of-flow content

       doesn't contribute to the container's sizing, but does create scrollable

       overflow (i.e. it produces scrollbars of the appropriate size for the

       amount of overflow). -->

  <div class="basic"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="flexBaselineCheck">

    outside before

    <div class="basic">

      <!-- We use the out-of-flow "innerContents" to create the correct

           amount of scrollable overflow to match the testcase, and we

           use the smaller in-flow "zeroHeightContents" to provide a

           baseline that we can use to verify the testcase's baseline

           alignment position. -->

      <div class="innerContents">inner</div>

      <div class="zeroHeightContents">i</div>

    </div>

    outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on 'overflow:auto' block elements should cause them to be sized as if they had no contents</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-block-003-ref.html">

  <style>

  .contain {

    contain: size;

    overflow: auto;

    border: 2px solid green;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 60px;

    background: lightblue;

  }

  .height {

    height: 60px;

    background: lightblue;

  }

  .maxWidth {

    max-width: 60px;

  }

  .width {

    width: 60px;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 60px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  </style>

</head>

<body>

  <!-- NOTE: In all cases below, the expectation is that the size-contained

       element should be sized as if it had no contents (while honoring

       whatever sizing properties are provided). -->

  <!--CSS Test: A size-contained scrollable block with no specified size.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified min-height -->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified height -->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified max-width -->

  <div class="contain maxWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified width -->

  <div class="contain width"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated scrollable block with auto size -->

  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated scrollable block with

      specified width -->

  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block in a

      baseline-aligning flex container: should size as if it's empty, but

      still baseline-align using its contents' baseline -->

  <div class="flexBaselineCheck">

    outside before

    <div class="contain">

      <div class="innerContents">inner</div>

    </div>

    outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    overflow: hidden;

    position: relative;

    border: 2px solid green;

  }

  .height-ref {

    height: 60px;

    background: lightblue;

  }

  .width-ref {

    width: 60px;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 60px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

    position: absolute;

  }

  .zeroHeightContents {

    color: transparent;

    height: 0px;

    width: 0px;

  }

  </style>

</head>

<body>

  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in

       the testcase, and we simply use 'position: absolute' on the descendants

       wherever the testcase has 'contain: size' on the container.  This

       produces an accurate reference rendering, because out-of-flow content

       doesn't contribute to the container's sizing, but does create scrollable

       overflow. -->

  <div class="basic"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic floatLBasic-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic floatLWidth-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="flexBaselineCheck">

    outside before

    <div class="basic">

      <!-- We use the out-of-flow "innerContents" to create the correct

           amount of scrollable overflow to match the testcase, and we

           use the smaller in-flow "zeroHeightContents" to provide a

           baseline that we can use to verify the testcase's baseline

           alignment position. -->

      <div class="innerContents">inner</div>

      <div class="zeroHeightContents">i</div>

    </div>

    outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on 'overflow:hidden' block elements should cause them to be sized as if they had no contents</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-block-004-ref.html">

  <style>

  .contain {

    contain: size;

    overflow: hidden;

    border: 2px solid green;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 60px;

    background: lightblue;

  }

  .height {

    height: 60px;

    background: lightblue;

  }

  .maxWidth {

    max-width: 60px;

  }

  .width {

    width: 60px;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 60px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  </style>

</head>

<body>

  <!-- NOTE: In all cases below, the expectation is that the size-contained

       element should be sized as if it had no contents (while honoring

       whatever sizing properties are provided). -->

  <!--CSS Test: A size-contained scrollable block with no specified size.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified min-height -->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified height -->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified max-width -->

  <div class="contain maxWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block with specified width -->

  <div class="contain width"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated scrollable block with auto size -->

  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated scrollable block with

      specified width -->

  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained scrollable block in a

      baseline-aligning flex container: should size as if it's empty, but

      still baseline-align using its contents' baseline -->

  <div class="flexBaselineCheck">

    outside before

    <div class="contain">

      <div class="innerContents">inner</div>

    </div>

    outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders.html

<!DOCTYPE html>

<title>contain:size on auto-height block width vertical borders</title>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div style="contain:size; width:100px; border:50px solid green; border-left:none; border-right:none; background:red;">

  <div style="height:200px;"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="ahem">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

article {

  height: 2.5em;

  column-gap: 0;

  columns: 3 1em;

  width: 3em;

  column-fill: auto;

  font-size: 40px;

  font-family: ahem;

  line-height: 1;

}

div {

  background: orange;

  padding-top: 5em;

}

</style>

<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails.

<article>

<div></div>

</article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: size containment and fragmentation</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="ahem">

  <meta name=assert content="size containment makes element monolithic">

  <link rel="match" href="reference/contain-size-breaks-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">

  <link rel=help href="https://drafts.csswg.org/css-break-3/#monolithic">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

article {

  height: 2.5em;

  column-gap: 0;

  columns: 3 1em;

  width: 3em;

  font-size: 40px;

  font-family: ahem;

  line-height: 1;

}

div {

  contain: size;

  height: 5em;

  color: orange;

}

</style>

<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails.

<article>

<div>A B C D E</div>

</article>

<!--

As the element is monolithic it should either:

* Overflow vertically, appearing as a single 1x5 em rectangle:

    -----

    | A |

    | B |

    | C |

    | D |

    | E |

    -----

* Be sliced, with one slice in each column, appearing as a single 2x2.5 em rectangle:

    ----------

    | A |' ◟ '

    | B || D |

    ' ◜ '| E |

    ----------

Either way, it will always appear as a single rectangle.

If the element is not monolithic, it will fit 2 letters (A & B) in the first column,

2 (C & D) in the second column, and the fifth (E) will be overflowing the div,

either into the third column, or into the bottom of the second one.

Either way, this will not look like a rectangle.

Note: We use some UTF-8 characters to simulate the sliced C on the ASCII diagrams:

* U+25DC: ◜ Upper left quadrant circular arc

* U+25DF: ◟ Lower left quadrant circular arc

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

button {

  border: 5px solid green;

  padding: 0;

  color: transparent;

  width: 0;

  height: 0;

  font-size: 2em;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>

before<button>b</button>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on button</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-button-001-ref.html">

<meta name=assert content="Size containment does apply to buttons, thus their size is the same than if they don't have contents.">

<style>

button {

  border: 5px solid green;

  padding: 0;

  contain: size;

  color: transparent;

  font-size: 2em;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>

before<button>flex</button>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  button {

    border: 1em solid green;

    /* In case the testcase's 'inner' text is taller than the button, don't let

       it influence its line-box's size.  This lets us more-easily compare

       sizing between empty buttons vs. contained nonempty buttons. */

    vertical-align: top;

  }

  .vaBaseline {

    vertical-align: baseline;

  }

  .width-ref {

    width: 50px;

  }

  .height-ref {

    height: 50px;

    background: lightblue;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 50px;

  }

  br { clear: both }

  .iFlexBasic-ref {

    display: inline-flex;

  }

  .iFlexWidth-ref {

    display: inline-flex;

    width: 50px;

  }

  .innerContents {

    color: transparent;

    height: 0;

    width: 0;

  }

  .orthog-ref {

    writing-mode: vertical-lr;

  }

  </style>

</head>

<body>

  <button></button>

  <br>

  <button class="floatLBasic-ref"></button>

  <br>

  <button class="floatLWidth-ref"></button>

  <br>

  <button class="iFlexBasic-ref"></button>

  <br>

  <button class="iFlexWidth-ref"></button>

  <br>

  outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after

  <br>

  <button class="width-ref"></button>

  <br>

  <button class="width-ref"></button>

  <br>

  <button class="height-ref"></button>

  <br>

  <button class="height-ref"></button>

  <br>

  s<button class="orthog-ref vaBaseline"><div class="innerContents">inner</div></button>endtext

  <br>

  <button class="height-ref width-ref">inside</button>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on buttons should cause them to be sized as if they had no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-button-002-ref.html">

  <style>

  button {

    contain: size;

    border: 1em solid green;

    /* In case the testcase's 'inner' text is taller than the button, don't let

       it influence its line-box's size.  This lets us more-easily compare

       sizing between empty buttons vs. contained nonempty buttons. */

    vertical-align: top;

  }

  .vaBaseline {

    vertical-align: baseline;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minWidth {

    min-width: 50px;

  }

  .width {

    width: 50px;

  }

  .minHeight {

    min-height: 50px;

    background: lightblue;

  }

  .height {

    height: 50px;

    background: lightblue;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 50px;

  }

  br { clear: both }

  .iFlexBasic {

    display: inline-flex;

  }

  .iFlexWidth {

    display: inline-flex;

    width: 50px;

  }

  .orthog {

    writing-mode: vertical-lr;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained button with no specified size should render at 0 height regardless of content.-->

  <button><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained floated button with no specified size should render at 0px by 0px regardless of content.-->

  <button class="floatLBasic"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained floated button with specified width and no specified height should render at given width and 0 height regardless of content.-->

  <button class="floatLWidth"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained inline-flex button with no specified size should render at 0px by 0px regardless of content.-->

  <button class="iFlexBasic"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained inline-flex button with specified width and no specified height should render at given width and 0 height regardless of content.-->

  <button class="iFlexWidth"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained button should perform baseline alignment regularly.-->

  outside before<button class="vaBaseline"><div class="innerContents">inner</div></button>outside after

  <br>

  <!--CSS Test: A size-contained button with specified min-width should render at given min-width and zero height regardless of content.-->

  <button class="minWidth"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained button with specified width should render at given width and zero height regardless of content.-->

  <button class="width"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained button with specified min-height should render at given min-height regardless of content.-->

  <button class="minHeight"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained button with specified height should render at given height regardless of content.-->

  <button class="height"><div class="innerContents">inner</div></button>

  <br>

  <!--CSS Test: A size-contained button with vertical text should perform baseline alignment regularly.-->

  s<button class="orthog vaBaseline"><div class="innerContents">inner</div></button>endtext

  <br>

  <!--CSS Test: A size-contained button with inner text should layout the text in the same manner as a container of the same type with identical contents.-->

  <button class="height width">inside</button>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

fieldset {

  display: inline-block;

  color: transparent;

  border: none;

  padding: 0;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a small space, and then the word "after".</p>

before<fieldset></fieldset>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on fieldset</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-fieldset-001-ref.html">

<meta name=assert content="Size containment does apply to fieldsets, thus their size is the same than if they don't have contents.">

<style>

fieldset {

  contain: size;

  display: inline-block;

  color: transparent;

  border: none;

  padding: 0;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a small space, and then the word "after".</p>

before<fieldset><legend>legend</legend></fieldset>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<style>

#border {

  border: 1px solid black;

  width: min-content;

}

fieldset {

  visibility: hidden;

  height: 1px;

}

</style>

<p>This test passes if it has the same output as the reference. You should see a black border box below.</p>

<div id="border">

  <fieldset></fieldset>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on fieldset</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-fieldset-002-ref.html">

<meta name=assert content="Size containment does apply to fieldsets, thus their size is the same than if they don't have contents.">

<style>

#border {

  border: 1px solid black;

  width: min-content;

}

fieldset {

  contain: size;

  visibility: hidden;

  height: 1px;

}

</style>

<p>This test passes if it has the same output as the reference. You should see a black border box below.</p>

<div id="border">

  <fieldset>

    <legend>legend</legend>

    Fieldset contents are here.

  </fieldset>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    visibility: hidden;

    border: none;

  }

  .container {

    border: 10px solid green;

    display: inline-block;

    vertical-align: top;

  }

  .height {

    height: 30px;

  }

  .width {

    width: 30px;

  }

  </style>

</head>

<body>

  <div class="container"><fieldset class="basic"></fieldset></div>

  <br>

  <div class="container"><fieldset class="basic height"></fieldset></div>

  <br>

  <div class="container"><fieldset class="basic height"></fieldset></div>

  <br>

  <div class="container"><fieldset class="basic width"></fieldset></div>

  <br>

  <div class="container"><fieldset class="basic width"></fieldset></div>

  <br>

  <fieldset class="height"><legend>legend</legend></fieldset>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on fieldset elements should cause them to be sized as if they had no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-fieldset-003-ref.html">

  <style>

  .contain {

    contain: size;

    visibility: hidden;

    border: none;

    color: transparent;

  }

  .container {

    border: 10px solid green;

    display: inline-block;

    vertical-align: top;

  }

  .innerContents {

    height: 50px;

    width: 50px;

  }

  .minHeight {

    min-height: 30px;

  }

  .height {

    height: 30px;

  }

  .minWidth {

    min-width: 30px;

  }

  .width {

    width: 30px;

  }

  </style>

</head>

<body>

  <!--Note: The following .container class is used to help test if size-contained

  fieldsets and non-contained fieldsets have the same size. Normally, we'd test

  that a fieldset with children and size-containment is drawn identically to a

  fieldset without containment or children. However, when we have a legend as

  a child, border placement and padding of the fieldset are changed.

  To check the dimensions between the ref-case and test-case without

  failing because of the border/padding differences, we make the fieldset

  {visibility:hidden; border:none;} and add a .container wrapper div.-->

  <!--CSS Test: A size-contained fieldset element with no specified size should size itself as if it had no contents.-->

  <div class="container">

  <fieldset class="contain">

    <legend>legend</legend>

    <div class="innerContents">inner</div>

  </fieldset>

  </div>

  <br>

  <!--CSS Test: A size-contained fieldset element with specified min-height should size itself as if it had no contents.-->

  <div class="container">

  <fieldset class="contain minHeight">

    <legend>legend</legend>

    <div class="innerContents">inner</div>

  </fieldset>

  </div>

  <br>

  <!--CSS Test: A size-contained fieldset element with specified height should size itself as if it had no contents.-->

  <div class="container">

  <fieldset class="contain height">

    <legend>legend</legend>

    <div class="innerContents">inner</div>

  </fieldset>

  </div>

  <br>

  <!--CSS Test: A size-contained fieldset element with specified min-width should size itself as if it had no contents.-->

  <div class="container">

  <fieldset class="contain minWidth">

    <legend>legend</legend>

    <div class="innerContents">inner</div>

  </fieldset>

  </div>

  <br>

  <!--CSS Test: A size-contained fieldset element with specified width should size itself as if it had no contents.-->

  <div class="container">

  <fieldset class="contain width">

    <legend>legend</legend>

    <div class="innerContents">inner</div>

  </fieldset>

  </div>

  <br>

  <!--CSS Test: A size contained fieldset element with a legend should draw its legend and border in the same way as a non-contained fieldset element-->

  <fieldset class="height" style="contain:size;">

    <legend>legend</legend>

  </fieldset>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .container {

    border: 10px solid green;

    display: inline-block;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 30px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  fieldset {

    border: none;

    color: transparent;

  }

  legend, .innerContents {

    width: 0;

    height: 0;

    padding: 0;

  }

  </style>

</head>

<body>

  <div class="flexBaselineCheck">

  outside before<fieldset>

    <legend>l</legend>

    <div class="innerContents">i</div>

  </fieldset>outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on fieldset elements shouldn't prevent them from being baseline-aligned regularly.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-fieldset-004-ref.html">

  <style>

  .contain {

    contain: size;

    border: none;

    color: transparent;

    visibility: hidden;

  }

  .innerContents {

    height: 50px;

    width: 50px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained fieldset element should perform baseline alignment regularly.-->

  <div class="flexBaselineCheck">

  outside before<fieldset class="contain">

    <legend>legend</legend>

    <div class="innerContents">inner</div>

  </fieldset>outside after

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    display: flex;

    border: 1em solid green;

  }

  .height-ref {

    height: 40px;

    background: lightblue;

  }

  .width-ref {

    width: 40px;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 40px;

  }

  </style>

</head>

<body>

  <div class="basic"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic floatLBasic-ref"></div>

  <br>

  <div class="basic floatLWidth-ref"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on flex elements should cause them to be sized as if they had no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-flex-001-ref.html">

  <style>

  .contain {

    display: flex;

    contain:size;

    border: 1em solid green;

    background: red;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 40px;

    background: lightblue;

  }

  .height {

    height: 40px;

    background: lightblue;

  }

  .maxWidth {

    max-width: 40px;

  }

  .width {

    width: 40px;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 40px;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained flex element with no specified size should render at 0 height regardless of content.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained flex element with specified min-height should render at given min-height regardless of content.-->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained flex element with specified height should render at given height regardless of content.-->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained flex element with specified max-width should render at given max-width and zero height regardless of content.-->

  <div class="contain maxWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained flex element with specified width should render at given width and zero height regardless of content.-->

  <div class="contain width"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated flex element with no specified size should render at 0px by 0px regardless of content.-->

  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated flex element with specified width and no specified height should render at given width and 0 height regardless of content.-->

  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div {

  display: inline-flex;

  border: 5px solid green;

  color: transparent;

  width: 0;

  height: 0;

  font-size: 2em;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>

before<div>f</div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on flexbox container</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-flexbox-001-ref.html">

<meta name=assert content="Size containment does apply to flexbox containers, thus their size is the same than if they don't have contents.">

<style>

div {

  display: inline-flex;

  border: 5px solid green;

  contain: size;

  color: transparent;

  font-size: 2em;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>

before<div>flex</div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002-expected.html

<!DOCTYPE html>

<title>Tests that scrollbars are handled correctly in a flex item with contains:size</title>

<link rel="author" title="Google LLC" href="https://www.google.com">

<style>

div > div {

  vertical-align: top;

  display: inline-block;

  contain: size;

  overflow: scroll;

  border: 1px solid;

}

</style>

<p>Test passes if the two lines below look the same.</p>

<div style="line-height: 1.0;">

  <div></div>

</div>

<div style="line-height: 1.0;">

  <div></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002.html

<!DOCTYPE html>

<title>Tests that scrollbars are handled correctly in a flex item with contains:size</title>

<link rel="author" title="Google LLC" href="https://www.google.com">

<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-flexbox-002-ref.html">

<style>

div > div {

  vertical-align: top;

  display: inline-block;

  contain: size;

  overflow: scroll;

  border: 1px solid;

}

</style>

<p>Test passes if the two lines below look the same.</p>

<div style="display: flex; line-height: 1.0;">

  <div></div>

</div>

<div style="line-height: 1.0;">

  <div></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div {

  display: inline-grid;

  border: 5px solid green;

  color: transparent;

  width: 0;

  height: 0;

  font-size: 2em;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>

before<div>g</div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on grid container</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-grid-001-ref.html">

<meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents.">

<style>

div {

  display: inline-grid;

  border: 5px solid green;

  contain: size;

  color: transparent;

  font-size: 2em;

}

</style>

<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p>

before<div>grid</div>after

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on grid container with explicit non-intrinsically sized tracks (and gaps)</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<meta name=assert content="grid-gap, grid-template-columns, and grid-template-rows do affect the size of the grid, even with size containment">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<style>

body {

  overflow: hidden;

}

div {

  position: absolute;

}

#red {

  background: red;

  width: 100px;

  height: 100px;

}

#test {

  background: green;

  contain: size;

  display: grid;

  grid-gap: 20px;

  grid-template-columns: auto 80px; /* 0 + 20 + 80 = 100 */

  grid-template-rows: 40px 40px; /* 40 + 20 + 40 = 100 */

  font-size: 800px;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id=red></div>

<div id=test>&nbsp;</div>

<!--

The &nbsp;, auto sized column, and 800px font size

are to make the test fail in browsers

that do not implement contain:size at all,

by making the box non square.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003-expected.txt

PASS .grid 1

PASS .grid 2

PASS .grid 3

PASS .grid 4

PASS .grid 5

PASS .grid 6

PASS .grid 7

PASS .grid 8

PASS .grid 9

PASS .grid 10

PASS .grid 11

PASS .grid 12

PASS .grid 13

PASS .grid 14

PASS .grid 15

PASS .grid 16

PASS .grid 17

PASS .grid 18

PASS .grid 19

PASS .grid 20

PASS .grid 21

PASS .grid 22

PASS .grid 23

PASS .grid 24

PASS .grid 25

PASS .grid 26

PASS .grid 27

PASS .grid 28

PASS .grid 29

PASS .grid 30

PASS .grid 31

PASS .grid 32

PASS .grid 33

PASS .grid 34

PASS .grid 35

PASS .grid 36

PASS .grid 37

FAIL .grid 38 assert_equals:

<div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);" data-expected-width="0" data-expected-height="0">

    <div></div>

  </div>

width expected 0 but got 100

FAIL .grid 39 assert_equals:

<div class="grid" style="grid: auto 50px / 100px auto;" data-expected-width="100" data-expected-height="50">

  <div data-expected-width="100" data-expected-height="10" data-offset-x="0" data-offset-y="0">X</div>

  <div data-expected-width="40" data-expected-height="10" data-offset-x="100" data-offset-y="0">XX</div>

  <div data-expected-width="100" data-expected-height="50" data-offset-x="0" data-offset-y="10">XXX</div>

  <div data-expected-width="40" data-expected-height="50" data-offset-x="100" data-offset-y="10">XXXX</div>

</div>

width expected 100 but got 140

X

XX

XXX

XXXX

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on grid containers</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

.grid {

  display: inline-grid;

  contain: size;

  position: relative;

  font: 10px/1 Ahem;

}

.wrapper {

  width: 300px;

  height: 150px;

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.grid')">

<div id="log"></div>

<div class="grid" style="grid: 50px / 100px;"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px;"

  data-expected-width="200" data-expected-height="100">

</div>

<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content;"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: 50px / 100px; overflow: scroll;"

  data-expected-width="115" data-expected-height="65">

</div>

<div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px; overflow: scroll;"

  data-expected-width="200" data-expected-height="100">

</div>

<div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content; overflow: scroll;"

  data-expected-width="115" data-expected-height="65">

</div>

<div class="grid" style="grid: 50px / 100px; margin: 2px 4px;"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px;"

  data-expected-width="120" data-expected-height="60">

</div>

<div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px; padding: 3px 6px;"

  data-expected-width="132" data-expected-height="66">

</div>

<div class="grid" style="grid: 60% / 50%;"

  data-expected-width="0" data-expected-height="0">

</div>

<div class="grid" style="grid: auto / auto;"

  data-expected-width="0" data-expected-height="0">

</div>

<div class="grid" style="grid: 1fr / 2fr;"

  data-expected-width="0" data-expected-height="0">

</div>

<div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);"

  data-expected-width="0" data-expected-height="0">

</div>

<div class="grid" style="grid: fit-content(50px) / fit-content(100px);"

  data-expected-width="0" data-expected-height="0">

</div>

<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px);"

  data-expected-width="100" data-expected-height="60">

</div>

<div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px); width: min-content; height: min-content;"

  data-expected-width="50" data-expected-height="60">

</div>

<div class="grid" style="grid: auto 50px 20% 1fr / 100px auto 10% 2fr;"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: repeat(3, 20px) / repeat(4, 25px);"

  data-expected-width="100" data-expected-height="60">

</div>

<div class="grid" style="grid: repeat(3, 20px 10px) / repeat(2, 25px auto 25px);"

  data-expected-width="100" data-expected-height="90">

</div>

<div class="grid" style="grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: repeat(auto-fill, 25px 25px) / repeat(auto-fill, 50px 50px);"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: repeat(auto-fill, 25px 20% 25px) / repeat(auto-fill, 50px 10% 50px);"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: repeat(auto-fit, 50px) / repeat(auto-fit, 100px);"

  data-expected-width="0" data-expected-height="0">

</div>

<div class="grid" style="grid: repeat(auto-fit, 25px 20% 25px) / repeat(auto-fit, 50px 10% 50px);"

  data-expected-width="0" data-expected-height="0">

</div>

<div class="grid" style="grid: 10px repeat(auto-fill, 20px) 10px / 25px repeat(auto-fill, 50px) 25px;"

  data-expected-width="100" data-expected-height="40">

</div>

<div class="grid" style="grid: 50px fit-content(20px) / 100px fit-content(50px);"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: 50px / 100px; grid-gap: 10px 20px;"

  data-expected-width="100" data-expected-height="50">

</div>

<div class="grid" style="grid: 25px 25px / 50px 50px; grid-gap: 10px 20px;"

  data-expected-width="120" data-expected-height="60">

</div>

<div class="grid" style="grid: 10px repeat(2, 10px) / 20px repeat(4, 20px); grid-gap: 5px 10px;"

  data-expected-width="140" data-expected-height="40">

</div>

<div class="grid" style="grid: repeat(auto-fill, 10px 20% 10px) / repeat(auto-fill, 20px 10% 20px); grid-gap: 5px 10px;"

  data-expected-width="60" data-expected-height="30">

</div>

<div class="grid" style="grid: 50px repeat(auto-fill, 10px 10px) / 100px repeat(auto-fill, 20px 20px); grid-gap: 5px 10px;"

  data-expected-width="160" data-expected-height="80">

</div>

<div class="grid" style="grid: repeat(auto-fill, 10px 10px) 50px / repeat(auto-fill, 20px 20px) 100px; grid-gap: 5px 10px;"

  data-expected-width="160" data-expected-height="80">

</div>

<div class="grid" style="grid: 25px repeat(auto-fill, 10px 10px) 25px / 50px repeat(auto-fill, 20px 20px) 50px; grid-gap: 5px 10px;"

  data-expected-width="170" data-expected-height="85">

</div>

<div class="grid" style="grid: 25px repeat(auto-fit, 10px 10px) 25px / 50px repeat(auto-fit, 20px 20px) 50px; grid-gap: 5px 10px;"

  data-expected-width="110" data-expected-height="55">

</div>

<div class="wrapper">

  <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"

    data-expected-width="100" data-expected-height="75">

  </div>

</div>

<div class="wrapper">

  <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"

    data-expected-width="0" data-expected-height="0">

  </div>

</div>

<div class="wrapper">

  <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"

    data-expected-width="100" data-expected-height="75">

    <div></div>

  </div>

</div>

<div class="wrapper">

  <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"

    data-expected-width="0" data-expected-height="0">

    <div></div>

  </div>

</div>

<div class="grid" style="grid: auto 50px / 100px auto;"

  data-expected-width="100" data-expected-height="50">

  <div data-expected-width="100" data-expected-height="10"

    data-offset-x="0" data-offset-y="0">X</div>

  <div data-expected-width="40" data-expected-height="10"

    data-offset-x="100" data-offset-y="0">XX</div>

  <div data-expected-width="100" data-expected-height="50"

    data-offset-x="0" data-offset-y="10">XXX</div>

  <div data-expected-width="40" data-expected-height="50"

    data-offset-x="100" data-offset-y="10">XXXX</div>

</div>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004-expected.txt

PASS .grid 1

FAIL .grid 2 assert_equals:

<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 3

FAIL .grid 4 assert_equals:

<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 5

PASS .grid 6

PASS .grid 7

FAIL .grid 8 assert_equals:

<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 9

FAIL .grid 10 assert_equals:

<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 11

PASS .grid 12

PASS .grid 13

FAIL .grid 14 assert_equals:

<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="0">XXXX</div>

</div>

width expected 0 but got 100

PASS .grid 15

PASS .grid 16

PASS .grid 17

PASS .grid 18

PASS .grid 19

PASS .grid 20

PASS .grid 21

FAIL .grid 22 assert_equals:

<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

width expected 100 but got 300

PASS .grid 23

PASS .grid 24

PASS .grid 25

FAIL .grid 26 assert_equals:

<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 27

FAIL .grid 28 assert_equals:

<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 29

PASS .grid 30

PASS .grid 31

FAIL .grid 32 assert_equals:

<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 33

FAIL .grid 34 assert_equals:

<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 35

PASS .grid 36

PASS .grid 37

FAIL .grid 38 assert_equals:

<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 39

FAIL .grid 40 assert_equals:

<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 41

PASS .grid 42

PASS .grid 43

FAIL .grid 44 assert_equals:

<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 45

FAIL .grid 46 assert_equals:

<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

width expected 0 but got 300

PASS .grid 47

PASS .grid 48

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

XXXX

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on grid containers with percentages</title>

<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<meta name="assert" content="Checks that grid containers with size containment and their grid items are sized correctly when the track sizing functions contain percentages.">

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

<style>

.grid {

  display: grid;

  contain: size;

  font: 75px/1 Ahem;

}

.min-content {

  height: min-content;

  width: min-content;

}

.max-content {

  height: max-content;

  width: max-content;

}

.fixed {

  height: 100px;

  width: 100px;

}

.percent {

  grid: 50% / 200%;

}

.calc {

  grid: calc(100px + 50%) / calc(100px + 200%);

}

.minmax-percent-fixed {

  grid: minmax(50%, 100px) / minmax(200%, 100px);

}

.minmax-fixed-percent {

  grid: minmax(100px, 50%) / minmax(100px, 200%);

}

.minmax-percent-flex {

  grid: minmax(50%, 1fr) / minmax(200%, 1fr);

}

.minmax-percent-intrinsic {

  grid: minmax(50%, min-content) / minmax(200%, min-content);

}

.minmax-intrinsic-percent {

  grid: minmax(min-content, 50%) / minmax(min-content, 200%);

}

.fit-content {

  grid: fit-content(50%) / fit-content(200%);

}

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<body onload="checkLayout('.grid')">

<div id="log"></div>

<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid percent min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid percent max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="50" data-expected-width="200"></div>

</div>

<div class="grid percent fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="50" data-expected-width="200">XXXX</div>

</div>

<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="100"></div>

</div>

<div class="grid calc min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="100"></div>

</div>

<div class="grid calc max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="150" data-expected-width="300"></div>

</div>

<div class="grid calc fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="150" data-expected-width="300">XXXX</div>

</div>

<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="0"></div>

</div>

<div class="grid minmax-percent-fixed min-content" data-expected-height="100" data-expected-width="0">

  <div data-expected-height="100" data-expected-width="0">XXXX</div>

</div>

<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="200"></div>

</div>

<div class="grid minmax-percent-fixed max-content" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="200">XXXX</div>

</div>

<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="200"></div>

</div>

<div class="grid minmax-percent-fixed fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="200">XXXX</div>

</div>

<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="100"></div>

</div>

<div class="grid minmax-fixed-percent min-content" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="100"></div>

</div>

<div class="grid minmax-fixed-percent max-content" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="100"></div>

</div>

<div class="grid minmax-fixed-percent fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="100">XXXX</div>

</div>

<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid minmax-percent-flex min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid minmax-percent-flex max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="200"></div>

</div>

<div class="grid minmax-percent-flex fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="100" data-expected-width="200">XXXX</div>

</div>

<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid minmax-intrinsic-percent min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid minmax-intrinsic-percent max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="50" data-expected-width="100"></div>

</div>

<div class="grid minmax-intrinsic-percent fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid minmax-percent-intrinsic min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid minmax-percent-intrinsic max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0">XXXX</div>

</div>

<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="50" data-expected-width="200"></div>

</div>

<div class="grid minmax-percent-intrinsic fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="75" data-expected-width="200">XXXX</div>

</div>

<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid fit-content min-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid fit-content max-content" data-expected-height="0" data-expected-width="0">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="0" data-expected-width="0"></div>

</div>

<div class="grid fit-content fixed" data-expected-height="100" data-expected-width="100">

  <div data-expected-height="75" data-expected-width="300">XXXX</div>

</div>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">

  <style>

  .basic {

    display: grid;

    border: 1em solid green;

  }

  .height-ref {

    height: 40px;

    background: lightblue;

  }

  .width-ref {

    width: 40px;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 40px;

  }

  </style>

</head>

<body>

  <div class="basic"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic floatLBasic-ref"></div>

  <br>

  <div class="basic floatLWidth-ref"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on grid elements should cause them to be sized as if they had no contents.</title>

  <link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-grid-005-ref.html">

  <style>

  .contain {

    display: grid;

    contain:size;

    border: 1em solid green;

    background: red;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 40px;

    background: lightblue;

  }

  .height {

    height: 40px;

    background: lightblue;

  }

  .maxWidth {

    max-width: 40px;

  }

  .width {

    width: 40px;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 40px;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained grid element with no specified size should render at 0 height regardless of content.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained grid element with specified min-height should render at given min-height regardless of content.-->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained grid element with specified height should render at given height regardless of content.-->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained grid element with specified max-width should render at given max-width and zero height regardless of content.-->

  <div class="contain maxWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained grid element with specified width should render at given width and zero height regardless of content.-->

  <div class="contain width"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated grid element with no specified size should render at 0px by 0px regardless of content.-->

  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated grid element with specified width and no specified height should render at given width and 0 height regardless of content.-->

  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    display: inline-block;

    border: 1em solid green;

  }

  .height-ref {

    height: 50px;

  }

  .width-ref {

    width: 50px;

  }

  .innerContents {

    color: transparent;

    width: 0;

    height: 0;

  }

  </style>

</head>

<body>

  <div class="basic"><div class="innerContents">i</div></div>

  <br>

  outside before<div class="basic"><div class="innerContents">i</div></div>outside after

  <br>

  <div class="basic height-ref"><div class="innerContents">i</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">i</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">i</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">i</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-inline-block-001-ref.html">

  <style>

  .contain {

    display: inline-block;

    contain:size;

    border: 1em solid green;

    background: red;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 50px;

  }

  .height {

    height: 50px;

  }

  .minWidth {

    min-width: 50px;

  }

  .width {

    width: 50px;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained inline-block element with no specified size should render at 0 height and 0 width regardless of content.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained inline-block element should perform baseline alignment regularly.-->

  outside before<div class="contain"><div class="innerContents">inner</div></div>outside after

  <br>

  <!--CSS Test: A size-contained inline-block element with specified min-height should render at given min-height and 0 width regardless of content.-->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained inline-block element with specified height should render at given height and 0 width regardless of content.-->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained inline-block element with specified min-width should render at given min-width and 0 height regardless of content.-->

  <div class="contain minWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained inline-block element with specified width should render at given width and 0 height regardless of content.-->

  <div class="contain width"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    display: inline-block;

    overflow: scroll;

    position: relative;

    border: 2px solid green;

  }

  .height-ref {

    height: 60px;

  }

  .width-ref {

    width: 60px;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

    position: absolute;

  }

  </style>

</head>

<body>

  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in

       the testcase, and we simply use 'position: absolute' on the descendants

       wherever the testcase has 'contain: size' on the container.  This

       produces an accurate reference rendering, because out-of-flow content

       doesn't contribute to the container's sizing, but does create scrollable

       overflow (i.e. it produces scrollbars of the appropriate size for the

       amount of overflow). -->

  <div class="basic"><div class="innerContents">inner</div></div>

  <br>

  outside before

  <div class="basic"><div class="innerContents">inner</div></div>

  outside after

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on 'overflow:scroll' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-inline-block-002-ref.html">

  <style>

  .contain {

    display: inline-block;

    overflow: scroll;

    contain:size;

    border: 2px solid green;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 60px;

  }

  .height {

    height: 60px;

  }

  .minWidth {

    min-width: 60px;

  }

  .width {

    width: 60px;

  }

  </style>

</head>

<body>

  <!-- NOTE: In all cases below, the expectation is that the size-contained

       element should be sized as if it had no contents (while honoring

       whatever sizing properties are provided). -->

  <!-- A size-contained scrollable inline-block with no specified size -->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block should perform baseline

       alignment regularly, based on contents' baseline. -->

  outside before

  <div class="contain"><div class="innerContents">inner</div></div>

  outside after

  <br>

  <!-- A size-contained scrollable inline-block with specified min-height -->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified height -->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified min-width -->

  <div class="contain minWidth"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified width -->

  <div class="contain width"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    display: inline-block;

    overflow: auto;

    position: relative;

    border: 2px solid green;

  }

  .height-ref {

    height: 60px;

  }

  .width-ref {

    width: 60px;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

    position: absolute;

  }

  </style>

</head>

<body>

  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in

       the testcase, and we simply use 'position: absolute' on the descendants

       wherever the testcase has 'contain: size' on the container.  This

       produces an accurate reference rendering, because out-of-flow content

       doesn't contribute to the container's sizing, but does create scrollable

       overflow (i.e. it produces scrollbars of the appropriate size for the

       amount of overflow). -->

  <div class="basic"><div class="innerContents">inner</div></div>

  <br>

  outside before

  <div class="basic"><div class="innerContents">inner</div></div>

  outside after

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on 'overflow:auto' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-inline-block-003-ref.html">

  <style>

  .contain {

    display: inline-block;

    overflow: auto;

    contain:size;

    border: 2px solid green;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 60px;

  }

  .height {

    height: 60px;

  }

  .minWidth {

    min-width: 60px;

  }

  .width {

    width: 60px;

  }

  </style>

</head>

<body>

  <!-- NOTE: In all cases below, the expectation is that the size-contained

       element should be sized as if it had no contents (while honoring

       whatever sizing properties are provided). -->

  <!-- A size-contained scrollable inline-block with no specified size -->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block should perform baseline

       alignment regularly, based on contents' baseline. -->

  outside before

  <div class="contain"><div class="innerContents">inner</div></div>

  outside after

  <br>

  <!-- A size-contained scrollable inline-block with specified min-height -->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified height -->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified min-width -->

  <div class="contain minWidth"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified width -->

  <div class="contain width"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    display: inline-block;

    overflow: hidden;

    position: relative;

    border: 2px solid green;

  }

  .height-ref {

    height: 60px;

  }

  .width-ref {

    width: 60px;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

    position: absolute;

  }

  </style>

</head>

<body>

  <!-- NOTE: In the reference-case scenarios here, we use the same DOM as in

       the testcase, and we simply use 'position: absolute' on the descendants

       wherever the testcase has 'contain: size' on the container.  This

       produces an accurate reference rendering, because out-of-flow content

       doesn't contribute to the container's sizing, but does create scrollable

       overflow. -->

  <div class="basic"><div class="innerContents">inner</div></div>

  <br>

  outside before

  <div class="basic"><div class="innerContents">inner</div></div>

  outside after

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic height-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

  <br>

  <div class="basic width-ref"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on 'overflow:hidden' inline-block elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-inline-block-004-ref.html">

  <style>

  .contain {

    display: inline-block;

    overflow: hidden;

    contain:size;

    border: 2px solid green;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .minHeight {

    min-height: 60px;

  }

  .height {

    height: 60px;

  }

  .minWidth {

    min-width: 60px;

  }

  .width {

    width: 60px;

  }

  </style>

</head>

<body>

  <!-- NOTE: In all cases below, the expectation is that the size-contained

       element should be sized as if it had no contents (while honoring

       whatever sizing properties are provided). -->

  <!-- A size-contained scrollable inline-block with no specified size -->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block should perform baseline

       alignment regularly, based on contents' baseline. -->

  outside before

  <div class="contain"><div class="innerContents">inner</div></div>

  outside after

  <br>

  <!-- A size-contained scrollable inline-block with specified min-height -->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified height -->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified min-width -->

  <div class="contain minWidth"><div class="innerContents">inner</div></div>

  <br>

  <!-- A size-contained scrollable inline-block with specified width -->

  <div class="contain width"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    border: 1em solid green;

    display: inline-flex;

  }

  .width-ref {

    width: 50px;

  }

  .innerContents {

    color: transparent;

    width: 0;

    height: 0;

  }

  </style>

</head>

<body>

  aa<div class="basic"><div class="innerContents">i</div></div>bb

  <br>

  aa<div class="basic width-ref"><div class="innerContents">i</div></div>bb

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on inline-flex elements should cause them to be sized as if they had no contents and baseline-aligned regularly.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-inline-flex-001-ref.html">

  <style>

  .contain {

    display: inline-flex;

    contain:size;

    border: 1em solid green;

    background: red;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .width {

    width: 50px;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained inline-flex element without dimensions should ensure baseline alignment behaves regularly.-->

  aa<div class="contain"><div class="innerContents">inner</div></div>bb

  <br>

  <!--CSS Test: A size-contained inline-flex element with specified width should ensure baseline alignment behaves regularly.-->

  aa<div class="contain width"><div class="innerContents">inner</div></div>bb

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001-expected.html

<!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

    {

      font-family: monospace;

      font-size: 20px;

      width: 8ch;

    }

  </style>

  <p>Test passes if "AB", "CD", "EF" and "GH" are vertically aligned into 1 single column and if there is <strong>no red</strong>.

  <div>AB<br>CD<br>EF<br>GH</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: size' element is monolithic</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-multicol-1/#column-gaps-and-rules">

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">

  <link rel="match" href="reference/contain-size-monolithic-001-ref.html">

  <meta content="This test checks that an element with size containment becomes monolithic. In this test, the only way to break the content of such monolithic element is to break (or slice) the content at each pair of characters. Since column rules are only drawn between two columns that both have content and since the test expects only 1 column filled with content, therefore the column rule should not be painted, thus the 'no red' test success condition." name="assert">

  <meta name="flags" content="">

  <style>

  div#multi-column

    {

      column-count: 2;

      column-fill: balance; /* balance is the initial column-fill value */

      column-gap: 4ch;

      column-rule: red solid 4ch;

      column-width: 2ch;

      font-family: monospace;

      font-size: 20px;

      width: 8ch;

    }

  div#size-contain

    {

      contain: size;

    }

  </style>

  <p>Test passes if "AB", "CD", "EF" and "GH" are vertically aligned into 1 single column and if there is <strong>no red</strong>.

  <div id="multi-column">

    <div id="size-contain">AB CD EF GH</div>

  </div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002-expected.html

<!DOCTYPE html>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<p>Test passes if there is a filled green square.</p>

<div style="width:100px; height:100px; background:green;"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002.html

<!DOCTYPE html>

<html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: absolute positioned 'contain: size' element is monolithic</title>

  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">

  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">

  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

  <link rel="match" href="../reference/ref-filled-green-100px-square-only.html">

  <meta  name="assert" content="This test checks that an absolute positioned element with size containment is monolithic.">

  <style>

  #multicol {

    width: 300px;

    column-count: 3;

  }

  #container {

    position: relative;

  }

  #abs-size-contain {

    position: absolute;

    contain: size;

    width: 100px;

    height: 100px;

    background: green;

  }

  </style>

  <p>Test passes if there is a filled green square.</p>

  <div id="multicol">

    <div id="container">

      <div id="abs-size-contain"></div>

    </div>

  </div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on a multicol with set column size (and gap)</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<meta name=assert content="columns and column-gap do affect the size of a multicol, even with size containment">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<style>

div {

  position: absolute;

}

#red {

  background: red;

  width: 100px;

  height: 100px;

}

#test {

  background: green;

  contain: size;

  columns: 2 40px;

  column-gap: 20px;

  min-height: 100px;

  color: transparent;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id=red></div>

<div id=test>

filler filler filler filler filler filler filler filler

filler filler filler filler filler filler filler filler

filler filler filler filler filler filler filler filler

filler filler filler filler filler filler filler filler

</div>

<!--

The filler text, min-height (instead of height) and transparent color

are to make the test fail in browsers

that do not implement contain:size at all,

by making the box non square.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    border: 1em solid green;

    column-count: 3;

  }

  .height-ref {

    height: 20px;

    background: lightblue;

  }

  .width-ref {

    width: 20px;

  }

  .floatLBasic-ref {

    float: left;

  }

  .floatLWidth-ref {

    float: left;

    width: 20px;

  }

  </style>

</head>

<body>

  <div class="basic"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic height-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic width-ref"></div>

  <br>

  <div class="basic floatLBasic-ref"></div>

  <br>

  <div class="basic floatLWidth-ref"></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-multicol-002-ref.html">

  <style>

  .contain {

    contain: size;

    border: 1em solid green;

    background: red;

    column-count: 3;

  }

  .innerContents {

    color: transparent;

    height: 50px;

    width: 50px;

  }

  .minHeight {

    min-height: 20px;

    background: lightblue;

  }

  .height {

    height: 20px;

    background: lightblue;

  }

  .maxWidth {

    max-width: 20px;

  }

  .width {

    width: 20px;

  }

  .floatLBasic {

    float: left;

  }

  .floatLWidth {

    float: left;

    width: 20px;

  }

  </style>

</head>

<body>

  <!--CSS Test: A size-contained multicol element with no specified size should render at 0 height regardless of content.-->

  <div class="contain"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained multicol element with specified min-height should render at given min-height regardless of content.-->

  <div class="contain minHeight"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained multicol element with specified height should render at given height regardless of content.-->

  <div class="contain height"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained multicol element with specified max-width should render at given max-width and zero height regardless of content.-->

  <div class="contain maxWidth"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained multicol element with specified width should render at given width and zero height regardless of content.-->

  <div class="contain width"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated multicol element with no specified size should render at 0px by 0px regardless of content.-->

  <div class="contain floatLBasic"><div class="innerContents">inner</div></div>

  <br>

  <!--CSS Test: A size-contained floated multicol element with specified width and no specified height should render at given width and 0 height regardless of content.-->

  <div class="contain floatLWidth"><div class="innerContents">inner</div></div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  .basic {

    border: 1em solid green;

    column-count: 3;

  }

  .innerContents {

    color: transparent;

    height: 0;

    width: 0;

  }

  .col-width-ref {

    column-width: 20px;

  }

  .col-gap-ref {

    column-gap: 5px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  .min {

    width: min-content;

  }

  .max {

    width: max-content;

  }

  </style>

</head>

<body>

  <div class="flexBaselineCheck">

    outside before

    <div class="basic" style="max-height:0px">

      <div class="innerContents">inner</div>

    </div>

    outside after

  </div>

  <br>

  <div class="basic min col-width-ref"></div>

  <br>

  <div class="basic max col-width-ref"></div>

  <br>

  <div class="basic min col-gap-ref col-width-ref"></div>

  <br>

  <div class="basic max col-gap-ref col-width-ref"></div>

  <br>

  <div class="min">

    <div class="basic"></div>

  </div>

  <br>

  <div class="max">

    <div class="basic"></div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on multicol elements should cause them to be sized as if they had no contents</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-multicol-003-ref.html">

  <style>

  .contain {

    contain: size;

    border: 1em solid green;

    background: red;

    column-count: 3;

  }

  .innerContents {

    color: transparent;

    height: 100px;

    width: 100px;

  }

  .col-width {

    column-width: 20px;

  }

  .col-gap {

    column-gap: 5px;

  }

  .flexBaselineCheck {

    display: flex;

    align-items: baseline;

  }

  .min {

    width: min-content;

  }

  .max {

    width: max-content;

  }

  </style>

</head>

<body>

  <!-- This test verifies that contain:size doesn't interfere with the

       determination of a multicol element's baseline. -->

  <div class="flexBaselineCheck">

    outside before

    <div class="contain">

      <div class="innerContents">inner</div>

    </div>

    outside after

  </div>

  <br>

  <!--The following tests are used to ensure column-gaps and column-widths continue to contribute to the minimum and maximum width of a size-contained multicol element. Each should render as if it had no contents.-->

  <div class="contain min col-width"><div class="innerContents">inner</div></div>

  <br>

  <div class="contain max col-width"><div class="innerContents">inner</div></div>

  <br>

  <div class="contain min col-gap col-width"><div class="innerContents">inner</div></div>

  <br>

  <div class="contain max col-gap col-width"><div class="innerContents">inner</div></div>

  <br>

  <div class="min">

    <div class="contain">

      <div class="innerContents">inner</div>

    </div>

  </div>

  <br>

  <div class="max">

    <div class="contain">

      <div class="innerContents">inner</div>

    </div>

  </div>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004-expected.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

    .cols {

      column-count: 3;

      column-rule: 1px dotted blue;

      column-fill: auto;

      border: 2px solid blue;

      height: 50px;

      width: 300px;

    }

    .innerObject {

      height: 200px;

      width: 100px;

      background: orange;

    }

  </style>

</head>

  <body>

    <div class="cols">

      <canvas class="innerObject">

        <!-- Note: We use a canvas object here as a generic reference for

             something monolithic/non-fragmentable. -->

      </canvas>

    </div>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

  <title>CSS Test: 'contain: size' should force elements to be monolithic, i.e. to not fragment inside a multicol element.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-multicol-004-ref.html">

  <style>

    .contain {

      contain:size;

    }

    .cols {

      column-count: 3;

      column-rule: 1px dotted blue;

      column-fill: auto;

      border: 2px solid blue;

      height: 50px;

      width: 300px;

    }

    .innerObject {

      height: 200px;

      width: 100px;

      background: orange;

    }

  </style>

</head>

  <body>

    <div class="cols">

      <div class="contain innerObject">

      </div>

    </div>

  </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item-expected.txt

There should be a green square below.

FAIL #flex 1 assert_equals:

<div id="flex">

  <div id="multicol" data-expected-width="100" data-expected-height="100">

    <div style="width:1000px; height:1px;"></div>

  </div>

</div>

width expected 100 but got 784

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item.html

<!DOCTYPE HTML>

<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=863454">

<style>

  #flex {

    display: flex;

  }

  #multicol {

    columns: 3;

    min-width: 0;

    column-gap: 50px;

    contain:size;

    height:100px;

    background:green;

  }

</style>

<p>There should be a green square below.</p>

<div id="flex">

  <div id="multicol" data-expected-width="100" data-expected-height="100">

    <div style="width:1000px; height:1px;"></div>

  </div>

</div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/check-layout-th.js"></script>

<script>

  checkLayout("#flex");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">

<style>

object {

  background: green;

  padding: 50px;

  contain: size;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<object data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect fill='red' width='100' height='100'/></svg>">

</object>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">

<style>

svg {

  background: green;

  padding: 50px 0;

  contain: size;

}

</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<svg width="100" viewBox="0 0 50 50">

  <rect fill="red" width="50" height="50"/>

</svg>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Reference</title>

<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

<link rel="author" href="https://mozilla.org" title="Mozilla">

<style>

  video, audio, canvas, svg, img, embed, object, iframe {

    border: 3px solid teal;

    max-height: 0px;

    max-width: 0px;

    margin: 15px;

  }

</style>

<body>

  <!-- video element: -->

  <video></video>

  <video controls></video>

  <video poster="support/blue-100x100.png"></video>

  <video poster="support/blue-100x100.png" controls></video>

  <video src="support/white.webm" controls></video>

  <video src="support/white.webm" controls></video>

  <br>

  <!-- audio element with controls, and a few other misc replaced elements: -->

  <audio controls></audio>

  <canvas></canvas>

  <svg></svg>

  <br>

  <!-- image elements: -->

  <img src="broken">

  <img src="support/blue-100x100.png">

  <picture><source srcset="support/blue-100x100.png"><img></picture>

  <br>

  <!-- document-embedding elements (with & without a target resource that

       could provide an intrinsic ratio in some cases, in the absence of

       contain:size): -->

  <embed>

  <embed src="support/blue-100x100.png">

  <object></object>

  <object data="support/blue-100x100.png"></object>

  <iframe></iframe>

  <iframe src="support/blue-100x100.png"></iframe>

  <br>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: intrinsic size of size-contained replaced elems</title>

<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

<link rel="author" href="https://mozilla.org" title="Mozilla">

<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

<link rel="match" href="contain-size-replaced-003-ref.html">

<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">

<style>

  video, audio, canvas, svg, img, embed, object, iframe {

    border: 3px solid teal;

    contain: size;

    margin: 15px;

    width: auto;

    height: auto;

  }

</style>

<body>

  <!-- video element: -->

  <video></video>

  <video controls></video>

  <video poster="support/blue-100x100.png"></video>

  <video poster="support/blue-100x100.png" controls></video>

  <video src="support/white.webm" controls></video>

  <video src="support/white.webm" controls></video>

  <br>

  <!-- audio element with controls, and a few other misc replaced elements: -->

  <audio controls></audio>

  <canvas></canvas>

  <svg></svg>

  <br>

  <!-- Image elements: -->

  <img src="broken">

  <img src="support/blue-100x100.png">

  <picture><source srcset="support/blue-100x100.png"><img></picture>

  <br>

  <!-- Document-embedding elements (with & without a target resource that

       could provide an intrinsic ratio in some cases, in the absence of

       contain:size): -->

  <embed>

  <embed src="support/blue-100x100.png">

  <object></object>

  <object data="support/blue-100x100.png"></object>

  <iframe></iframe>

  <iframe src="support/blue-100x100.png"></iframe>

  <br>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Reference</title>

<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

<link rel="author" href="https://mozilla.org" title="Mozilla">

<style>

  video, audio, canvas, svg, img, embed, object, iframe {

    border: 3px solid teal;

    max-height: 0px;

    max-width: 0px;

    margin: 15px;

  }

</style>

<body>

  <!-- video element: -->

  <video></video>

  <video controls></video>

  <video poster="support/blue-100x100.png"></video>

  <video poster="support/blue-100x100.png" controls></video>

  <video src="support/white.webm" controls></video>

  <video src="support/white.webm" controls></video>

  <br>

  <!-- audio element with controls, and a few other misc replaced elements: -->

  <audio controls></audio>

  <canvas></canvas>

  <svg></svg>

  <br>

  <!-- image elements: -->

  <img src="broken">

  <img src="support/blue-100x100.png">

  <picture><source srcset="support/blue-100x100.png"><img></picture>

  <br>

  <!-- document-embedding elements (with & without a target resource that

       could provide an intrinsic ratio in some cases, in the absence of

       contain:size): -->

  <embed>

  <embed src="support/blue-100x100.png">

  <object></object>

  <object data="support/blue-100x100.png"></object>

  <iframe></iframe>

  <iframe src="support/blue-100x100.png"></iframe>

  <br>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: intrinsic size of size-contained replaced elems, with explicit max-content width</title>

<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

<link rel="author" href="https://mozilla.org" title="Mozilla">

<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

<link rel="match" href="contain-size-replaced-003-ref.html">

<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">

<style>

  video, audio, canvas, svg, img, embed, object, iframe {

    border: 3px solid teal;

    contain: size;

    margin: 15px;

    width: max-content; /* This means 0, given 'contain:size'. */

    height: auto;

  }

</style>

<body>

  <!-- video element: -->

  <video></video>

  <video controls></video>

  <video poster="support/blue-100x100.png"></video>

  <video poster="support/blue-100x100.png" controls></video>

  <video src="support/white.webm" controls></video>

  <video src="support/white.webm" controls></video>

  <br>

  <!-- audio element with controls, and a few other misc replaced elements: -->

  <audio controls></audio>

  <canvas></canvas>

  <svg></svg>

  <br>

  <!-- Image elements: -->

  <img src="broken">

  <img src="support/blue-100x100.png">

  <picture><source srcset="support/blue-100x100.png"><img></picture>

  <br>

  <!-- Document-embedding elements (with & without a target resource that

       could provide an intrinsic ratio in some cases, in the absence of

       contain:size): -->

  <embed>

  <embed src="support/blue-100x100.png">

  <object></object>

  <object data="support/blue-100x100.png"></object>

  <iframe></iframe>

  <iframe src="support/blue-100x100.png"></iframe>

  <br>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Reference</title>

<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

<link rel="author" href="https://mozilla.org" title="Mozilla">

<style>

  video, audio, canvas, svg, img, embed, object, iframe {

    border: 3px solid teal;

    max-height: 0px;

    max-width: 0px;

    margin: 15px;

  }

</style>

<body>

  <!-- video element: -->

  <video></video>

  <video controls></video>

  <video poster="support/blue-100x100.png"></video>

  <video poster="support/blue-100x100.png" controls></video>

  <video src="support/white.webm" controls></video>

  <video src="support/white.webm" controls></video>

  <br>

  <!-- audio element with controls, and a few other misc replaced elements: -->

  <audio controls></audio>

  <canvas></canvas>

  <svg></svg>

  <br>

  <!-- image elements: -->

  <img src="broken">

  <img src="support/blue-100x100.png">

  <picture><source srcset="support/blue-100x100.png"><img></picture>

  <br>

  <!-- document-embedding elements (with & without a target resource that

       could provide an intrinsic ratio in some cases, in the absence of

       contain:size): -->

  <embed>

  <embed src="support/blue-100x100.png">

  <object></object>

  <object data="support/blue-100x100.png"></object>

  <iframe></iframe>

  <iframe src="support/blue-100x100.png"></iframe>

  <br>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: intrinsic size of size-contained replaced elems, with explicit max-content height</title>

<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

<link rel="author" href="https://mozilla.org" title="Mozilla">

<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

<link rel="match" href="contain-size-replaced-003-ref.html">

<meta name=assert content="This test checks that various size-contained replaced elements have an intrinsic size of 0,0 regardless of their content.">

<style>

  video, audio, canvas, svg, img, embed, object, iframe {

    border: 3px solid teal;

    contain: size;

    margin: 15px;

    height: max-content; /* This means 0, given 'contain:size'. */

    width: auto;

  }

</style>

<body>

  <!-- video element: -->

  <video></video>

  <video controls></video>

  <video poster="support/blue-100x100.png"></video>

  <video poster="support/blue-100x100.png" controls></video>

  <video src="support/white.webm" controls></video>

  <video src="support/white.webm" controls></video>

  <br>

  <!-- audio element with controls, and a few other misc replaced elements: -->

  <audio controls></audio>

  <canvas></canvas>

  <svg></svg>

  <br>

  <!-- Image elements: -->

  <img src="broken">

  <img src="support/blue-100x100.png">

  <picture><source srcset="support/blue-100x100.png"><img></picture>

  <br>

  <!-- Document-embedding elements (with & without a target resource that

       could provide an intrinsic ratio in some cases, in the absence of

       contain:size): -->

  <embed>

  <embed src="support/blue-100x100.png">

  <object></object>

  <object data="support/blue-100x100.png"></object>

  <iframe></iframe>

  <iframe src="support/blue-100x100.png"></iframe>

  <br>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>

<style>

  body > div, video, audio, img, canvas, svg, iframe {

    border: 3px solid orange;

    contain: size;

    margin-bottom: 15px;

    width: 0px;

    height: 0px;

    float: left;

    clear: both;

  }

</style>

<div>abc</div>

<video></video><br>

<video controls></video><br>

<img src="support/60x60-green.png"><br>

<picture>

<source srcset="support/60x60-green.png">

    <img>

</picture><br>

<canvas></canvas><br>

<svg></svg><br>

<iframe></iframe>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="contain-size-replaced-004-ref.html">

<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">

<style>

  body > div, video, audio, img, canvas, svg, iframe {

    border: 3px solid orange;

    contain: size;

    margin-bottom: 15px;

    width: min-content;

    height: min-content;

    float: left;

    clear: both;

  }

</style>

<div>abc</div>

<video></video><br>

<video controls></video><br>

<img src="support/60x60-green.png"><br>

<picture>

<source srcset="support/60x60-green.png">

    <img>

</picture><br>

<canvas></canvas><br>

<svg></svg><br>

<iframe></iframe>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>

<style>

  body > div, video, audio, img, canvas, svg, iframe {

    position: absolute;

    border: 3px solid orange;

    contain: size;

    margin-bottom: 15px;

    width: 0px;

    height: 0px;

    float: left;

    clear: both;

  }

</style>

<div>abc</div>

<video></video><br>

<video controls></video><br>

<img src="support/60x60-green.png"><br>

<picture>

<source srcset="support/60x60-green.png">

    <img>

</picture><br>

<canvas></canvas><br>

<svg></svg><br>

<iframe></iframe>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="contain-size-replaced-005-ref.html">

<meta name=assert content="This test checks that intrinsic size of out-of-flow replaced elements with 'contain: size' is zero.">

<style>

  body > div, video, audio, img, canvas, svg, iframe {

    position: absolute;

    border: 3px solid orange;

    contain: size;

    margin-bottom: 15px;

    width: min-content;

    height: min-content;

    float: left;

    clear: both;

  }

</style>

<div>abc</div>

<video></video><br>

<video controls></video><br>

<img src="support/60x60-green.png"><br>

<picture>

<source srcset="support/60x60-green.png">

    <img>

</picture><br>

<canvas></canvas><br>

<svg></svg><br>

<iframe></iframe>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>

<style>

  div, video, audio, img, canvas, svg, iframe {

    border: 3px solid orange;

    margin-bottom: 15px;

    width: 25px;

    height: 35px;

    float: left;

    clear: both;

  }

</style>

<div>abc</div>

<video></video><br>

<video controls></video><br>

<img src="support/60x60-green.png"><br>

<picture>

<source srcset="support/60x60-green.png">

    <img>

</picture><br>

<canvas></canvas><br>

<svg></svg><br>

<iframe></iframe>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="contain-size-replaced-006-ref.html">

<meta name=assert content="This test checks that min-width/min-height of replaced elements with 'contain: size' works.">

<style>

  body > div, video, audio, img, canvas, svg, iframe {

    border: 3px solid orange;

    contain: size;

    margin-bottom: 15px;

    min-width: 25px;

    min-height: 35px;

    width: min-content;

    height: min-content;

    float: left;

    clear: both;

  }

</style>

<div>abc</div>

<video></video><br>

<video controls></video><br>

<img src="support/60x60-green.png"><br>

<picture>

<source srcset="support/60x60-green.png">

    <img>

</picture><br>

<canvas></canvas><br>

<svg></svg><br>

<iframe></iframe>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007-expected.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[

  div

  {

  background-color: green;

  height: 100px;

  width: 100px;

  }

  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images">

<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<meta name=assert content="This test checks that an aspect ratio computed from width and height attributes is used even with contain: size.">

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<img src="support/60x60-green.png" width="60" height="60" style="width: 100px; height: auto; contain: size;">

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div {

  display: inline-block;

  border: solid thick;

  overflow: scroll;

}

</style>

<p>This test passes if it has the same output as the reference.</p>

<div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment scrollbars</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-scrollbars-001-ref.html">

<meta name=assert content="This test checks that the size of an element with 'contain: size' includes the scrollbars too.">

<style>

div {

  contain: size;

  display: inline-block;

  border: solid thick;

  overflow: scroll;

}

</style>

<p>This test passes if it has the same output as the reference.</p>

<div>FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div {

  display: inline-block;

  border: solid thick;

  overflow: scroll;

}

</style>

<p>This test passes if it has the same output as the reference.</p>

<div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment scrollbars</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-scrollbars-001-ref.html">

<meta name=assert content="This test checks that the size of a flexbox container with 'contain: size' includes the scrollbars too.">

<style>

div {

  contain: size;

  display: inline-flex;

  border: solid thick;

  overflow: scroll;

}

</style>

<p>This test passes if it has the same output as the reference.</p>

<div>FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

div {

  display: inline-block;

  border: solid thick;

  overflow: scroll;

}

</style>

<p>This test passes if it has the same output as the reference.</p>

<div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment scrollbars</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-scrollbars-001-ref.html">

<meta name=assert content="This test checks that the size of a grid container with 'contain: size' includes the scrollbars too.">

<style>

div {

  contain: size;

  display: inline-grid;

  border: solid thick;

  overflow: scroll;

}

</style>

<p>This test passes if it has the same output as the reference.</p>

<div>FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<style>

#scroller {

  background: lightgreen;

  overflow: scroll;

  padding-bottom: 50px;

  width: 100px;

  height: 100px;

}

#content {

  background: lightblue;

  width: 50px;

  height: 130px;

}

</style>

<div id=scroller>

  <div id=content>

  </div>

</div>

<p>This test passes if it has the same output as the reference.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment scrollbars</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-scrollbars-004-ref.html">

<meta name=assert content="This test checks that contain:size element's content and padding are considered for scrollbars.">

<style>

#scroller {

  contain: size;

  background: lightgreen;

  overflow: scroll;

  padding-bottom: 50px;

  width: 100px;

  height: 100px;

}

#content {

  background: lightblue;

  width: 50px;

  height: 130px;

}

</style>

<div id=scroller>

  <div id=content>

  </div>

</div>

<p>This test passes if it has the same output as the reference.</p>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

select {

  color: white;

  background: white;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<select></select>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on select</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-select-001-ref.html">

<meta name=assert content="<select> elements with 'contain: size' should be treated as having no contents.">

<style>

select {

  color: white;

  background: white;

  contain: size;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<select>

  <option>AVeryLongOption</option>

  <option>Another Option</option>

</select>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002-expected.html

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Containment Test: Reference file</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<style>

select {

  color: white;

  background: white;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<select></select>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002.html

<!DOCTYPE html>

<html class="reftest-wait">

<meta charset="utf-8">

<title>CSS Containment Test: Size containment on select</title>

<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">

<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">

<link rel="match" href="reference/contain-size-select-001-ref.html">

<meta name=assert content="Check that setting 'contain: size' on a <select> elements causes it to be sized as having no contents.">

<style>

select {

  color: white;

  background: white;

}

</style>

<p>Test passes if it has the same output than the reference.</p>

<select id="target">

  <option>AVeryLongOption</option>

  <option>Another Option</option>

</select>

<script>

  window.requestAnimationFrame( () => {

    target.style.contain = "size";

    document.documentElement.removeAttribute("class");

  });

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  select {

    color: transparent;

  }

  .minWidth {

    min-width: 100px;

  }

  .width {

    width: 100px;

  }

  .floatLWidth {

    float: left;

    width: 100px;

  }

  </style>

</head>

<body>

  <select class="floatLWidth">

  </select>

  <br style="clear:both;">

  <select class="minWidth">

  </select>

  <br>

  <select class="width">

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-select-elem-001-ref.html">

  <style>

  select {

    contain: size;

    color: transparent;

  }

  .minWidth {

    min-width: 100px;

  }

  .width {

    width: 100px;

  }

  .floatLWidth {

    float: left;

    width: 100px;

  }

  </style>

</head>

<body>

  <select class="floatLWidth">

    <option>CSS Test: A size-contained floated select with specified width and no specified height should size itself as if it had no contents.</option>

    <option>a</option>

    <option>b</option>

    <option>c</option>

  </select>

  <br style="clear:both;">

  <select class="minWidth">

    <option>CSS Test: A size-contained select with specified min-width should size itself as if it had no contents.</option>

    <option>a</option>

    <option>b</option>

    <option>c</option>

  </select>

  <br>

  <select class="width">

    <option>CSS Test: A size-contained select with specified width should size itself as if it had no contents.</option>

    <option>a</option>

    <option>b</option>

    <option>c</option>

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  select {

    color: transparent;

  }

  .floatLBasic {

    float: left;

  }

  </style>

</head>

<body>

  <select>

  </select>

  <br>

  <select class="floatLBasic">

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-select-elem-002-ref.html">

  <style>

  select {

    contain: size;

    color: transparent;

  }

  .floatLBasic {

    float: left;

  }

  </style>

</head>

<body>

  <select>

    <option>CSS Test: A size-contained select with no specified size should size itself as if it had no contents.</option>

    <option>aaaaaa</option>

    <option>b</option>

    <option>c</option>

  </select>

  <br>

  <select class="floatLBasic">

    <option>CSS Test: A size-contained floated select with no specified size should size itself as if it had no contents.</option>

    <option>a</option>

    <option>b</option>

    <option>c</option>

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  select {

    color: transparent;

  }

  .minWidth {

    min-width: 100px;

  }

  .width {

    width: 100px;

  }

  .floatLWidth {

    float: left;

    width: 100px;

  }

  </style>

</head>

<body>

  <select multiple class="floatLWidth">

  </select>

  <br style="clear:both;">

  <select multiple class="minWidth">

  </select>

  <br>

  <select multiple class="width">

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-select-elem-003-ref.html">

  <style>

  select {

    contain: size;

    color: transparent;

  }

  .minWidth {

    min-width: 100px;

  }

  .width {

    width: 100px;

  }

  .floatLWidth {

    float: left;

    width: 100px;

  }

  </style>

</head>

<body>

  <select multiple class="floatLWidth">

    <option>CSS Test: A size-contained floated select with specified width and no specified height should size itself as if it had no contents.</option>

    <option>a</option>

  </select>

  <br style="clear:both;">

  <select multiple class="minWidth">

    <option>CSS Test: A size-contained select with specified min-width should size itself as if it had no contents.</option>

    <option>a</option>

  </select>

  <br>

  <select multiple class="width">

    <option>CSS Test: A size-contained select with specified width should size itself as if it had no contents.</option>

    <option>a</option>

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  select {

    color: transparent;

  }

  .floatLBasic {

    float: left;

  }

  </style>

</head>

<body>

  <select multiple>

  </select>

  <br>

  <select multiple class="floatLBasic">

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-select-elem-004-ref.html">

  <style>

  select {

    contain: size;

    color: transparent;

  }

  .floatLBasic {

    float: left;

  }

  </style>

</head>

<body>

  <select multiple>

    <option>CSS Test: A size-contained select with no specified size should size itself as if it had no contents.</option>

    <option>aaaaaa</option>

  </select>

  <br>

  <select multiple class="floatLBasic">

    <option>CSS Test: A size-contained floated select with no specified size should size itself as if it had no contents.</option>

    <option>a</option>

  </select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <style>

  select {

    color: transparent;

    /* We make scrollbars transparent because some <option> elements can cause

       overflow, which can cause scrollbars to be active in the test and

       inactive in the reference.  But the test only cares about the sizing. */

    scrollbar-color: transparent transparent;

  }

  .fsMedium {

    /* custom styling for some select elements, which is allowed to influence

       their size (in the same way that it influences the size of an empty

       select element): */

    font-size: 10px;

  }

  </style>

</head>

<body>

  <select multiple                 ></select>

  <select multiple size="1"        ></select>

  <select multiple class="fsMedium"></select>

  <select multiple                 ></select>

  <select multiple size="1"        ></select>

  <select multiple class="fsMedium"></select>

  <br><br>

  <select multiple                 ></select>

  <select multiple size="1"        ></select>

  <select multiple class="fsMedium"></select>

  <select multiple                 ></select>

  <select multiple size="1"        ></select>

  <select multiple class="fsMedium"></select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>

  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-select-elem-005-ref.html">

  <style>

  select {

    contain: size;

    color: transparent;

    /* We make scrollbars transparent because some <option> elements can cause

       overflow, which can cause scrollbars to be active in the test and

       inactive in the reference.  But the test only cares about the sizing. */

    scrollbar-color: transparent transparent;

  }

  .fsMedium {

    /* custom styling for some select elements, which is allowed to influence

       their size (in the same way that it influences the size of an empty

       select element): */

    font-size: 10px;

  }

  .fsSmall {

    /* custom styling for some option elements (which would make their parent

       select elem shorter, except for the fact that it's size-contained): */

    font-size: 6px;

  }

  </style>

</head>

<body>

  <!-- No contents: -->

  <select multiple                 ></select>

  <select multiple size="1"        ></select>

  <select multiple class="fsMedium"></select>

  <!-- Empty option: -->

  <select multiple                 ><option></option></select>

  <select multiple size="1"        ><option></option></select>

  <select multiple class="fsMedium"><option></option></select>

  <br><br>

  <!-- Nonempty option: -->

  <select multiple                 ><option>X</option></select>

  <select multiple size="1"        ><option>X</option></select>

  <select multiple class="fsMedium"><option>X</option></select>

  <!-- Nonempty option with custom font-size: -->

  <select multiple                 ><option class="fsSmall">X</option></select>

  <select multiple size="1"        ><option class="fsSmall">X</option></select>

  <select multiple class="fsMedium"><option class="fsSmall">X</option></select>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001-expected.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Reftest Reference</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <style>

  caption {

    border: 1em solid green;

  }

  </style>

</head>

<body>

  <table>

    <caption></caption>

  </table>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001.html

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>CSS Test: 'contain: size' on table captions should cause them to be sized as if they had no contents.</title>

  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">

  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">

  <link rel="match" href="contain-size-table-caption-001-ref.html">

  <style>

  .contain {

    contain:size;

  }

  .innerContents {

    height: 100px;

    width: 100px;

    color: transparent;

  }

  caption {

    border: 1em solid green;

  }

  </style>

</head>

<body>

  <table>

    <caption class="contain">

      <div class="innerContents">

        inner

      </div>

    </caption>

  </table>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001-expected.html

<!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

    {

      background-color: green;

      height: 40px;

      width: 206px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: strict' and table caption</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-size-001-ref.html">

  <meta name="flags" content="">

  <style>

  table

    {

      table-layout: fixed;

      width: 206px;

    }

  caption

    {

      background-color: red;

      border: green solid 1em;

      color: red;

      contain: strict;

      font-size: 20px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <table>

  <caption>FAIL FAIL FAIL FAIL FAIL FAIL</caption>

    <tr><td>&nbsp;<td>&nbsp;

    <tr><td>&nbsp;<td>&nbsp;

  </table>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002-expected.html

<!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

    {

      background-color: green;

      height: 40px;

      width: 206px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: strict' and block box</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-size-001-ref.html">

  <meta name="flags" content="">

  <style>

  div

    {

      background-color: red;

      border: green solid 1em;

      color: red;

      contain: strict;

      font-size: 20px;

      width: 166px;

    }

  </style>

  <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>.

  <div>FAIL FAIL FAIL FAIL FAIL FAIL</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003-expected.html

<!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

    {

      color: transparent;

      float: left;

      font-size: 16px;

      padding: 8px;

    }

  div#blue-rectangle

    {

      background-color: blue;

      margin: 8px;

      width: 6em;

    }

  div#orange-rectangle

    {

      background-color: orange;

      height: 0px;

      width: 12em;

    }

  </style>

  <p>Test passes if the orange rectangle and blue rectangle do not overlap.

  <div id="blue-rectangle">Some text in a blue rectangle.</div>

  <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: a block with 'contain: strict' 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-size-003-ref.html">

  <meta name="flags" content="">

  <style>

  div

    {

      color: transparent;

      font-size: 16px;

      padding: 8px;

    }

  div#floated-left

    {

      background-color: blue;

      float: left;

      margin: 8px;

      width: 6em;

    }

  div#with-contain-strict

    {

      background-color: orange;

      width: 12em;

      contain: strict;

    }

  </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-strict">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011-expected.html

<!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>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011.html

<!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">

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001-expected.html

<!doctype html>

<html lang=en>

<meta charset=utf-8>

<title>CSS test reference</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

div {

  display: inline-block;

  height: 5px;

  background: blue;

  width: 50px;

  color: transparent;

  font-size: 100px;

}

</style>

<p>Test passes if there are two, not one, blue lines below.</p>

<div></div><div>a</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and baselines</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=assert content="contain:style does not suppress baseline alignment">

  <link rel="match" href="reference/contain-baseline-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

  <meta name="flags" content="">

<style>

div {

  display: inline-block;

  height: 5px;

  background: blue;

  width: 50px;

  contain: style;

  color: transparent;

  font-size: 100px;

}

</style>

<p>Test passes if there are two, not one, blue lines below.</p>

<div></div><div>a</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

}

div {

  page-break-inside: avoid;

  break-inside: avoid;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

<article>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and break-inside:avoid</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment is (no longer) supposed to have any effect on the break-inside property">

  <link rel="match" href="reference/contain-style-breaks-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

}

div {

  page-break-inside: avoid;

  break-inside: avoid;

}

#test > div {

  contain: style;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article id=ref>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

<article id=test>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

<!--

Having two blocks to avoid making browsers that don't support the property at all fail.

Since containment is supposed to have no effect, failing such browsers would not be useful.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

}

div {

  page-break-inside: avoid;

  break-inside: avoid;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

<article>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and break-inside:avoid</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-inside property. Same as -001, applying containment on the parent.">

  <link rel="match" href="reference/contain-style-breaks-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

}

div > div {

  page-break-inside: avoid;

  break-inside: avoid;

}

#test > div {

  contain: style;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article id=ref>

  <div>

    <div>

    A<br>

    A<br>

    A<br>

    A

    <div>

  </div>

</article>

<article id=test>

  <div>

    <div>

    A<br>

    A<br>

    A<br>

    A

    <div>

  </div>

</article>

<!--

Having two blocks to avoid making browsers that don't support the property at all fail.

Since containment is supposed to have no effect, failing such browsers would not be useful.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

}

div {

  page-break-inside: avoid;

  break-inside: avoid;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

<article>

  <div>

  A<br>

  A<br>

  A<br>

  A

  <div>

</article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and break-inside:avoid</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-inside property. Same as -001, applying break-inside on the parent.">

  <link rel="match" href="reference/contain-style-breaks-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

}

article > div {

  page-break-inside: avoid;

  break-inside: avoid;

}

#test div > div {

  contain: style;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article id=ref>

  <div>

    <div>

    A<br>

    A<br>

    A<br>

    A

    <div>

  </div>

</article>

<article id=test>

  <div>

    <div>

    A<br>

    A<br>

    A<br>

    A

    <div>

  </div>

</article>

<!--

Having two blocks to avoid making browsers that don't support the property at all fail.

Since containment is supposed to have no effect, failing such browsers would not be useful.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

  line-height: 1;

  height: 4em;

  column-fill: auto;

}

div:last-of-type {

  break-before: column;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article>

  <div>A<br>A</div>

  <div>A<br>A</div>

</article>

<article>

  <div>A<br>A</div>

  <div>A<br>A</div>

</article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and break-before</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-before property.">

  <link rel="match" href="reference/contain-style-breaks-004-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

  line-height: 1;

  height: 4em;

  column-fill: auto;

}

div > div:last-of-type {

  break-before: column;

}

#test > div {

  contain: style;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article id=ref>

  <div>

    <div>A<br>A</div>

    <div>A<br>A</div>

  </div>

</article>

<article id=test>

  <div>

    <div>A<br>A</div>

    <div>A<br>A</div>

  </div>

</article>

<!--

Having two blocks to avoid making browsers that don't support the property at all fail.

Since containment is supposed to have no effect, failing such browsers would not be useful.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

  line-height: 1;

  height: 4em;

  column-fill: auto;

}

div:last-of-type {

  break-before: column;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article>

  <div>A<br>A</div>

  <div>A<br>A</div>

</article>

<article>

  <div>A<br>A</div>

  <div>A<br>A</div>

</article>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and break-after</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment is not (any longer) supposed to have any effect on the break-after property.">

  <link rel="match" href="reference/contain-style-breaks-004-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

article {

  columns: 2 1ch;

  column-gap: 0;

  float: left;

  font-family: monospace;

  margin-right: 3em;

  line-height: 1;

  height: 4em;

  column-fill: auto;

}

div > div:first-of-type {

  break-after: column;

}

#test > div {

  contain: style;

}

</style>

<p>Test passes if there are two identical blocks “A” letters below.

<article id=ref>

  <div>

    <div>A<br>A</div>

    <div>A<br>A</div>

  </div>

</article>

<article id=test>

  <div>

    <div>A<br>A</div>

    <div>A<br>A</div>

  </div>

</article>

<!--

Having two blocks to avoid making browsers that don't support the property at all fail.

Since containment is supposed to have no effect, failing such browsers would not be useful.

-->

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001-expected.html

<!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

    {

      font-size: 3em;

    }

  </style>

  <p>Test passes if there is the digit 5.

  <div>5</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: style' and counter</title>

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">

  <link rel="match" href="reference/contain-style-counters-001-ref.html">

  <meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are reset to 0 for such scope." name="assert">

  <meta name="flags" content="">

  <style>

  div#create-counter

    {

      counter-reset: counter-of-span 9;

    }

    /*

    This creates a new counter identified as "counter-of-span"

    and initially sets such counter to 9 (an entirely

    arbitrary number).

    */

  div#test

    {

      contain: style;

      font-size: 3em;

    }

  div#test span

    {

      counter-increment: counter-of-span 5;

    }

    /*

    This increments the counter identified as "counter-of-span"

    of the step value of 5 (an entirely arbitrary number) each

    and every time there is a <span> descendant within the subtree

    of div#test

    */

  div#test span::after

    {

      content: counter(counter-of-span);

    }

    /*

    Now, the generated content after the span is set to the

    current value of the counter identified as "counter-of-span"

    */

  </style>

  <p>Test passes if there is the digit 5.

  <div id="create-counter"></div>

  <div id="test"><span></span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002-expected.html

<!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

    {

      font-size: 3em;

    }

  </style>

  <p>Test passes if there is the digit 5.

  <div>5</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: style' and counter (with 'display: contents')</title>

  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">

  <link rel="match" href="reference/contain-style-counters-001-ref.html">

  <meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are reset to 0 for such scope. In this test, the div#test does not generate a principal box because of 'display: contents'. Despite that particular condition, 'contain: style' will have an effect on div#test." name="assert">

  <meta name="flags" content="">

  <style>

  div#create-counter

    {

      counter-reset: counter-of-span 9;

    }

    /*

    This creates a new counter identified as "counter-of-span"

    and initially sets such counter to 9 (an entirely

    arbitrary number).

    */

  div#test

    {

      contain: style;

      display: contents;

      font-size: 3em;

    }

    /*

    Other types of containment (size, layout, paint) have no

    effect on box that do not generate a principal box which

    is the case here with div#test because of 'display: contents'.

    But in this test, 'contain: style' will apply and will

    have a rendering effect on the counter.

    */

  div#test span

    {

      counter-increment: counter-of-span 5;

    }

    /*

    This increments the counter identified as "counter-of-span"

    of the step value of 5 (an entirely arbitrary number) each

    and every time there is a <span> descendant within the subtree

    of div#test

    */

  div#test span::after

    {

      content: counter(counter-of-span);

    }

    /*

    Now, the generated content after the span is set to the

    current value of the counter identified as "counter-of-span"

    */

  </style>

  <p>Test passes if there is the digit 5.

  <div id="create-counter"></div>

  <div id="test"><span></span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003-expected.html

<!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

    {

      font-size: 3em;

    }

  </style>

  <p>Test passes if there is the number 20.

  <div>20</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: style' for counters (span children of &lt;body&gt;)</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-style">

  <link rel="match" href="reference/contain-style-counters-003-ref.html">

  <meta name="flags" content="">

  <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)

    */

  body

    {

      contain: style;

    }

    /*

    This will reset the counter to 0.

    */

  body span

    {

      counter-increment: counter-of-span 4;

    }

    /*

    This increments the counter identified as "counter-of-span"

    of the step value of 4 (an entirely arbitrary number) each

    and every time there is a <span> descendant within the subtree

    of body

    */

  div

    {

      font-size: 3em;

    }

  div::after

    {

      content: counter(counter-of-span);

    }

    /*

    Now, the generated content after the span is set to the

    current value of the counter identified as "counter-of-span"

    */

  </style>

  <body>

  <span></span> <span></span> <span></span> <span></span> <span></span>

  <!-- 5 span above -->

  <p>Test passes if there is the number 20.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004-expected.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Reference Test</title>

  <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

  <style>

  div

    {

      font-size: 3em;

    }

  </style>

  <p>Test passes if there is the number 0.

  <div>0</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Containment Test: 'contain: style' for counters (span descendants of &lt;body&gt;)</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-style">

  <link rel="match" href="reference/contain-style-counters-004-ref.html">

  <meta name="flags" content="">

  <style>

  body

    {

      counter-reset: counter-of-span 13;

    }

    /*

    This creates a new counter identified as "counter-of-span"

    and initially sets such counter to 13 (an entirely

    arbitrary number)

    */

  body

    {

      contain: style;

    }

    /*

    This will reset the counter to 0.

    */

  body span

    {

      counter-increment: counter-of-span 5;

    }

    /*

    This increments the counter identified as "counter-of-span"

    of the step value of 5 (an entirely arbitrary number) each

    and every time there is a <span> descendant within the subtree

    of body

    */

  div

    {

      font-size: 3em;

    }

  div::after

    {

      content: counter(counter-of-span);

    }

    /*

    Now, the generated content after the span is set to the

    current value of the counter identified as "counter-of-span"

    */

  </style>

  <body>

  <p> <span></span> <span></span> <span></span> <span></span>

  <!-- 4 span inside the <p>. However, since div isn't a sibling of spans,

       it creates a new counter.

  -->

  <p>Test passes if there is the number 0.

  <div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain reference: layout/paint containment on subgrid</title>

  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">

<style>

.grid {

  display: grid;

  width: 40px;

  height: 40px;

  grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b];

  gap: 10px;

}

.subgrid {

  display: grid;

  grid: none;

  background: lightgrey;

  grid-area:1/1/3/3;

}

.layout { contain: layout; }

.paint { contain: paint; }

.inner {

  background: blue;

  grid-area:a/a/b/b;

}

</style>

<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>

<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>

<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>

<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: layout/paint containment on subgrid</title>

  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">

  <meta name=assert content="layout/paint containment inhibits subgrid">

  <link rel="match" href="reference/contain-subgrid-001.html">

  <link rel=help href="https://drafts.csswg.org/css-contain/#containment-layout">

  <link rel=help href="https://drafts.csswg.org/css-contain/#containment-paint">

  <link rel=help href="https://drafts.csswg.org/css-grid-2/">

<style>

.grid {

  display: grid;

  width: 40px;

  height: 40px;

  grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b];

  gap: 10px;

}

.subgrid {

  display: grid;

  grid: subgrid;

  background: lightgrey;

  grid-area:1/1/3/3;

}

.layout { contain: layout; }

.paint { contain: paint; }

.inner {

  background: blue;

  grid-area:a/a/b/b;

}

.p {

  place-self: start;

  width:100%;

  height:100%;

}

</style>

<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div>

<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div>

<div class="grid"><div class="subgrid layout"><div class="inner p"></div></div></div>

<div class="grid"><div class="subgrid paint"><div class="inner p"></div></div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: hidden does not paint</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility subtrees are not painted">

<style>

#container {

  content-visibility: hidden;

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

.abspos { position: absolute; }

.relpos { position: relative; }

.fixedpos { position: fixed; }

.start { top: 0; left: 0; }

.mid { top: 10px; left: 10px; }

.end { bottom: 0; right: 0; }

.zindex { z-index: 1; }

.small { width: 10px; height: 10px; background: blue; }

.medium { width: 20px; height: 20px; background: green; }

.large { width: 30px; height: 30px; background: pink; }

</style>

<div id=container>

  Text.

  <div id=child></div>

  <span>inline child</span>

  <div class="abspos start small"></div>

  <div class="relpos mid medium"></div>

  <div class="fixedpos end large"></div>

  <div class=relpos>

    <div class="abspos mid small zindex"></div>

  </div>

</div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden starts painting when removed</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-child-ref.html">

<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container class=hidden>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: hidden container is not breakable (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#parent {

  width: 100px;

}

#container {

  border-top: solid green 50px;

  border-bottom: solid green 50px;

}

</style>

<div id="parent">

  <div id="container"></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: hidden container is not breakable</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-003-ref.html">

<meta name="assert" content="content-visibility container is not breakable">

<style>

#container {

  border-top: solid green 50px;

  border-bottom: solid green 50px;

  content-visibility: hidden;

}

#parent {

  columns: 2;

  height: 0px;

  width: 200px;

  column-gap: 0;

}

</style>

<div id="parent">

  <div id="container">Text</div>

</div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: hidden container in an iframe (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<iframe></iframe>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: hidden container in an iframe</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-004-ref.html">

<meta name="assert" content="content-visibility makes iframe contents hidden">

<iframe id="frame" srcdoc='

  <style>

  #container {

    width: 100px;

    height: 100px;

    content-visibility: hidden;

  }

  </style>

  <div id="container">Lorem</div>

'></iframe>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden stops painting when added</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden stops painting when added (composited)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  will-change: transform;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden stops painting when added (composited child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

  will-change: transform;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden stops painting when added (composited with composited child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  will-change: transform;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

  will-change: transform;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: positioned container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.positioned {

  position: absolute;

  top: 0;

  left: 0;

}

</style>

<div id=container class=positioned></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden stops painting when added (positioned)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="positioned-container-ref.html">

<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.positioned {

  position: absolute;

  top: 0;

  left: 0;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container class=positioned>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden stops painting when added (positioned child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.positioned {

  position: absolute;

  top: 0;

  left: 0;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child class=positioned></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: positioned container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.positioned {

  position: absolute;

  top: 0;

  left: 0;

}

</style>

<div id=container class=positioned></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden stops painting when added (positioned with a positioned child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="positioned-container-ref.html">

<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.positioned {

  position: absolute;

  top: 0;

  left: 0;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container class=positioned>

  Text.

  <div id=child class=positioned></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden starts painting when removed (composited)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-child-ref.html">

<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  will-change: transform;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container class=hidden>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden starts painting when removed (composited child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-child-ref.html">

<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

  will-change: transform;

}

</style>

<div id=container class=hidden>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden starts painting when removed (composited with a composited child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-child-ref.html">

<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  will-change: transform;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

  will-change: transform;

}

</style>

<div id=container class=hidden>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015-expected.txt

FAIL Content Visibility: hit testing assert_equals: center hits outer expected "outer" but got "inner"

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hit testing</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body {

  margin: 0;

  padding: 0;

}

#outer {

  width: 100px;

  height: 100px;

  background: lightblue;

  content-visibility: hidden;

}

#inner {

  margin: 25px;

  width: 50px;

  height: 50px;

  background lightgreen;

}

</style>

<body id="body">

<div id="outer"><div id="inner"></div></div>

</body>

<script>

async_test((t) => {

  const container = document.getElementById("outer");

  let target = document.elementFromPoint(50, 50);

  t.step(() => assert_equals(target.id, "outer", "center hits outer"));

  target = document.elementFromPoint(10, 50);

  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));

  target = document.elementFromPoint(100, 50);

  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));

  t.done();

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016-expected.txt

FAIL Content Visibility: hit testing (composited) assert_equals: center hits outer expected "outer" but got "inner"

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hit testing (composited)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body {

  margin: 0;

  padding: 0;

}

#outer {

  width: 100px;

  height: 100px;

  background: lightblue;

  content-visibility: hidden;

  will-change: transform;

}

#inner {

  margin: 25px;

  width: 50px;

  height: 50px;

  background lightgreen;

}

</style>

<body id="body">

<div id="outer"><div id="inner"></div></div>

</body>

<script>

async_test((t) => {

  const container = document.getElementById("outer");

  let target = document.elementFromPoint(50, 50);

  t.step(() => assert_equals(target.id, "outer", "center hits outer"));

  target = document.elementFromPoint(10, 50);

  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));

  target = document.elementFromPoint(100, 50);

  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));

  t.done();

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017-expected.txt

FAIL Content Visibility: hit testing (composited child) assert_equals: center hits outer expected "outer" but got "inner"

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hit testing (composited child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body {

  margin: 0;

  padding: 0;

}

#outer {

  width: 100px;

  height: 100px;

  background: lightblue;

  content-visibility: hidden;

}

#inner {

  margin: 25px;

  width: 50px;

  height: 50px;

  background lightgreen;

  will-change: transform;

}

</style>

<body id="body">

<div id="outer"><div id="inner"></div></div>

</body>

<script>

async_test((t) => {

  const container = document.getElementById("outer");

  let target = document.elementFromPoint(50, 50);

  t.step(() => assert_equals(target.id, "outer", "center hits outer"));

  target = document.elementFromPoint(10, 50);

  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));

  target = document.elementFromPoint(100, 50);

  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));

  t.done();

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018-expected.txt

FAIL Content Visibility: hit testing (composited with a composited child) assert_equals: center hits outer expected "outer" but got "inner"

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hit testing (composited with a composited child)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body {

  margin: 0;

  padding: 0;

}

#outer {

  width: 100px;

  height: 100px;

  background: lightblue;

  content-visibility: hidden;

  will-change: transform;

}

#inner {

  margin: 25px;

  width: 50px;

  height: 50px;

  background lightgreen;

  will-change: transform;

}

</style>

<body id="body">

<div id="outer"><div id="inner"></div></div>

</body>

<script>

async_test((t) => {

  const container = document.getElementById("outer");

  let target = document.elementFromPoint(50, 50);

  t.step(() => assert_equals(target.id, "outer", "center hits outer"));

  target = document.elementFromPoint(10, 50);

  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));

  target = document.elementFromPoint(100, 50);

  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));

  t.done();

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Display Locking: iframe locking (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

}

</style>

<div>lorem ipsum</div>

<iframe id="frame" width=400 height=200 srcdoc=''></iframe>

<div>consectetur adipiscing elit</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: cross-origin iframe locking</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-019-ref.html">

<script src="/common/reftest-wait.js"></script>

<script src="../resources/utils.js"></script>

<style>

div {

  background: blue;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>lorem ipsum</div>

<iframe id="frame" width=400 height=200 src='https://{{hosts[alt][]}}:{{ports[https][0]}}/wpt_internal/display-lock/css-content-visibility/resources/frame.html'></iframe>

<div>consectetur adipiscing elit</div>

<script>

async function runTest() {

  document.getElementById("frame").classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => {

  requestAnimationFrame(() => {

    requestAnimationFrame(runTest);

  });

};

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden iframe (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

}

</style>

<div>lorem ipsum</div>

<iframe id="frame" width=400 height=200 srcdoc=''></iframe>

<div>consectetur adipiscing elit</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden iframe</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-020-ref.html">

<meta name="assert" content="content-visibility hidden iframe does not paint">

<script src="/common/reftest-wait.js"></script>

<script src="../resources/utils.js"></script>

<style>

div {

  background: blue;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>lorem ipsum</div>

<iframe id="frame" width=400 height=200 srcdoc='

  <style>

  div {

    background: lightgreen;

  }

  </style>

  <div>dolor sit amet</div>

'></iframe>

<div>consectetur adipiscing elit</div>

<script>

async function runTest() {

  document.getElementById("frame").classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => {

  requestAnimationFrame(() => {

    requestAnimationFrame(runTest);

  });

};

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden image (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

}

.myimg {

  display: inline-block;

  width: 400px;

  height: 200px;

  background: lightblue;

  border: 1px solid black;

}

</style>

<div>lorem ipsum</div>

<div class="myimg"></div>

<div class="myimg"></div>

<div>consectetur adipiscing elit</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden image</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-021-ref.html">

<meta name="assert" content="content-visibility hidden img element does not paint replaced content">

<script src="/common/reftest-wait.js"></script>

<style>

div {

  background: blue;

}

img {

  width: 400px;

  height: 200px;

  background: lightblue;

  border: 1px solid black;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>lorem ipsum</div>

<img id="img1" src="resources/dice.png"></img>

<img id="img2" src="resources/circles.svg"></img>

<div>consectetur adipiscing elit</div>

<script>

async function runTest() {

  document.getElementById("img1").classList.add("hidden");

  document.getElementById("img2").classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => {

  requestAnimationFrame(() => {

    requestAnimationFrame(runTest);

  });

};

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden svg (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

}

.mysvg {

  display: inline-block;

  width: 400px;

  height: 300px;

  background: lightblue;

  border: 1px solid black;

}

</style>

<div>lorem ipsum</div>

<div class="mysvg"></div>

<div>consectetur adipiscing elit</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden svg</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-022-ref.html">

<meta name="assert" content="content-visibility hidden svg does not paint">

<script src="/common/reftest-wait.js"></script>

<style>

div {

  background: blue;

}

svg {

  border: 1px solid black;

  background: lightblue;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>lorem ipsum</div>

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" id="svg">

  <g stroke-width="10" transform="translate(-30)">

      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>

      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>

      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>

      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>

      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>

  </g>

</svg>

<div>consectetur adipiscing elit</div>

<script>

async function runTest() {

  document.getElementById("svg").classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => {

  requestAnimationFrame(() => {

    requestAnimationFrame(runTest);

  });

};

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden iframe (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

}

</style>

<div>lorem ipsum</div>

<iframe width=400 height=200 srcdoc='

  <style>

  div {

    background: lightgreen;

  }

  </style>

  <div>dolor sit amet</div>

'></iframe>

<div>consectetur adipiscing elit</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden iframe</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-023-ref.html">

<meta name="assert" content="content-visibility hidden iframe paints when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

div {

  background: blue;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>lorem ipsum</div>

<iframe id="frame" class=hidden width=400 height=200 srcdoc='

  <style>

  div {

    background: lightgreen;

  }

  </style>

  <div>dolor sit amet</div>

'></iframe>

<div>consectetur adipiscing elit</div>

<script>

async function runTest() {

  document.getElementById("frame").classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => {

  requestAnimationFrame(() => {

    requestAnimationFrame(runTest);

  });

};

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden image (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

}

img {

  width: 400px;

  height: 200px;

  background: lightblue;

  border: 1px solid black;

}

</style>

<div>lorem ipsum</div>

<img src="resources/dice.png"></img>

<img src="resources/circles.svg"></img>

<div>consectetur adipiscing elit</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden image</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-024-ref.html">

<meta name="assert" content="content-visibility hidden img element paints when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

div {

  background: blue;

}

img {

  width: 400px;

  height: 200px;

  background: lightblue;

  border: 1px solid black;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>lorem ipsum</div>

<img id="img1" class=hidden src="resources/dice.png"></img>

<img id="img2" class=hidden src="resources/circles.svg"></img>

<div>consectetur adipiscing elit</div>

<script>

async function runTest() {

  document.getElementById("img1").classList.remove("hidden");

  document.getElementById("img2").classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => {

  requestAnimationFrame(() => {

    requestAnimationFrame(runTest);

  });

};

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden svg (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

div {

  background: blue;

}

svg {

  border: 1px solid black;

  background: lightblue;

}

</style>

<div>lorem ipsum</div>

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">

  <g stroke-width="10" transform="translate(-30)">

      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>

      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>

      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>

      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>

      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>

  </g>

</svg>

<div>consectetur adipiscing elit</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden svg</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-025-ref.html">

<meta name="assert" content="content-visibility hidden svg paints when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

div {

  background: blue;

}

svg {

  border: 1px solid black;

  background: lightblue;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>lorem ipsum</div>

<svg class=hidden xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" id="svg">

  <g stroke-width="10" transform="translate(-30)">

      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>

      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>

      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>

      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>

      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>

      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>

  </g>

</svg>

<div>consectetur adipiscing elit</div>

<script>

async function runTest() {

  document.getElementById("svg").classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => {

  requestAnimationFrame(() => {

    requestAnimationFrame(runTest);

  });

};

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026-expected.txt

FAIL content-visibility: hidden adds contain: size layout style; assert_equals: expected (string) "none" but got (undefined) undefined

FAIL content-visibility: auto adds contain: size layout style paint; assert_equals: expected (string) "none" but got (undefined) undefined

FAIL content-visibility: auto adds contain: size layout style paint, can't be overridden assert_equals: expected (string) "none" but got (undefined) undefined

FAIL content-visibility keeps all containment even when shorthands are specified assert_equals: expected (string) "none" but got (undefined) undefined

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: containment added</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility visible does not add containment">

<meta name="assert" content="content-visibility hidden adds containment">

<meta name="assert" content="content-visibility auto adds containment">

<meta name="assert" content="content-visibility auto visibility switches after rAF callbacks of the frame that produces the painted output">

<style>

.auto {

  content-visibility: auto;

}

.hidden {

  content-visibility: hidden;

}

.spacer {

  height: 10000px;

}

</style>

<div id="container"></div>

<div id="onscreen_container"></div>

<div class=spacer></div>

<div id="offscreen_container"></div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

function setUp(container) {

  container.style = "";

  container.classList = "";

  assert_equals(getComputedStyle(container).contain, "none");

}

test(() => {

  setUp(container);

  container.classList.add("hidden");

  assert_equals(getComputedStyle(container).contain, "size layout style paint");

}, "content-visibility: hidden adds contain: size layout style;");

async_test((t) => {

  setUp(onscreen_container);

  setUp(offscreen_container);

  function runTest() {

    onscreen_container.classList.add("auto");

    offscreen_container.classList.add("auto");

    t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "size layout style paint", "initial onscreen"));

    t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "initial offscreen"));

    // Considering this as frame 1, at the end of the frame intersection observation will happen

    // and determine that on-screen is visible and off-screen is not. The on-screen switch will

    // happen synchronously since this is the first time we check, so for the remainder of the

    // frames, on-screen should not have a size containment.

    // For off-screen container:

    // At frame 2, we verify that it has size containment.

    // At frame 3, we scroll it into view and verify it has size containment. At the end of the frame

    //    we will determine that it is visible and schedule a visibility switch to happen at the next

    //    frame (at post-rAF timing).

    // At frame 4, we still have size containment until after rAF callbacks.

    // At frame 5, the container is no longer size-contained since it is visible.

    requestAnimationFrame(() => {

      // Frame 2 checks:

      t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "layout style paint", "frame 2 onscreen"));

      t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 2 offscreen"));

      requestAnimationFrame(() => {

        window.scrollBy(0, 10000);

        // Frame 3 checks:

        t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 3"));

        requestAnimationFrame(() => {

          // Frame 4 checks:

          t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "size layout style paint", "frame 4"));

          requestAnimationFrame(() => {

            // Frame 5 checks:

            t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "layout style paint", "frame 5"));

            t.done();

          });

        });

      });

    });

  }

  // rAF to ensure we know where we are in the lifecycle.

  requestAnimationFrame(runTest);

}, "content-visibility: auto adds contain: size layout style paint;");

test(() => {

  setUp(container);

  container.classList.add("auto");

  container.style = "contain: style;";

  assert_equals(getComputedStyle(container).contain, "size layout style paint");

  container.style = "contain: style layout;";

  assert_equals(getComputedStyle(container).contain, "size layout style paint");

  container.style = "";

  assert_equals(getComputedStyle(container).contain, "size layout style paint");

}, "content-visibility: auto adds contain: size layout style paint, can't be overridden");

test(() => {

  setUp(container);

  container.classList.add("auto");

  container.style = "contain: paint;";

  assert_equals(getComputedStyle(container).contain, "size layout style paint");

  container.style = "contain: strict;";

  assert_equals(getComputedStyle(container).contain, "size layout style paint");

  container.style = "contain: content;";

  assert_equals(getComputedStyle(container).contain, "size layout style paint");

}, "content-visibility keeps all containment even when shorthands are specified");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: auto in the viewport (reference).</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.border {

  border: 1px solid black;

}

</style>

<div class=border>

  Test passes if there is a border around this text.

</div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: auto in the viewport.</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-027-ref.html">

<meta name="assert" content="content-visibility auto element in the viewport paints">

<meta name="assert" content="content-visibility auto element in the viewport does not have size containment">

<script src="/common/reftest-wait.js"></script>

<style>

div {

  content-visibility: auto;

  border: 1px solid black;

}

</style>

<div class=locked>

  Test passes if there is a border around this text.

</div>

<script>

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      takeScreenshot();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028.html

<!DOCTYPE html>

<html class="reftest-wait">

<meta charset="utf-8">

<title>Content Visibility: shadow dom</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-child-ref.html">

<meta name="assert" content="content-visibility hidden can be used in a shadow DOM">

<script src="/common/reftest-wait.js"></script>

<script src="resources/utils.js"></script>

<style>

.hidden {

  content-visibility: hidden;

}

.child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id="host">

  <div id="slotted">

    Text.

    <div class=child></div>

  </div>

</div>

<script>

async function runTest() {

  // Set up hidden element within shadow root.

  let shadowRoot = host.attachShadow({ mode: "open" });

  let hidden = document.createElement("div");

  shadowRoot.innerHTML = `

    <style>

    .container {

      width: 150px;

      height: 150px;

      background: lightblue;

    }

    </style>`;

  shadowRoot.appendChild(hidden);

  hidden.innerHTML = "<slot></slot>";

  hidden.getBoundingClientRect();

  hidden.classList.add("container");

  hidden.classList.add("hidden");

  requestAnimationFrame(() => {

    slotted.style = "display: none";

    // Do a forced layout outside the hidden subtree.

    host.getBoundingClientRect();

    hidden.classList.remove("hidden");

    slotted.style = "";

    requestAnimationFrame(() => {

      // Check that everything is painted as we expect.

      takeScreenshot();

    });

  });

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029-expected.txt

This text should be visible.

This text should not be visible.

This text is also not visible.

FAIL innerText on locked element. assert_equals: expected "This text should be visible." but got "This text should be visible.\nThis text should not be visible.\nThis text is also not visible."

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: innerText</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="innerText skips content-visibility hidden elements">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/utils.js"></script>

This text should be visible.

<div id="container" style="content-visibility: hidden">

  This text should not be visible.

  <div id="inner">

    This text is also not visible.

  </div>

</div>

<script>

test(() => {

  assert_equals(document.body.innerText, "This text should be visible.");

  assert_equals(document.getElementById("inner").innerText, "");

}, "innerText on locked element.");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030-expected.txt

FAIL IntersectionObserver interactions assert_equals: runStep2 expected 1 but got 0

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: intersection observer interactions</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden is not intersecting from IO perspective">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

div {

  width: 100px;

  height: 100px;

}

#spacer {

  height: 3000px;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div id="target1">

  <div id="target2"></div>

</div>

<div id="target3">

  <div id="target4"></div>

</div>

<div id="spacer"></div>

<div id="find_me"></div>

<script>

async_test((t) => {

  let target1, target2, target3, target4;

  let observer;

  let entries = [];

  // Set everything up.

  function enqueueStep1() {

    target1 = document.getElementById("target1");

    target2 = document.getElementById("target2");

    target3 = document.getElementById("target3");

    target4 = document.getElementById("target4");

    observer = new IntersectionObserver((new_entries) => {

      entries = entries.concat(new_entries);

    });

    observer.observe(target1);

    observer.observe(target2);

    observer.observe(target3);

    observer.observe(target4);

    entries = entries.concat(observer.takeRecords());

    t.step(() => { assert_equals(entries.length, 0, "No initial notifications") });

    requestAnimationFrame(() => {

      requestAnimationFrame(() => {

        runStep1();

      });

    });

  }

  // Verify that all elements are visible at the start, with intersection events.

  function runStep1() {

    const step = arguments.callee.name;

    t.step(() => {

      assert_equals(entries.length, 4, step);

      // Clear the observed visible targets.

      for (let i = 0; i < entries.length; ++i) {

        assert_true(entries[i].isIntersecting);

        assert_true(entries[i].target === target1 ||

                    entries[i].target === target2 ||

                    entries[i].target === target3 ||

                    entries[i].target === target4, step);

      }

    });

    entries = [];

    enqueueStep2();

  }

  // Lock target3.

  async function enqueueStep2() {

    target3.classList.add("hidden");

    requestAnimationFrame(() => {

      requestAnimationFrame(() => {

        runStep2();

      });

    });

  }

  // Verify that the hidden element received a not-intersecting event.

  function runStep2() {

    const step = arguments.callee.name;

    t.step(() => {

      assert_equals(entries.length, 1, step);

      assert_false(entries[0].isIntersecting, step);

      assert_equals(entries[0].target, target4, step);

    });

    entries = [];

    enqueueStep3();

  }

  // Scroll all elements off screen.

  function enqueueStep3() {

    document.getElementById("find_me").scrollIntoView();

    requestAnimationFrame(() => {

      requestAnimationFrame(() => {

        runStep3();

      });

    });

  }

  // Verify that all elements received not intersecting event, except

  // target4, which was already not intersecting due to being hidden.

  function runStep3() {

    const step = arguments.callee.name;

    t.step(() => {

      assert_equals(entries.length, 3, step);

      for (let i = 0; i < entries.length; ++i) {

        assert_false(entries[i].isIntersecting, step);

        assert_not_equals(entries[i].target, target4, step);

      }

    });

    entries = [];

    enqueueStep4();

  }

  // Scroll the elements back on screen.

  function enqueueStep4() {

    target1.scrollIntoView();

    requestAnimationFrame(() => {

      requestAnimationFrame(() => {

        runStep4();

      });

    });

  }

  // Verify that all elements received not intersecting event, except

  // target4, which remains not intersecting.

  function runStep4() {

    const step = arguments.callee.name;

    t.step(() => {

      assert_equals(entries.length, 3, step);

      for (let i = 0; i < entries.length; ++i) {

        assert_true(entries[i].isIntersecting);

        assert_not_equals(entries[i].target, target4, step);

      }

    });

    entries = [];

    enqueueStep5();

  }

  // Unlock target3.

  async function enqueueStep5() {

    target3.classList.remove("hidden");

    requestAnimationFrame(() => {

      requestAnimationFrame(() => {

        runStep5();

      });

    });

  }

  function runStep5() {

    const step = arguments.callee.name;

    t.step(() => {

      assert_equals(entries.length, 1, step);

      assert_true(entries[0].isIntersecting, step);

      assert_equals(entries[0].target, target4, step);

    });

    t.done();

  }

  window.onload = () => {

    requestAnimationFrame(enqueueStep1);

  };

}, "IntersectionObserver interactions");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031-expected.txt

CONSOLE MESSAGE: Unhandled Promise Rejection: Error: assert_equals: ResizeObsever should not run during while unrendered expected true but got false

Harness Error (FAIL), message = Unhandled rejection: assert_equals: ResizeObsever should not run during while unrendered expected true but got false

TIMEOUT ResizeObserver skipped while hidden Test timed out

Harness Error (FAIL), message = Unhandled rejection: assert_equals: ResizeObsever should not run during while unrendered expected true but got false

TIMEOUT ResizeObserver skipped while hidden Test timed out

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: resize observer interactions</title>

<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden subtrees do not trigger resize observer">

<style>

.hidden {

  content-visibility: hidden;

}

</style>

<div id="container">

  <div id="resize" style="width: 50px; height: 50px">

  </div>

</div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

async_test((t) => {

  let didCallback = false;

  async function runTest() {

    let resizeCallback = function (entries) {

      didCallback = true;

    }

    let resizeObserver = new ResizeObserver(resizeCallback);

    resizeObserver.observe(resize);

    requestAnimationFrame(step2);

  }

  async function step2() {

    assert_equals(true, didCallback, 'Resize observation should happen in first frame after registering');

    didCallback = false;

    const container = document.getElementById("container");

    container.classList.add("hidden");

    // Change the size of #resize. This should cause a resize observation, but

    // only when the element becomes unhidden.

    resize.style.width = '100px';

    requestAnimationFrame(step3);

  }

  async function step3() {

    assert_equals(false, didCallback,

        'ResizeObsever should not run during while unrendered');

    requestAnimationFrame(step4);

  }

  async function step4() {

    assert_equals(false, didCallback,

        'ResizeObsever should not run while unrendered');

    const container = document.getElementById("container");

    container.classList.remove("hidden");

    requestAnimationFrame(step5);

  }

  async function step5() {

    assert_equals(true, didCallback,

        'ResizeObsevers should now run once becoming visible');

    t.done();

  }

  window.onload = function() {

    requestAnimationFrame(() => requestAnimationFrame(runTest));

  };

}, "ResizeObserver skipped while hidden");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden iframe, size changes (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<iframe width=200 height=300></iframe>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden iframe, size changes</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-032-ref.html">

<meta name="assert" content="content-visibility hidden iframes can change size.">

<script src="/common/reftest-wait.js"></script>

<style>

.hidden {

  content-visibility: hidden;

}

</style>

<iframe class=hidden id=frame width=200 height=200 srcdoc='Lorem ipsum'></iframe>

<script>

async function runTest() {

  document.getElementById("frame").height = 300;

  requestAnimationFrame(takeScreenshot);

}

onload = () => { requestAnimationFrame(runTest); };

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden iframe, size changes (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<iframe width=200 height=300></iframe>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Display Locking: locks an iframe, and changes its size</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-033-ref.html">

<meta name="assert" content="content-visibility hidden cross origin iframe can change size">

<script src="/common/reftest-wait.js"></script>

<style>

.hidden {

  content-visibility: hidden;

}

</style>

<iframe id="frame" class=hidden width=200 height=200 src='https://{{hosts[alt][]}}:{{ports[https][0]}}/wpt_internal/display-lock/css-content-visibility/resources/frame.html'></iframe>

<script>

async function runTest() {

  document.getElementById("frame").height = 300;

  requestAnimationFrame(takeScreenshot);

}

onload = () => { requestAnimationFrame(runTest); };

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: hidden element shifted down (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  border: 1px solid blue;

}

#spacer {

  width: 100px;

  height: 100px;

  background: lightgreen;

}

#checker {

  width: 100px;

  height: 50px;

  background: green;

}

</style>

<div id="spacer"></div>

<div id="container"></div>

<div id="checker"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden element shifted down</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-034-ref.html">

<meta name="assert" content="content-visibility hidden element participates in layout">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  border: 1px solid blue;

  content-visibility: hidden;

}

#spacer {

  width: 100px;

  height: 50px;

  background: lightgreen;

}

#checker {

  width: 100px;

  height: 50px;

  background: green;

}

</style>

<div id="spacer"></div>

<div id="container">Lorem</div>

<div id="checker"></div>

<script>

function runTest() {

  document.getElementById("spacer").style.height = "100px";

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => requestAnimationFrame(runTest));

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035-expected.txt

FAIL Testing focus and force layout on element with hidden flat-tree ancestor assert_not_equals: got disallowed value Element node <input id="slotted" type="text"></input>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Display Locking: hidden shadow descendant</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden element's subtree cannot be focused">

<meta name="assert" content="content-visibility hidden element's subtree can access layout values">

<div id="host">

  <input id="slotted" type="text">

</div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

let container = document.createElement("div");

container.innerHTML = "<slot></slot>";

let shadowRoot = host.attachShadow({ mode: "open" });

shadowRoot.innerHTML = "<style>.hidden { content-visibility: hidden; }</style>";

shadowRoot.appendChild(container);

async_test((t) => {

  async function focusTest() {

    t.step(() => assert_not_equals(document.activeElement, slotted));

    t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));

    container.classList.add("hidden");

    requestAnimationFrame(() => {

      t.step(() => assert_not_equals(document.activeElement, slotted));

      t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));

      slotted.focus();

      t.step(() => assert_not_equals(document.activeElement, slotted));

      t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));

      forceLayoutTest();

    });

  }

  async function forceLayoutTest() {

    t.step(() => assert_equals(slotted.offsetTop, 0));

    // Add a 20px div above the slotted div.

    container.innerHTML = "<div style='height: 20px;'></div><slot></slot>";

    t.step(() => assert_equals(slotted.offsetTop, 20));

    t.done();

  }

  window.onload = function() {

    requestAnimationFrame(() => requestAnimationFrame(focusTest));

  };

}, "Testing focus and force layout on element with hidden flat-tree ancestor");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036-expected.txt

PASS getComputedStyle gets up-to-date style

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Display Locking: style on hidden element & child</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="style is available for content-visibility hidden elements">

<style>

.hidden {

  content-visibility: hidden;

}

</style>

<div id="container" class=hidden>

  <div id="child">

    <div id="grandchild"></div>

  </div>

</div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

async_test((t) => {

  async function runTest() {

    let container = document.getElementById("container");

    container.style = "color: blue;";

    t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color changed to blue"));

    t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 0, 255)", "child inherits blue color"));

    t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 0, 255)", "grandchild inherits blue color"));

    child.style = "color: green;";

    t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color is still blue"));

    t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)", "child color changed to green"));

    t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 128, 0)", "grandchild inherits green color"));

    child.style = "";

    // Commit container, lock child.

    container.classList.remove("hidden");

    child.classList.add("hidden");

    requestAnimationFrame(() => {

      // Update style outside of the hidden subtree.

      container.style = "color: red;";

      container.offsetTop;

      // Inheritance works as usual through hidden boundaries.

      t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(255, 0, 0)", "grandchild inherits red color"));

      t.step(() => assert_equals(getComputedStyle(child).color, "rgb(255, 0, 0)", "child inherits red color"));

      t.step(() => assert_equals(getComputedStyle(container).color, "rgb(255, 0, 0)", "container color changed to red"));

      t.done();

    });

  }

  window.onload = function() {

    requestAnimationFrame(() => requestAnimationFrame(runTest));

  };

}, "getComputedStyle gets up-to-date style");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden grid with positioned child</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility hidden grid does not paint the subtree">

<script src="/common/reftest-wait.js"></script>

<style>

#grid {

  display: grid;

  width: 150px;

  height: 150px;

  background: lightblue;

}

#positioned {

  position: absolute;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div id=grid>

  <div id=positioned>lorem ipsum</div>

</div>

<script>

function runTest() {

  document.getElementById("grid").classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => requestAnimationFrame(runTest);

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038-expected.txt

FAIL Measure Forced Layout assert_equals: 0 forced expected 0 but got 8

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: measure layout</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden element layout is correct">

<meta name="assert" content="content-visibility hidden element's subtree layout is correct">

<style>

#container {

  background: lightgreen;

  contain: layout;

}

.hidden {

  content-visibility: hidden;

}

#sizer {

  width: 100px;

  height: 100px;

}

.child {

  width: 20px;

  height: 20%;

  background: cyan;

}

#spacer {

  width: 150px;

  height: 150px;

  background: green;

}

</style>

<div id="parent"></div>

<div id="spacer"></div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

async_test((t) => {

  function createChild(id) {

    const child = document.createElement("div");

    child.classList = "child";

    child.id = id;

    return child;

  }

  function measureForced() {

    t.step(() => {

      // Ensure children are laid out; this forces a layout if it wasn't done.

      assert_equals(document.getElementById("0").offsetTop, 0, "0 forced");

      assert_equals(document.getElementById("1").offsetTop, 20, "1 forced");

      assert_equals(document.getElementById("2").offsetTop, 40, "2 forced");

      // Both parent should be 0 height, since it's hidden. Both parent and spacers

      // should have 8 offsetTop.

      assert_equals(document.getElementById("parent").offsetTop, 8, "parent forced");

      assert_equals(document.getElementById("spacer").offsetTop, 8, "spacer forced");

    });

  }

  function measureWhenVisible() {

    t.step(() => {

      // Ensure children are still laid out.

      assert_equals(document.getElementById("0").offsetTop, 0, "0 when visible");

      assert_equals(document.getElementById("1").offsetTop, 20, "1 when visible");

      assert_equals(document.getElementById("2").offsetTop, 40, "2 when visible");

      // Now the parent should encompass a container, so spacer is pushed down.

      assert_equals(document.getElementById("parent").offsetTop, 8, "parent when visible");

      assert_equals(document.getElementById("spacer").offsetTop, 108, "spacer when visible");

    });

  }

  function construct(container) {

    const sizer = document.createElement("div");

    sizer.id = "sizer";

    container.appendChild(sizer);

    sizer.appendChild(createChild("0"));

    sizer.appendChild(createChild("1"));

    sizer.appendChild(createChild("2"));

  }

  async function runTest() {

    const container = document.createElement("div");

    container.id = "container";

    document.getElementById("parent").appendChild(container);

    container.classList.add("hidden");

    requestAnimationFrame(() => {

      construct(container);

      measureForced();

      container.classList.remove("hidden");

      requestAnimationFrame(() => requestAnimationFrame(() => {

        measureWhenVisible();

        t.done();

      }));

    });

  }

  window.onload = function() {

    requestAnimationFrame(() => requestAnimationFrame(runTest));

  };

}, "Measure Forced Layout");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039-expected.txt

This is text

PASS Measure Forced SVG Text

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Display Locking: measure forced SVG text</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility hidden svg descendant has correct layout">

<style>

#container {

  width: 100px;

  height: 100px;

  background: lightgreen;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div id="parent"></div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

async_test((t) => {

  let length;

  function measureForced() {

    t.step(() => {

      length = document.getElementById("text").getComputedTextLength();

      assert_not_equals(length, 0, "forced");

    });

  }

  function measureWhenVisible() {

    t.step(() => {

      const visible_length = document.getElementById("text").getComputedTextLength();

      assert_not_equals(visible_length, 0, "when visible");

      assert_equals(visible_length, length, "when visible");

    });

  }

  function construct(container) {

    container.innerHTML = `

      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

        <style>

          .t { font: 10px sans-serif; }

        </style>

        <text id="text" x="10" y="10" class="t">This is text</text>

      </svg>

    `;

  }

  async function runTest() {

    const container = document.createElement("div");

    container.id = "container";

    document.getElementById("parent").appendChild(container);

    container.classList.add("hidden");

    requestAnimationFrame(() => {

      construct(container);

      measureForced();

      container.classList.remove("hidden");

      requestAnimationFrame(() => {

        measureWhenVisible();

        t.done();

      });

    });

  }

  window.onload = function() {

    requestAnimationFrame(() => requestAnimationFrame(runTest));

  };

}, "Measure Forced SVG Text");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Display Locking: absolute positioned in flex, which is in a hidden div.</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility hidden flex and abspos descendants don't paint">

<script src="/common/reftest-wait.js"></script>

<script src="resources/utils.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  position: relative;

}

div > div {

  width: 100px;

  height: 100px;

  background: red;

}

.hidden {

  content-visibility: hidden;

}

.flex { display: flex; }

.abspos { position: absolute; }

</style>

<div id=container>

  <div class=flex>

    <div class=abspos></div>

  </div>

</div>

<script>

async function runTest() {

  document.getElementById("container").classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => requestAnimationFrame(runTest));

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: pseudo elements</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="subtree-visiblity hidden doesn't paint ::before or ::after">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#container::before {

  content: "a";

  color: blue;

}

.hasAfter::after {

  content: "b";

  color: green;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div id="log"></div>

<div id="container" style="display:none;"></div>

<script>

async function runTest() {

  container.classList.add("hasAfter");

  container.classList.add("hidden");

  container.style = "";

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: pseudo elements</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container::before {

  content: "a";

  color: blue;

}

#container::after {

  content: "b";

  color: green;

}

</style>

<div id="container"></div>

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: pseudo elements</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-042-ref.html">

<meta name="assert" content="content-visibility elements paints ::before and ::after when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

#container::before {

  content: "a";

  color: blue;

}

.hasAfter::after {

  content: "b";

  color: green;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div id="container" class=hidden style="display:none;"></div>

<script>

async function runTest() {

  container.classList.add("hasAfter");

  container.classList.remove("hidden");

  container.style = "";

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: scroll child into view, and adopt to a document</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="scrollIntoView on a hidden subtree is a no-op">

<meta name="assert" content="adopting an element in a hidden subtree works (no asserts / crashes)">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div id=container class=hidden>

  Text.

  <div id=child></div>

</div>

<script>

function moveChild() {

  child.scrollIntoView();

  document.implementation.createDocument( "", null).adoptNode(child);

  requestAnimationFrame(takeScreenshot);

}

async function runTest() {

  requestAnimationFrame(moveChild);

}

window.onload = requestAnimationFrame(runTest);

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044-expected.txt

CONSOLE MESSAGE: Error: assert_equals: expected 0 but got 10

Harness Error (FAIL), message = Error: assert_equals: expected 0 but got 10

TIMEOUT Content Visibility: slot moved after container is hidden Test timed out

Harness Error (FAIL), message = Error: assert_equals: expected 0 but got 10

TIMEOUT Content Visibility: slot moved after container is hidden Test timed out

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: slot moved after container is hidden</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="ensure that hidden slotted element can be updated">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id=host>

<input id=slotted>

<script>

async_test((t) => {

  let container = document.createElement("div");

  container.innerHTML = "<slot></slot>";

  let shadowRoot = host.attachShadow({ mode: "open" });

  shadowRoot.innerHTML = "<style>.hidden { content-visibility: hidden }</style>";

  shadowRoot.appendChild(container);

  t.step(async () => {

    container.classList.add("hidden");

    requestAnimationFrame(() => {

      assert_equals(slotted.offsetTop, 0);

      container.innerHTML = "<div style='height: 20px;'></div><slot></slot>";

      t.done();

    });

  });

});

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: auto subtree becomes hidden in the viewport</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="hidden subtree because auto and so stops painting">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

.auto { content-visibility: auto; }

.hidden { content-visibility: hidden; }

</style>

<div id=container class=auto>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  document.getElementById("container").classList.remove("auto");

  document.getElementById("container").classList.add("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: viewport auto painting.</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-child-ref.html">

<meta name="assert" content="viewport intersection paints the content-visibility auto element">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

.auto {

  content-visibility: auto;

}

</style>

<div id=container class=auto>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  document.getElementById("target").classList.add("auto");

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(

  () => requestAnimationFrame(takeScreenshot));

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047-expected.txt

FAIL Tab order navigation skips hidden subtrees assert_equals: expected Element node <input id="five" type="text"></input> but got Element node <input id="two" type="text"></input>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047.html

<!doctype HTML>

<meta charset="utf8">

<title>Content Visibility: tab order navigation ignores hidden subtrees</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="tab order navigation ignores hidden subtrees.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<style>

.hidden {

  content-visibility: hidden;

}

</style>

<input id=one type=text></input>

<div class=hidden>

  <input id=two type=text></input>

  <input id=three type=text></input>

  <input id=four type=text></input>

</div>

<input id=five type=text></input>

<script>

async_test((t) => {

  const tab = "\t";

  async function step1() {

    await test_driver.send_keys(document.body, tab);

    t.step(() => {

      assert_equals(document.activeElement, document.getElementById("one"));

    });

    requestAnimationFrame(step2);

  }

  async function step2() {

    await test_driver.send_keys(document.body, tab);

    t.step(() => {

      assert_equals(document.activeElement, document.getElementById("five"));

    });

    t.done();

  }

  window.onload = () => { requestAnimationFrame(step1); };

}, "Tab order navigation skips hidden subtrees");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048-expected.txt

FAIL Fragment navigation with content-visibility; single text promise_test: Unhandled rejection with value: object "ReferenceError: Can't find variable: fetchResults"

FAIL Fragment navigation with content-visibility; range across blocks promise_test: Unhandled rejection with value: object "ReferenceError: Can't find variable: fetchResults"

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: navigating to a text fragment.</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="timeout" content="long">

<meta name="assert" content="content-visibility: auto subtrees are 'searchable' by text fragment links">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="/common/utils.js"></script>

<script src="/scroll-to-text-fragment/stash.js"></script>

<script>

promise_test(t => new Promise((resolve, reject) => {

    const fragment = '#:~:text=hiddentext';

    const key = token();

    test_driver.bless("Open a URL with a text fragment directive", () => {

      window.open(`resources/text-fragment-target-auto.html?key=${key}${fragment}`,

                  '_blank',

                  'noopener');

    });

    fetchResults(key, resolve, reject);

}).then(data => {

  assert_equals(data.scrollPosition, "text");

  assert_equals(data.target, "text");

}), "Fragment navigation with content-visibility; single text");

promise_test(t => new Promise((resolve, reject) => {

    const fragment = '#:~:text=start,end';

    const key = token();

    test_driver.bless("Open a URL with a text fragment directive", () => {

      window.open(`resources/text-fragment-target-auto.html?key=${key}${fragment}`,

                  '_blank',

                  'noopener');

    });

    fetchResults(key, resolve, reject);

}).then(data => {

  assert_equals(data.scrollPosition, "text2");

  assert_equals(data.target, "text2and3ancestor");

}), "Fragment navigation with content-visibility; range across blocks");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: anchor links paint subtrees (reference)</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

  background: lightgreen;

}

#target {

  width: 100px;

  height: 100px;

  background: green;

}

</style>

<div class="spacer"></div>

<div id="container"><div id="target"></div></div>

<script>

target.scrollIntoView();

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: anchor links paint subtrees</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-049-ref.html">

<meta name="assert" content="content-visibility auto subtrees respond to anchor links">

<script src="/common/reftest-wait.js"></script>

<script src="../resources/utils.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightgreen;

  content-visibility: auto;

}

#target {

  width: 100px;

  height: 100px;

  background: green;

}

</style>

<div class="spacer"></div>

<div id="container"><div id="target"></div></div>

<script>

function runTest() {

  location.href += "#target";

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => { requestAnimationFrame(runTest); };

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050-expected.txt

FAIL Using tabindex to focus an newly constructed element in an auto subtree focuses element assert_greater_than: expected a number greater than 500 but got 0

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: focus on new element</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="focus can target content-visibility: auto subtrees created while hidden">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

.auto {

  content-visibility: auto;

}

.spacer {

  height: 3000px;

}

</style>

<div class=spacer></div>

<div id=container class=auto></div>

<script>

async_test((t) => {

  function runTest() {

    const focusable = document.createElement("div");

    focusable.tabIndex = 0;

    container.appendChild(focusable);

    focusable.focus();

    requestAnimationFrame(() => {

      t.step(() => assert_greater_than(document.scrollingElement.scrollTop, 500));

      t.done();

    });

  }

  onload = requestAnimationFrame(() => requestAnimationFrame(runTest));

}, "Using tabindex to focus an newly constructed element in an auto subtree focuses element");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

</style>

<div id=container></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: switching to block stop painting</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-ref.html">

<meta name="assert" content="content-visibility has no effect on non-atomic inlines, but switching to block stop painting">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  content-visibility: hidden;

  width: 150px;

  height: 150px;

  background: lightblue;

}

.inline {

  display: inline;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container class=inline>

  Text.

  <div id=child></div>

  <span>inline child</span>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.remove("inline");

  takeScreenshot();

}

window.onload = () => requestAnimationFrame(runTest);

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  contain: layout;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

.abspos { position: absolute; }

.relpos { position: relative; }

.fixedpos { position: fixed; }

.start { top: 0; left: 0; }

.mid { top: 10px; left: 10px; }

.end { bottom: 0; right: 0; }

.zindex { z-index: 1; }

.small { width: 10px; height: 10px; background: blue; }

.medium { width: 20px; height: 20px; background: green; }

.large { width: 30px; height: 30px; background: pink; }

</style>

<div id=container>

  Text.

  <div id=child></div>

  <span>inline child</span>

  <div class="abspos start small"></div>

  <div class="relpos mid medium"></div>

  <div class="fixedpos end large"></div>

  <div class=relpos>

    <div class="abspos mid small zindex"></div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden starts painting when removed</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-pos-children-ref.html">

<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  contain: layout;

}

.hidden {

  content-visibility: hidden;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

.abspos { position: absolute; }

.relpos { position: relative; }

.fixedpos { position: fixed; }

.start { top: 0; left: 0; }

.mid { top: 10px; left: 10px; }

.end { bottom: 0; right: 0; }

.zindex { z-index: 1; }

.small { width: 10px; height: 10px; background: blue; }

.medium { width: 20px; height: 20px; background: green; }

.large { width: 30px; height: 30px; background: pink; }

</style>

<div id=container class=hidden>

  Text.

  <div id=child></div>

  <span>inline child</span>

  <div class="abspos start small"></div>

  <div class="relpos mid medium"></div>

  <div class="fixedpos end large"></div>

  <div class=relpos>

    <div class="abspos mid small zindex"></div>

  </div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.remove("hidden");

  requestAnimationFrame(takeScreenshot);

}

window.onload = runTest;

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053-expected.txt

PASS Targetting a slotted auto-hidden element with focus makes it the active element

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053.html

<html>

<meta charset="utf8">

<title>Content Visibility: focus on display none element</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="tab navigation skips display none elements in an auto subtree">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id=spacer style="height: 3000px"></div>

<div id="host">

  <input id="slotted" type="text">

</div>

<script>

test(() => {

  const container = document.createElement("div");

  container.innerHTML = "<slot></slot>";

  container.style = "content-visibility: auto";

  const shadowRoot = host.attachShadow({ mode: "open" });

  shadowRoot.appendChild(container);

  assert_not_equals(document.activeElement, slotted);

  slotted.focus();

  assert_equals(document.activeElement, slotted);

}, "Targetting a slotted auto-hidden element with focus makes it the active element");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054-expected.txt

PASS Trying to focus on an element in a hidden subtree with display none will not work

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Display Locking: focus on styled element</title>

<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="focus does not target display-none but hidden elements">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<div id="container" style="content-visibility: auto">

  <div id="focusable1" tabIndex="0">

    focusable thing

  </div>

  <div id="displayNoneParent">

    <div id="focusable2" tabIndex="0">

      focusable thing

    </div>

  </div>

</div>

<script>

test(() => {

  focusable1.style.display = "none";

  focusable1.focus();

  assert_not_equals(document.activeElement, focusable1);

  displayNoneParent.style.display = "none";

  focusable2.focus();

  assert_not_equals(document.activeElement, focusable2);

}, "Trying to focus on an element in a hidden subtree with display none will not work");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container, scrolled to container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightgreen;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

<script>

onload = () => container.scrollIntoView();

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: anchor links prevented</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-scrolled-ref.html">

<meta name="assert" content="anchor link scroll is not prevented when the target is hidden">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightgreen;

  content-visibility: hidden;

}

#target {

  width: 100px;

  height: 100px;

  background: green;

}

</style>

<div class="spacer"></div>

<div id="container"><div id="target"></div></div>

<script>

function runTest() {

  location.href += "#target";

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => { requestAnimationFrame(runTest); };

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container, scrolled to container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightgreen;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

<script>

onload = () => container.scrollIntoView();

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: scrollIntoView prevented</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-scrolled-ref.html">

<meta name="assert" content="scrollIntoView is not prevented when the target is hidden">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightgreen;

  content-visibility: hidden;

}

#target {

  width: 100px;

  height: 100px;

  background: green;

}

</style>

<div class="spacer"></div>

<div id="container"><div id="target"></div></div>

<script>

function runTest() {

  document.getElementById("target").scrollIntoView();

  requestAnimationFrame(takeScreenshot);

}

window.onload = () => { requestAnimationFrame(runTest); };

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: hidden subtree becomes auto in the viewport</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="container-with-child-ref.html">

<meta name="assert" content="hidden subtree because auto and then paints">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

.auto { content-visibility: auto; }

.hidden { content-visibility: hidden; }

</style>

<div id=container class=hidden>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  document.getElementById("container").classList.remove("hidden");

  document.getElementById("container").classList.add("auto");

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058-expected.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto, scrollIntoView() (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  height: 10000px;

}

.container {

  position: relative;

  width: 150px;

  background: lightblue;

  contain-intrinsic-size: 50px 250px;

}

.size_contained {

  contain: size;

}

.child {

  width: 50px;

  height: 300px;

  background: lightgreen;

}

#target {

  position: absolute;

  bottom: 0;

  width: 10px;

  height: 10px;

  background: blue;

}

</style>

<div class=spacer></div>

<div id=container class="container">

  <div class=child></div>

  <div id=target></div>

</div>

<div class=spacer></div>

<script>

function runReference() {

  document.getElementById("target").scrollIntoView(true /* alignToTop */);

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runReference();

    });

  });

});

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>Content Visibility: auto, scrollIntoView()</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-058-ref.html">

<meta name="assert" content="scrollIntoView() uses contain:size information to find target offset">

<meta name="assert" content="viewport intersection removes contain:size thus moving target">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  height: 10000px;

}

.container {

  width: 150px;

  background: lightblue;

  contain-intrinsic-size: 50px 250px;

}

.child {

  width: 50px;

  height: 300px;

  background: lightgreen;

}

#target {

  position: absolute;

  bottom: 0;

  width: 10px;

  height: 10px;

  background: blue;

}

.auto { content-visibility: auto; }

</style>

<div class=spacer></div>

<div class="container auto">

  <div class=child></div>

  <div id=target></div>

</div>

<div class=spacer></div>

<script>

function runTest() {

  document.getElementById("target").scrollIntoView(true /* alignToTop */);

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: hidden + scrollIntoView (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  height: 1000px;

  background: lightgreen;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  position: relative;

  top: 75px;

  visibility: hidden;

  width: 50px;

  height: 50px;

  background: red;

}

</style>

<div>top of the page</div>

<div class=spacer></div>

<div id=container>

  <div id=target></div>

</div>

<div class=spacer></div>

<div>bottom of the page</div>

<script>

onload = () => document.getElementById("target").scrollIntoView();

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden + scrollIntoView</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-059-ref.html">

<meta name="assert" content="scrollIntoView scrolls to element under hidden, not just container">

<meta name="assert" content="scrollIntoView does not start painting hidden content">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  height: 1000px;

  background: lightgreen;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div>top of the page</div>

<div class=spacer></div>

<div id=container class=hidden>

  <div id=target></div>

</div>

<div class=spacer></div>

<div>bottom of the page</div>

<script>

function runTest() {

  document.getElementById("target").scrollIntoView();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden + scrollIntoView on display:none</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-ref.html">

<meta name="assert" content="scrollIntoView ignores display:none element in a hidden subtree">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  display: none;

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div class=spacer></div>

<div id=container class=hidden>

  <div id=target></div>

</div>

<script>

function runTest() {

  document.getElementById("target").scrollIntoView();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden + scrollIntoView on display:contents</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-ref.html">

<meta name="assert" content="scrollIntoView ignores display:contents element in a hidden subtree">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  display: contents;

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div class=spacer></div>

<div id=container class=hidden>

  <div id=target></div>

</div>

<script>

function runTest() {

  document.getElementById("target").scrollIntoView();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + scrollIntoView on display:none</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-ref.html">

<meta name="assert" content="scrollIntoView ignores display:none element in an auto subtree">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  display: none;

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.auto {

  content-visibility: auto;

}

</style>

<div class=spacer></div>

<div id=container class=auto>

  <div id=target></div>

</div>

<script>

function runTest() {

  document.getElementById("target").scrollIntoView();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + scrollIntoView on display:contents</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-ref.html">

<meta name="assert" content="scrollIntoView ignores display:contents element in an auto subtree">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  display: contents;

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.auto {

  content-visibility: auto;

}

</style>

<div class=spacer></div>

<div id=container class=auto>

  <div id=target></div>

</div>

<script>

function runTest() {

  document.getElementById("target").scrollIntoView();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064-expected.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden + scrollIntoView (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  height: 1000px;

  background: lightgreen;

}

#container {

  position: relative;

  width: 150px;

  background: lightblue;

  contain: paint;

}

#child {

  width: 150px;

  height: 300px;

}

#target {

  position: absolute;

  bottom: 0;

  width: 50px;

  height: 50px;

  background: red;

}

</style>

<div>top of the page</div>

<div class=spacer></div>

<div id=container>

  <div id=child></div>

  <div id=target tabindex=0></div>

</div>

<div class=spacer></div>

<div>bottom of the page</div>

<script>

function runReference() {

  document.getElementById("target").focus();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runReference();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + focus</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-064-ref.html">

<meta name="assert" content="focus() can focus auto skipped subtree elements">

<meta name="assert" content="focus() scrolls after removing contain:size">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  height: 1000px;

  background: lightgreen;

}

#container {

  width: 150px;

  background: lightblue;

  contain-intrinsic-size: 50px 150px;

}

#child {

  width: 150px;

  height: 300px;

}

#target {

  position: absolute;

  bottom: 0;

  width: 50px;

  height: 50px;

  background: red;

}

.auto {

  content-visibility: auto;

}

</style>

<div>top of the page</div>

<div class=spacer></div>

<div id=container class=auto>

  <div id=child></div>

  <div id=target tabindex=0></div>

</div>

<div class=spacer></div>

<div>bottom of the page</div>

<script>

function runTest() {

  document.getElementById("target").focus();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + focus on display:none</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-ref.html">

<meta name="assert" content="focus ignores display:none element in an auto subtree">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  display: none;

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.auto {

  content-visibility: auto;

}

</style>

<div class=spacer></div>

<div id=container class=auto>

  <div id=target tabindex=0></div>

</div>

<script>

function runTest() {

  document.getElementById("target").focus();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + focus on display:contents</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-ref.html">

<meta name="assert" content="focus ignores display:contents element in an auto subtree">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  display: contents;

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.auto {

  content-visibility: auto;

}

</style>

<div class=spacer></div>

<div id=container class=auto>

  <div id=target tabindex=0></div>

</div>

<script>

function runTest() {

  document.getElementById("target").focus();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: spacer and a container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  contain: style layout;

  width: 150px;

  height: 150px;

}

</style>

<div class="spacer"></div>

<div id="container"></div>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: hidden + focus</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="spacer-and-container-ref.html">

<meta name="assert" content="focus ignores element in a hidden subtree">

<script src="/common/reftest-wait.js"></script>

<style>

.spacer {

  width: 150px;

  height: 3000px;

  background: lightblue;

}

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

}

#target {

  position: relative;

  top: 75px;

  width: 50px;

  height: 50px;

  background: red;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div class=spacer></div>

<div id=container class=hidden>

  <div id=target tabindex=0></div>

</div>

<script>

function runTest() {

  document.getElementById("target").focus();

  requestAnimationFrame(takeScreenshot);

}

window.onload = requestAnimationFrame(() => {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      runTest();

    });

  });

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068-expected.txt

FAIL Content Visibility: off-screen focus assert_equals: step1 height expected 100 but got 10

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: off-screen focus</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have focus.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body, html {

  padding: 0;

  margin: 0;

}

.spacer {

  height: 3000px;

  background: lightblue;

}

#container {

  background: lightgreen;

  contain-intrinsic-size: 50px 100px;

  content-visibility: auto;

}

#focusable {

  width: 10px;

  height: 10px;

}

</style>

<div class=spacer></div>

<div id=container>

  <div id=focusable tabindex=0></div>

</div>

<div class=spacer></div>

<script>

async_test((t) => {

  // Initially container should be 3000px offscreen with contained height 100px.

  function step1() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step1 offset");

      assert_equals(r.height, 100, "step1 height");

    });

    focusable.focus();

    requestAnimationFrame(step2);

  }

  // After focusing the subtree, the container should be somewhere closer than

  // 3000px (scrolled into view) and the height should be 10px, since it no

  // longer has containment.

  function step2() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_less_than(r.y, 3000, "step2 offset");

      assert_equals(r.height, 10, "step2 height");

    });

    document.scrollingElement.scrollTop = 0;

    requestAnimationFrame(step3);

  }

  // After scrolling the document back to the top, the container should be back

  // at 3000px but because its subtree is still focused, it should have height

  // 10px.

  function step3() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step3 offset");

      assert_equals(r.height, 10, "step3 height");

    });

    requestAnimationFrame(step4);

  }

  // This is a repeat of step3, to ensure that this is a stable state.

  function step4() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step4 offset");

      assert_equals(r.height, 10, "step4 height");

    });

    focusable.blur();

    requestAnimationFrame(step5);

  }

  // After blurring the focused element, we should go back to the contained

  // height of 100px.

  function step5() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step5 offset");

      assert_equals(r.height, 100, "step5 height");

    });

    t.done();

  }

  step1();

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069-expected.txt

PASS Content Visibility: pending visibility changes

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: pending visibility changes</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="disconnecting elements while visibility state adjustments are pending does not crash">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body {

  margin: 0;

  padding: 0;

}

.spacer {

  height: 3000px;

}

.auto {

  content-visibility: auto;

  width: 5px;

  height: 5px;

}

</style>

<body id="body">

<div id=one class=auto>text</div>

<div class=spacer></div>

<div id=two class=auto>text</div>

<div class=spacer></div>

</body>

<script>

async_test((t) => {

  function runTest() {

    document.scrollingElement.scrollTop = 2990;

    const range = document.createRange();

    range.selectNodeContents(one);

    window.getSelection().addRange(range);

    requestAnimationFrame(() => {

      one.remove();

      two.remove();

      t.done();

    });

  }

  onload = requestAnimationFrame(() => requestAnimationFrame(runTest));

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070-expected.txt

hello

FAIL Content Visibility: off-screen selection assert_equals: step1 height expected 100 but got 10

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: off-screen selection</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body, html {

  padding: 0;

  margin: 0;

}

.spacer {

  height: 3000px;

  background: lightblue;

}

#container {

  background: lightgreen;

  contain-intrinsic-size: 50px 100px;

  content-visibility: auto;

}

#selectable {

  width: 10px;

  height: 10px;

}

</style>

<div class=spacer></div>

<div id=container>

  <div id=selectable>hello</div>

</div>

<div class=spacer></div>

<script>

async_test((t) => {

  const selection = window.getSelection();

  const range = document.createRange();

  range.selectNodeContents(selectable);

  // Initially container should be 3000px offscreen with contained height 100px.

  function step1() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step1 offset");

      assert_equals(r.height, 100, "step1 height");

    });

    selection.removeAllRanges();

    selection.addRange(range);

    requestAnimationFrame(step2);

  }

  // The container has a selection so it should be smaller now, height 10px.

  function step2() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step3 offset");

      assert_equals(r.height, 10, "step3 height");

    });

    document.scrollingElement.scrollTop = 3000;

    requestAnimationFrame(step3);

  }

  // After scrolling the container should be closer and still height 10px.

  function step3() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_less_than(r.y, 3000, "step2 offset");

      assert_equals(r.height, 10, "step2 height");

    });

    document.scrollingElement.scrollTop = 0;

    requestAnimationFrame(step4);

  }

  // Scrolling back to the top we should remain at height 10px.

  function step4() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step4 offset");

      assert_equals(r.height, 10, "step4 height");

    });

    requestAnimationFrame(step5);

  }

  // Repeat step4 to ensure we're in a stable situation.

  function step5() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step4 offset");

      assert_equals(r.height, 10, "step4 height");

    });

    selection.removeAllRanges();

    requestAnimationFrame(step6);

  }

  // After removing the selection we should go back to the contained

  // height of 100px.

  function step6() {

    const r = container.getBoundingClientRect();

    t.step(() => {

      assert_equals(r.y, 3000, "step5 offset");

      assert_equals(r.height, 100, "step5 height");

    });

    t.done();

  }

  step1();

});

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071-expected.txt

hello

hello

hello

hello

hello

FAIL One elements selected:  assert_true: expected true got false

FAIL Range extended to cover more elements:  assert_true: expected true got false

FAIL Range shrunk to cover fewer elements:  assert_true: expected true got false

FAIL Range flipped from back to front:  assert_true: expected true got false

FAIL Range flipped from front to back:  assert_true: expected true got false

FAIL Range goes back and forth:  assert_true: expected true got false

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: off-screen selection</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body, html {

  padding: 0;

  margin: 0;

}

.spacer {

  height: 3000px;

}

.container {

  width: 10px;

  contain-intrinsic-size: 10px 20px;

  content-visibility: auto;

}

.child {

  width: 10px;

  height: 10px;

}

</style>

<div class=spacer></div>

<div id=container_1 class=container><div id=child_1 class=child>hello</div></div>

<div id=container_2 class=container><div id=child_2 class=child>hello</div></div>

<div id=container_3 class=container><div id=child_3 class=child>hello</div></div>

<div id=container_4 class=container><div id=child_4 class=child>hello</div></div>

<div id=container_5 class=container><div id=child_5 class=child>hello</div></div>

<script>

function isLocked(container) {

  const height = container.getBoundingClientRect().height;

  assert_true(height == 20 || height == 10);

  return container.getBoundingClientRect().height == 20;

}

const selection = window.getSelection();

function resetSelection() {

  selection.removeAllRanges();

  assert_true(isLocked(container_1));

  assert_true(isLocked(container_2));

  assert_true(isLocked(container_3));

  assert_true(isLocked(container_4));

  assert_true(isLocked(container_5));

}

test(() => {

  resetSelection();

  const range = document.createRange();

  range.selectNodeContents(child_2);

  selection.addRange(range);

  assert_true(isLocked(container_1), "1");

  assert_false(isLocked(container_2), "2");

  assert_true(isLocked(container_3), "3");

  assert_true(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

}, "One elements selected: ");

test(() => {

  resetSelection();

  const range = document.createRange();

  range.selectNodeContents(child_2);

  selection.addRange(range);

  assert_true(isLocked(container_1), "1");

  assert_false(isLocked(container_2), "2");

  assert_true(isLocked(container_3), "3");

  assert_true(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

  selection.extend(child_4, 0);

  assert_true(isLocked(container_1), "1");

  assert_false(isLocked(container_2), "2");

  assert_false(isLocked(container_3), "3");

  assert_false(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

}, "Range extended to cover more elements: ");

test(() => {

  resetSelection();

  const range = document.createRange();

  range.setStart(child_2, 0);

  range.setEnd(child_4, 0);

  selection.addRange(range);

  assert_true(isLocked(container_1), "1");

  assert_false(isLocked(container_2), "2");

  assert_false(isLocked(container_3), "3");

  assert_false(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

  selection.extend(child_2, 1);

  assert_true(isLocked(container_1), "1");

  assert_false(isLocked(container_2), "2");

  assert_true(isLocked(container_3), "3");

  assert_true(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

}, "Range shrunk to cover fewer elements: ");

test(() => {

  resetSelection();

  const range = document.createRange();

  range.setStart(child_3, 0);

  range.setEnd(child_3, 0);

  selection.addRange(range);

  selection.extend(child_2, 0);

  assert_true(isLocked(container_1), "1");

  assert_false(isLocked(container_2), "2");

  assert_false(isLocked(container_3), "3");

  assert_true(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

  selection.extend(child_4, 0);

  assert_true(isLocked(container_1), "1");

  assert_true(isLocked(container_2), "2");

  assert_false(isLocked(container_3), "3");

  assert_false(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

}, "Range flipped from back to front: ");

test(() => {

  resetSelection();

  const range = document.createRange();

  range.setStart(child_3, 0);

  range.setEnd(child_4, 0);

  selection.addRange(range);

  assert_true(isLocked(container_1), "1");

  assert_true(isLocked(container_2), "2");

  assert_false(isLocked(container_3), "3");

  assert_false(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

  selection.extend(child_2, 0);

  assert_true(isLocked(container_1), "1");

  assert_false(isLocked(container_2), "2");

  assert_false(isLocked(container_3), "3");

  assert_true(isLocked(container_4), "4");

  assert_true(isLocked(container_5), "5");

}, "Range flipped from front to back: ");

test(() => {

  resetSelection();

  const range = document.createRange();

  range.setStart(child_1, 0);

  range.setEnd(child_1, 0);

  selection.addRange(range);

  let state = 0;

  const states = [2, 4, 3, 5, 1];

  for (let i = 0; i < 10; ++i) {

    const id = states[state];

    selection.extend(document.getElementById(`child_${id}`), 1);

    for (let check_id = 1; check_id <= 5; ++check_id) {

      if (check_id <= id) {

        assert_false(

          isLocked(document.getElementById(`container_${check_id}`)),

          `test_${i}, container_${check_id}`);

      } else {

        assert_true(

          isLocked(document.getElementById(`container_${check_id}`)),

          `test_${i}, container_${check_id}`);

      }

    }

    state = (state + 1) % states.length;

  }

}, "Range goes back and forth: ");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072-expected.txt

PASS one.getBoundingClientRect():

FAIL two.getBoundingClientRect():  assert_equals: y expected 3007 but got 3041

FAIL three.getBoundingClientRect():  assert_equals: y expected 3007 but got 3075

FAIL four.getBoundingClientRect():  assert_equals: y expected 3007 but got 3109

FAIL five.getBoundingClientRect():  assert_equals: y expected 3007 but got 3143

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>Content Visibility: nested forced layouts</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="nested content-visibility items are all processed when layout is forced">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

body, html {

  padding: 0;

  margin: 0;

}

.spacer {

  height: 3000px;

}

.target {

  width: 12px;

  height: 34px;

  position: relative;

  left: 5px;

  top: 7px;

}

.auto {

  content-visibility: auto;

}

.hidden {

  content-visibility: hidden;

}

</style>

<div class=spacer></div>

<div class=auto>

  <div class=auto>

    <div class=target id=one></div>

  </div>

</div>

<div class=auto>

  <div class=hidden>

    <div class=target id=two></div>

  </div>

</div>

<div class=hidden>

  <div class=auto>

    <div class=target id=three></div>

  </div>

</div>

<div class=hidden>

  <div class=hidden>

    <div class=target id=four></div>

  </div>

</div>

<div class=hidden>

  <div class=hidden>

    <div class=hidden>

      <div class=hidden>

        <div class=hidden>

          <div class=target id=five></div>

        </div>

      </div>

    </div>

  </div>

</div>

<script>

const ids = ["one", "two", "three", "four", "five"];

for (let i = 0; i < ids.length; ++i) {

  test(() => {

    const r = document.getElementById(ids[i]).getBoundingClientRect();

    assert_equals(r.x, 5, "x");

    assert_equals(r.y, 3007, "y");

    assert_equals(r.width, 12, "width");

    assert_equals(r.height, 34, "y");

  }, `${ids[i]}.getBoundingClientRect(): `);

}

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: container with child and text (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#container {

  width: 150px;

  height: 150px;

  background: lightblue;

  display: inline;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: switching to inline starts painting</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="inline-container-with-child-ref.html">

<meta name="assert" content="content-visibility has no effect on non-atomic inlines">

<script src="/common/reftest-wait.js"></script>

<style>

#container {

  content-visibility: hidden;

  width: 150px;

  height: 150px;

  background: lightblue;

}

.inline {

  display: inline;

}

#child {

  width: 50px;

  height: 50px;

  background: lightgreen;

}

</style>

<div id=container>

  Text.

  <div id=child></div>

</div>

<script>

function runTest() {

  const container = document.getElementById("container");

  container.classList.add("inline");

  takeScreenshot();

}

window.onload = () => requestAnimationFrame(runTest);

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: toggling auto with composited descedant (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#a { will-change: transform; }

#b { height: 15000px; }

#c {

  width: 800px;

  height: 600px;

}

#d {

  will-change: transform;

  top: 0px;

  width: 500px;

  height: 500px;

  background: green;

}

.contain {

  contain: layout style paint;

}

</style>

<div id="a">

</div>

<div id="b">

  <div id="c" class=contain>

    <div id="d"></div>

    </div>

  </div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: toggling auto with composited descedant</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-074-ref.html">

<meta name="assert" content="after toggling content-visibility auto a few times, composited descedant is visible.">

<script src="/common/reftest-wait.js"></script>

<style>

#a { will-change: transform; }

#b { height: 15000px; }

#c {

  width: 800px;

  height: 600px;

}

#d {

  will-change: transform;

  top: 0px;

  width: 500px;

  height: 500px;

  background: green;

}

.auto {

  content-visibility: auto;

}

</style>

<div id="a">

</div>

<div id="b">

  <div id="c" class=auto>

    <div id="d"></div>

    </div>

  </div>

</div>

<script>

function runTest(step) {

  if (step % 2 == 0) {

    requestAnimationFrame(() => runTest(step + 1));

    return;

  }

  switch(step) {

    case 1:

      document.getElementById("c").classList.remove("auto");

      break;

    case 3:

      document.getElementById("c").classList.add("auto");

      break;

    case 5:

      document.getElementById("c").classList.remove("auto");

      break;

    case 7:

      document.getElementById("c").classList.add("auto");

      break;

    case 9:

      takeScreenshot();

      return;

  }

  requestAnimationFrame(() => runTest(step + 1));

}

window.onload = () => requestAnimationFrame(() => runTest(0));

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075-expected.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + scrollIntoView/fragment nav when size estimate is off (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<script src="/common/reftest-wait.js"></script>

<style>

.small_child {

  height: 1000px;

}

.large_child {

  height: 20000px;

  position: relative;

}

#target {

  position: absolute;

  bottom: 0;

}

</style>

<div class=auto><div class=small_child></div></div>

<div class=auto><div class=small_child></div></div>

<div class=auto><div class=large_child><div id=target>target</div></div></div>

<div class=auto><div class=large_child></div></div>

<div class=auto><div class=small_child></div></div>

<script>

function runReference() {

  target.scrollIntoView();

  takeScreenshot();

}

window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + scrollIntoView when size estimate is off</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-075-ref.html">

<meta name="assert" content="With content-visibility: auto, scrollIntoView targets the right element">

<script src="/common/reftest-wait.js"></script>

<style>

.auto {

  content-visibility: auto;

  contain-intrinsic-size: 1px 1000px;

}

.child {

  height: 20000px;

  position: relative;

}

#target {

  position: absolute;

  bottom: 0;

}

</style>

<div class=auto><div class=child></div></div>

<div class=auto><div class=child></div></div>

<div class=auto><div class=child><div id=target>target</div></div></div>

<div class=auto><div class=child></div></div>

<div class=auto><div class=child></div></div>

<script>

function runTest() {

  target.scrollIntoView();

  // Double rAF to ensure that rendering has "settled".

  requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));

}

window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076-expected.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + scrollIntoView/fragment nav when size estimate is off (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<script src="/common/reftest-wait.js"></script>

<style>

.small_child {

  height: 1000px;

}

.large_child {

  height: 20000px;

  position: relative;

}

#target {

  position: absolute;

  bottom: 0;

}

</style>

<div class=auto><div class=small_child></div></div>

<div class=auto><div class=small_child></div></div>

<div class=auto><div class=large_child><div id=target>target</div></div></div>

<div class=auto><div class=large_child></div></div>

<div class=auto><div class=small_child></div></div>

<script>

function runReference() {

  target.scrollIntoView();

  takeScreenshot();

}

window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: auto + fragment nav when size estimate is off</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-075-ref.html">

<meta name="assert" content="With content-visibility: auto, scrollIntoView targets the right element">

<script src="/common/reftest-wait.js"></script>

<style>

.auto {

  content-visibility: auto;

  contain-intrinsic-size: 1px 1000px;

}

.child {

  height: 20000px;

  position: relative;

}

#target {

  position: absolute;

  bottom: 0;

}

</style>

<div class=auto><div class=child></div></div>

<div class=auto><div class=child></div></div>

<div class=auto><div class=child><div id=target>target</div></div></div>

<div class=auto><div class=child></div></div>

<div class=auto><div class=child></div></div>

<script>

function runTest() {

  window.location.href += "#target";

  // Double rAF to ensure that rendering has "settled".

  requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));

}

window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077-expected.txt

FAIL Content-visibility is not animatable assert_equals: expected (string) "visible" but got (undefined) undefined

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077.html

<!doctype HTML>

<meta charset="utf8">

<title>CSS Content Visibility: content-visibility is not animatable.</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility is not animatable">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

@keyframes cv {

  from { content-visibility: auto }

  to { content-visibility: hidden }

}

#container { animation: cv 1s; }

</style>

<div id=container></div>

<script>

test(() => {

  const computedStyle = getComputedStyle(container);

  assert_equals(computedStyle.contentVisibility, "visible");

}, "Content-visibility is not animatable");

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: positioned movement update moves hidden container (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<style>

#target {

  top: 0;

  left: 100px;

  position: absolute;

  width: 100px;

  height: 100px;

  background: blue;

}

</style>

<div id=target></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078.html

<!doctype HTML>

<html class="reftest-wait">

<meta charset="utf8">

<title>CSS Content Visibility: positioned movement update moves hidden container</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-078-ref.html">

<meta name="assert" content="when locked, position updates still apply">

<script src="/common/reftest-wait.js"></script>

<style>

.hidden { content-visibility: hidden; }

#target {

  top: 0;

  left: 0;

  position: absolute;

  width: 100px;

  height: 100px;

  background: blue;

}

</style>

<div id=target class=hidden>Content</div>

<script>

function runTest() {

  target.style = "left: 100px;";

  takeScreenshot();

}

window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));

</script>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079-expected.html

<!doctype HTML>

<html>

<meta charset="utf8">

<title>CSS Content Visibility: auto in overflow hidden paints (reference)</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<div>content</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079.html

<!doctype HTML>

<meta charset="utf8">

<title>CSS Content Visibility: auto in overflow hidden paints</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="match" href="content-visibility-079-ref.html">

<meta name="assert" content="content-visibility auto element paints in an overflow hidden element that is not sized">

<style>

.auto { content-visibility: auto; }

.overflow { overflow: hidden; }

</style>

<div class=overflow>

  <div class=auto>content</div>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080-expected.txt

Content Visibility: caret position with html hidden   * { all: initial; content-visibility: hidden; } test(() => { const range = document.caretRangeFromPoint(); assert_not_equals(range, null, "range exists"); assert_equals(range.startContainer, html, "startContainer is html"); assert_equals(range.startOffset, 0, "startOffset is zero"); assert_equals(range.endContainer, html, "endContainer is html"); assert_equals(range.endOffset, 0, "endOffset is zero"); }, "Caret range from point");

FAIL Caret range from point assert_equals: startContainer is html expected Element node <html id="html"><head><meta charset="utf8">

<title>Conten... but got Text node "Content Visibility: caret position with html hidden"

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080.html

<!doctype HTML>

<html id=html>

<meta charset="utf8">

<title>Content Visibility: caret position with html hidden</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="caretRangeFromPoint works even if html has content-visibility hidden">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<meter></meter>

<iframe></iframe>

<style>

* {

  all: initial;

  content-visibility: hidden;

}

</style>

<script>

test(() => {

  const range = document.caretRangeFromPoint();

  assert_not_equals(range, null, "range exists");

  assert_equals(range.startContainer, html, "startContainer is html");

  assert_equals(range.startOffset, 0, "startOffset is zero");

  assert_equals(range.endContainer, html, "endContainer is html");

  assert_equals(range.endOffset, 0, "endOffset is zero");

}, "Caret range from point");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081-expected.txt

PASS Scroll offset is restored when content-visibility hidden is removed

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081.html

<!doctype HTML>

<html id=html>

<meta charset="utf8">

<title>Content Visibility: scroll position restoration</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="if an scroller is hidden via content-visibility and then shown again, its scroll offset should be restored">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="support/helper.js"></script>

<style>

.scroller {

  width: 100px;

  height: 500px;

  overflow-y: scroll;

}

.spacer { height: 3000px; }

.hidden { content-visibility: hidden; }

</style>

<div id=target class=scroller>

  <div class=spacer></div>

</div>

</style>

<script>

function removeHiddenAndScheduleTest(t) {

  target.classList.remove("hidden");

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      testScrollTop(t);

    });

  });

}

function testScrollTop(t) {

  t.step(() => assert_equals(target.scrollTop, 2000));

  t.done();

}

async_test((t) => {

  target.scrollTop = 2000;

  target.classList.add("hidden");

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      removeHiddenAndScheduleTest(t);

    });

  });

}, "Scroll offset is restored when content-visibility hidden is removed");

</script>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html

<!DOCTYPE html>

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<link rel="help" href="https://crbug.com/1143620">

<style>

input, select, textarea {

  content-visibility: auto;

}

</style>

<input type="button">

<input type="checkbox">

<input type="color">

<input type="date">

<input type="datetime">

<input type="datetime-local">

<input type="email">

<input type="file">

<input type="hidden">

<input type="image">

<input type="month">

<input type="number">

<input type="password">

<input type="radio">

<input type="range">

<input type="reset">

<input type="search">

<input type="submit">

<input type="tel">

<input type="text">

<input type="time">

<input type="url">

<input type="week">

<select><option>Option1</option></select>

<select multiple><option>Option1</option></select>

<textarea></textarea>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance-expected.txt

FAIL Property content-visibility has initial value visible assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false

FAIL Property content-visibility does not inherit assert_true: expected true got false

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Content Visibility: content-visibility inheritance</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility does not inherit">

<meta name="assert" content="content-visibility has initial value 'visible'">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/parsing-testcommon.js"></script>

<script src="/css/support/inheritance-testcommon.js"></script>

</head>

<body>

<div id="container">

<div id="target"></div>

</div>

<script>

assert_not_inherited("content-visibility", "visible", "auto");

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed-expected.txt

FAIL Property content-visibility value 'visible' assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false

FAIL Property content-visibility value 'auto' assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false

FAIL Property content-visibility value 'hidden' assert_true: content-visibility doesn't seem to be supported in the computed style expected true got false

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Content Visibility: content-visibility with computed values</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/computed-testcommon.js"></script>

</head>

<body>

<div id=target></div>

<div id=scratch></div>

<script>

test_computed_value("content-visibility", "visible");

test_computed_value("content-visibility", "auto");

test_computed_value("content-visibility", "hidden");

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid-expected.txt

PASS e.style['content-visibility'] = "visible auto" should not set the property value

PASS e.style['content-visibility'] = "foo-bar" should not set the property value

PASS e.style['content-visibility'] = "foo bar baz" should not set the property value

PASS e.style['content-visibility'] = "hidden visible" should not set the property value

PASS e.style['content-visibility'] = "invisible invisible invisible" should not set the property value

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Content Visibility: content-visibility with invalid values</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/parsing-testcommon.js"></script>

</head>

<body>

<script>

test_invalid_value("content-visibility", "visible auto");

test_invalid_value("content-visibility", "foo-bar");

test_invalid_value("content-visibility", "foo bar baz");

test_invalid_value("content-visibility", "hidden visible");

test_invalid_value("content-visibility", "invisible invisible invisible");

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid-expected.txt

FAIL e.style['content-visibility'] = "visible" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['content-visibility'] = "auto" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['content-visibility'] = "hidden" should set the property value assert_not_equals: property should be set got disallowed value ""

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Content Visibility Test: content-visibility with valid values</title>

<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">

<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">

<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/parsing-testcommon.js"></script>

</head>

<body>

<script>

test_valid_value("content-visibility", "visible");

test_valid_value("content-visibility", "auto");

test_valid_value("content-visibility", "hidden");

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/w3c-import.log

The tests in this directory were imported from the W3C repository.

Do NOT modify these tests directly in WebKit.

Instead, create a pull request on the WPT github:

	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------

Properties requiring vendor prefixes:

None

Property values requiring vendor prefixes:

None

------------------------------------------------------------------------

List of files:

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/circles.svg

<?xml version="1.0" encoding="iso-8859-1" ?>

<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">

<rect x="0" y="0" width="500" height="300" fill="#fff" />

<g stroke-width="10" transform="translate(-30)">

    <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>

    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>

    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>

    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>

    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>

</g>

<g stroke-width="10" transform="translate(170)">

    <circle cx="80" cy="50" r="35" fill="#085" stroke="none"/>

    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="120" r="35" fill="#005" stroke="none"/>

    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="190" r="35" fill="#689" stroke="none"/>

    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="260" r="35" fill="#609" stroke="none"/>

    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>

</g>

<g stroke-width="10" transform="translate(370)">

    <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>

    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="120" r="35" fill="#084" stroke="none"/>

    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>

    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>

    <circle cx="80" cy="260" r="35" fill="#088" stroke="none"/>

    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>

</g>

</svg>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/dice.png

index 0000000000..f18b814176

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/dice.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/frame.html

<!doctype HTML>

<style>

div {

  background: lightgreen;

}

</style>

<div>dolor sit amet</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html

<!doctype html>

<title>Text fragment navigation helper.</title>

<script src="/scroll-to-text-fragment/stash.js"></script>

<script>

function isInView(element) {

  let rect = element.getBoundingClientRect();

  return rect.top >= 0 && rect.top <= window.innerHeight

      && rect.left >= 0 && rect.left <= window.innerWidth;

}

function checkScroll() {

  let position = 'unknown';

  if (window.scrollY == 0)

    position = 'top';

  else if(isInView(document.getElementById("text")))

    position = 'text';

  else if(isInView(document.getElementById("text2")))

    position = 'text2';

  else if(isInView(document.getElementById("text3")))

    position = 'text3';

  const target = document.querySelector(":target");

  let results = {

    scrollPosition: position,

    href: window.location.href,

    target: target ? target.id : 'undefined'

  };

  let key = (new URL(document.location)).searchParams.get("key");

  stashResultsThenClose(key, results);

}

function doubleRafCheckScroll() {

  requestAnimationFrame(() => {

    requestAnimationFrame(() => {

      checkScroll();

    });

  });

}

</script>

<style>

.spacer {

  height: 10000px;

}

.auto {

  subtree-visibility: auto;

}

</style>

<body onload="doubleRafCheckScroll()">

<div class=spacer></div>

<div class=auto>

  <div id=text>hiddentext</div>

</div>

<div class=spacer></div>

<div id=text2and3ancestor>

  <div class=auto>

    <div id=text2>start</div>

  </div>

  <div class=spacer></div>

  <div class=auto>

    <div id=text3>end</div>

  </div>

</div>

</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/w3c-import.log

The tests in this directory were imported from the W3C repository.

Do NOT modify these tests directly in WebKit.

Instead, create a pull request on the WPT github:

	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------

Properties requiring vendor prefixes:

None

Property values requiring vendor prefixes:

None

------------------------------------------------------------------------

List of files:

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/circles.svg

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/dice.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/frame.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/w3c-import.log

The tests in this directory were imported from the W3C repository.

Do NOT modify these tests directly in WebKit.

Instead, create a pull request on the WPT github:

	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------

Properties requiring vendor prefixes:

None

Property values requiring vendor prefixes:

None

------------------------------------------------------------------------

List of files:

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-006.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-007.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-008.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-009.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-010.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-012.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-013.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-014.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-015.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-016.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-017.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-018.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-020.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-021.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-022.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-023.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-024.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-025.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-026.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-027.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-028.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-029.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-030.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-031.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-032.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-034.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-035.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-036.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-037.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-038.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-039.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-040.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-041.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-042.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-043.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-044.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-045.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-046.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-047.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-049.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-050.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-051.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-052.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-053.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-054.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-055.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-056.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-057.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-058.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-059.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-060.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-061.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-062.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-063.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-064.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-065.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-066.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-067.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-068.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-069.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-070.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-071.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-072.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-073.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-074.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-075.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-076.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-077.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-078.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-079.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-080.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-081.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/content-visibility/inheritance.html

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>

<div>1 1.2</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and counter-increment</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="counter-increment is scoped to the subtree and creates a new counter at the root of the subtree">

  <link rel="match" href="reference/counter-scoping-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

div {

  contain: style;

   counter-increment: n;

}

div::before, div::after {

  content: counters(n, '.') " ";

}

div::after {

  counter-increment: n 2;

}

</style>

<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>

<div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>

<div>1 1.2</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and counter-set</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="counter-set is scoped to the subtree and creates a new counter at the root of the subtree">

  <link rel="match" href="reference/counter-scoping-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

  <link rel=help href="https://drafts.csswg.org/css-lists-3/#propdef-counter-set">

<style>

div {

  contain: style;

  counter-set: n 1;

}

div::before, div::after {

  content: counters(n, '.') " ";

}

div::after {

  counter-set: n 2;

}

</style>

<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>

<div></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if the text below is "1 2" (not including the quotation marks).<p>

<div>1 2</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and subtree root</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="When considering the effects of the scoped property on elements inside the subtree, the element at the base of the subtree is treated as if it was the root of the document">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

  <link rel="match" href="reference/counter-scoping-003-ref.html">

<style>

div {

  contain: style;

  counter-increment: c 123;

}

span {

  counter-increment: c 1;

}

span::before {

  content: counter(c);

}

</style>

<p>Test passes if the text below is "1 2" (not including the quotation marks).<p>

<div>

  <span></span>

  <span></span>

</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance-expected.txt

FAIL Property contain has initial value none assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain does not inherit assert_true: expected true got false

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Inheritance of CSS contain property</title>

<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">

<meta name="assert" content="Property 'contain' does not inherit.">

<meta name="assert" content="Property 'contain' has initial value 'none'.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/inheritance-testcommon.js"></script>

</head>

<body>

<div id="container">

<div id="target"></div>

</div>

<script>

assert_not_inherited('contain', 'none', 'paint');

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed-expected.txt

FAIL Property contain value 'none' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'strict' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'content' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'size' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'layout' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'style' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'size layout' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'style paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'layout style paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'size layout style paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'size layout paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false

FAIL Property contain value 'layout paint' assert_true: contain doesn't seem to be supported in the computed style expected true got false

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Containment Module Level 1: getComputedStyle().contain</title>

<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">

<meta name="assert" content="contain computed value is as specified.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/computed-testcommon.js"></script>

</head>

<body>

<div id="target"></div>

<script>

test_computed_value("contain", "none");

test_computed_value("contain", "strict");

test_computed_value("contain", "content");

test_computed_value("contain", "size");

test_computed_value("contain", "layout");

test_computed_value("contain", "style");

test_computed_value("contain", "paint");

test_computed_value("contain", "size layout");

test_computed_value("contain", "style paint");

test_computed_value("contain", "layout style paint");

test_computed_value("contain", "size layout style paint");

test_computed_value("contain", "size layout paint", "strict");

test_computed_value("contain", "layout paint", "content");

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid-expected.txt

PASS e.style['contain'] = "auto" should not set the property value

PASS e.style['contain'] = "strict content" should not set the property value

PASS e.style['contain'] = "size layout size" should not set the property value

PASS e.style['contain'] = "paint content" should not set the property value

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Containment Module Level 1: parsing contain with invalid values</title>

<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">

<meta name="assert" content="contain supports only the grammar 'none | strict | content | [ size || layout || style || paint ]'.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/parsing-testcommon.js"></script>

</head>

<body>

<script>

test_invalid_value("contain", "auto");

test_invalid_value("contain", "strict content");

test_invalid_value("contain", "size layout size");

test_invalid_value("contain", "paint content");

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid-expected.txt

FAIL e.style['contain'] = "none" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "strict" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "content" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "size" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "layout" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "style" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "paint" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "layout size" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "paint style" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "layout style paint" should set the property value assert_not_equals: property should be set got disallowed value ""

FAIL e.style['contain'] = "layout paint style size" should set the property value assert_not_equals: property should be set got disallowed value ""

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid.html

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Containment Module Level 1: parsing contain with valid values</title>

<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">

<meta name="assert" content="contain supports the full grammar 'none | strict | content | [ size || layout || style || paint ]'.">

<meta name="assert" content="contain serializes in canonical order.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/parsing-testcommon.js"></script>

</head>

<body>

<script>

test_valid_value("contain", "none");

test_valid_value("contain", "strict");

test_valid_value("contain", "content");

// [ size || layout || style || paint ]

test_valid_value("contain", "size");

test_valid_value("contain", "layout");

test_valid_value("contain", "style");

test_valid_value("contain", "paint");

test_valid_value("contain", "layout size", "size layout");

test_valid_value("contain", "paint style", "style paint");

test_valid_value("contain", "layout style paint");

test_valid_value("contain", "layout paint style size", "size layout style paint");

</script>

</body>

</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/w3c-import.log

The tests in this directory were imported from the W3C repository.

Do NOT modify these tests directly in WebKit.

Instead, create a pull request on the WPT github:

	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------

Properties requiring vendor prefixes:

None

Property values requiring vendor prefixes:

None

------------------------------------------------------------------------

List of files:

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-computed.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-invalid.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/parsing/contain-valid.html

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if the text below is "A1Z" (not including the quotation marks).<p>

<div>A1Z</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and open-quote</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment cause the open-quote value of the content property are scoped to the element's subtree">

  <link rel="match" href="reference/quote-scoping-001-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

div {

  quotes: "A" "Z" "1" "9";

}

div::before, span::before {

  content: open-quote;

}

div::after {

  content: close-quote;

}

span {

  contain: style;

}

</style>

<p>Test passes if the text below is "A1Z" (not including the quotation marks).<p>

<div><span></span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if the text below is "A9Z" (not including the quotation marks).<p>

<div>A9Z</span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and close-quote</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment cause the close-quote value of the content property are scoped to the element's subtree">

  <link rel="match" href="reference/quote-scoping-002-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

div {

  quotes: "A" "Z" "1" "9";

}

div::before {

  content: open-quote;

}

div::after, span::after {

  content: close-quote;

}

span {

  contain: style;

}

</style>

<p>Test passes if the text below is "AZZ" (not including the quotation marks).<p>

<div><span></span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>

<div>AZ</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and no-open-quote</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment cause the no-open-quote value of the content property are scoped to the element's subtree">

  <link rel="match" href="reference/quote-scoping-003-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

div {

  quotes: "A" "Z" "1" "9";

}

div::before{

  content: open-quote;

}

span::before {

  content: no-open-quote;

}

div::after {

  content: close-quote;

}

span {

  contain: style;

}

</style>

<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>

<div><span></span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004-expected.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test reference</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>

<div>AZ</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004.html

<!doctype html>

<html lang=en>

  <meta charset=utf-8>

  <title>CSS-contain test: style containment and no-close-quote</title>

  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">

  <meta name=flags content="">

  <meta name=assert content="style containment cause the no-close-quote value of the content property are scoped to the element's subtree">

  <link rel="match" href="reference/quote-scoping-003-ref.html">

  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">

<style>

div {

  quotes: "A" "Z" "1" "9";

}

div::before{

  content: open-quote;

}

span::after {

  content: no-close-quote;

}

div::after {

  content: close-quote;

}

span {

  contain: style;

}

</style>

<p>Test passes if the text below is "AZ" (not including the quotation marks).<p>

<div><span></span></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/60x60-green.png

index 0000000000..b3c8cf3eb4

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/60x60-green.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue-100x100.png

index 0000000000..3b72d5ce53

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue-100x100.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy25h.png

index 0000000000..35d23ec234

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy25h.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy46h.png

index 0000000000..303d040454

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy46h.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/pattern-gg-gr-100x100.png

index 0000000000..fd9b7e1ef2

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/pattern-gg-gr-100x100.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-blue.png

index 0000000000..bf2759634d

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-blue.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-orange.png

index 0000000000..d3cd498b52

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-orange.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-red.png

index 0000000000..1caf25c992

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-red.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-yellow.png

index 0000000000..1591aa0e2e

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-yellow.png differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/w3c-import.log

The tests in this directory were imported from the W3C repository.

Do NOT modify these tests directly in WebKit.

Instead, create a pull request on the WPT github:

	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------

Properties requiring vendor prefixes:

None

Property values requiring vendor prefixes:

None

------------------------------------------------------------------------

List of files:

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/60x60-green.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue-100x100.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy25h.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/blue50wBy46h.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/pattern-gg-gr-100x100.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-blue.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-orange.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-red.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/swatch-yellow.png

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/white.webm

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/white.webm

index 0000000000..bbacad7ffd

Binary files /dev/null and b/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/support/white.webm differ

LayoutTests/imported/w3c/web-platform-tests/css/css-contain/w3c-import.log

The tests in this directory were imported from the W3C repository.

Do NOT modify these tests directly in WebKit.

Instead, create a pull request on the WPT github:

	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------

Properties requiring vendor prefixes:

None

Property values requiring vendor prefixes:

ruby-text

------------------------------------------------------------------------

List of files:

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/META.yml

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-animation-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-chrome-thcrash-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-content-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-crash.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-flexbox-outline.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-006.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-007.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-009.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-010.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-012.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-013.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-014.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-016.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-017.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-018.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-baseline-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-breaks-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-button-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-cell-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-absolute-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-containing-block-fixed-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-flexbox-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-float-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-formatting-context-margin-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-grid-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ifc-022.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-ib-split-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-independent-formatting-context-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-013.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-014.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-015.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-016.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-017.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-018.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-019.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-ink-overflow-020.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-overflow-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-size-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-stacking-context-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-layout-suppress-baseline-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-006.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-007.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-008.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-009.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-010.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-012.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-014.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-015.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-016.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-017.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-018.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-019.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-020.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-021.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-022.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-023.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-024.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-025.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-047.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-048.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-baseline-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-cell-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-006.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-012.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-013.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-014.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-015.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-016.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-017.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-018.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-clip-019.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-absolute-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-containing-block-fixed-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-float-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-formatting-context-margin-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ifc-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ib-split-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001a.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-internal-table-001b.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-containing-block-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-ignored-cases-ruby-stacking-and-clipping-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-independent-formatting-context-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-size-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001a.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-stacking-context-001b.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-paint-table-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-006.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-007.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-008.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-009.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-010.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-012b.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-013.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-021.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-023.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-025.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-027.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-041.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-042.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-051.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-052.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-056.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-061.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-062.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-063.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-064.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-baseline-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-block-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-borders.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-breaks-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-button-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-fieldset-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flex-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-flexbox-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-block-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-inline-flex-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-monolithic-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-multicol-as-flex-item.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003a.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003b.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-003c.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-006.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007-expected.xht

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-replaced-007.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-scrollbars-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-select-elem-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-table-caption-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-strict-011.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-baseline-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-breaks-005.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-style-counters-004.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-subgrid-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/counter-scoping-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/inheritance.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-001.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-002.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-003.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004-expected.html

/LayoutTests/imported/w3c/web-platform-tests/css/css-contain/quote-scoping-004.html

LayoutTests/tests-options.json

    "imported/w3c/web-platform-tests/css/css-color/color-resolving-hwb.html": [

        "slow"

    ],

    "imported/w3c/web-platform-tests/css/css-contain/content-visibility/content-visibility-048.html": [

        "slow"

    ],

    "imported/w3c/web-platform-tests/css/css-fonts/font-display/font-display.html": [

        "slow"

    ],