Bug 1464197 [wpt PR 11147] - [css-contain] Disable paint containment in non-atomic inlines, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Wed, 06 Jun 2018 14:56:47 +0000
changeset 422157 689157510a21a152f16cc28ef7b719280a829d21
parent 422156 dbef1c84ac2b26da637cfa538507e957508cc13e
child 422158 32596bd377c64faa9b90fbf47a40c0409de8822a
push id34122
push userebalazs@mozilla.com
push dateMon, 11 Jun 2018 09:37:00 +0000
treeherdermozilla-central@9941eb8c3b29 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1464197, 11147, 843329, 1071794, 561832
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1464197 [wpt PR 11147] - [css-contain] Disable paint containment in non-atomic inlines, a=testonly Automatic update from web-platform-tests[css-contain] Disable paint containment in non-atomic inlines Text from the spec (https://drafts.csswg.org/css-contain/#containment-paint): "... if the element's principal box is a non-atomic inline-level box, paint containment has no effect." The patch disables "contain: paint" in non-atomic inline-level boxes. For that a new method LayoutObject::ShouldApplyPaintContainment() is added, which is used instead of ComputeStyle::ContainsPaint() all around the code. It's worth to highlight the change in ComputedStyle::CanContainFixedPositionObjects() as it doesn't know if the element is inline or not, it cannot check if we're in paint containment anymore. Otherwise it'd make a containing block non-atomic inlines with "contain: paint", the ones in which we're disabling paint containment on this patch. More changes on that new method would be needed to fulfill the rest of requirements from the spec, as paint containment shouldn't apply to internal table and ruby elements for example. Also similar patches for other kind of containment like layout and size are going to be required. Regarding tests this patch makes us pass contain-paint-002.html. On top of that a few extra tests have been added. BUG=843329 TEST=external/wpt/css/css-contain/contain-paint-011.html TEST=external/wpt/css/css-contain/contain-paint-012.html TEST=external/wpt/css/css-contain/contain-paint-013.html Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_layout_ng;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Change-Id: I140fad061f5cda14e52451aa8f4bc70c9edede3e Reviewed-on: https://chromium-review.googlesource.com/1071794 Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Cr-Commit-Position: refs/heads/master@{#561832} -- wpt-commits: 57556a49d4a089f3b9daf8b2348865fba07df7fa wpt-pr: 11147
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-contain/contain-paint-011.html
testing/web-platform/tests/css/css-contain/contain-paint-012.html
testing/web-platform/tests/css/css-contain/contain-paint-013-ref.html
testing/web-platform/tests/css/css-contain/contain-paint-013.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -108854,16 +108854,52 @@
       [
        "/css/reference/ref-filled-green-100px-square.xht",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-contain/contain-paint-011.html": [
+    [
+     "/css/css-contain/contain-paint-011.html",
+     [
+      [
+       "/css/reference/ref-filled-green-100px-square.xht",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-contain/contain-paint-012.html": [
+    [
+     "/css/css-contain/contain-paint-012.html",
+     [
+      [
+       "/css/reference/ref-filled-green-100px-square.xht",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-contain/contain-paint-013.html": [
+    [
+     "/css/css-contain/contain-paint-013.html",
+     [
+      [
+       "/css/css-contain/contain-paint-013-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-contain/contain-size-001.html": [
     [
      "/css/css-contain/contain-size-001.html",
      [
       [
        "/css/css-contain/reference/contain-size-001-ref.html",
        "=="
       ]
@@ -239745,16 +239781,21 @@
      {}
     ]
    ],
    "css/css-contain/OWNERS": [
     [
      {}
     ]
    ],
+   "css/css-contain/contain-paint-013-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-contain/contain-style-counters-ref.html": [
     [
      {}
     ]
    ],
    "css/css-contain/reference/contain-layout-002-ref.html": [
     [
      {}
@@ -495089,16 +495130,32 @@
   "css/css-contain/contain-paint-009.html": [
    "b3a8ee7512f1f893b630453a8443edaed983f4c3",
    "reftest"
   ],
   "css/css-contain/contain-paint-010.html": [
    "e47f99a8fedb60f34ec7877686f478cbc002c6b4",
    "reftest"
   ],
+  "css/css-contain/contain-paint-011.html": [
+   "a0f12db8b805f8f880347ba4a38396489da72f7c",
+   "reftest"
+  ],
+  "css/css-contain/contain-paint-012.html": [
+   "6a0fe4f463f20f38b800aa4218814efe72c99f2e",
+   "reftest"
+  ],
+  "css/css-contain/contain-paint-013-ref.html": [
+   "c3d8d642f2b4b25df84170669222b61866ab3057",
+   "support"
+  ],
+  "css/css-contain/contain-paint-013.html": [
+   "a53186c648e33d9978c4abbd4bc7c4ed79c860c8",
+   "reftest"
+  ],
   "css/css-contain/contain-size-001.html": [
    "089c4fd7352f91a85d5d8f6bf8c5f261c868cd37",
    "reftest"
   ],
   "css/css-contain/contain-size-002.html": [
    "ea16d90e56729c1678b327412cd945a0dea6b762",
    "reftest"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-011.html
@@ -0,0 +1,38 @@
+<!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 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;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+#contain-paint {
+  contain: paint;
+  width: 50px;
+  height: 50px;
+}
+
+#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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-012.html
@@ -0,0 +1,38 @@
+<!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 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;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+#contain-paint {
+  contain: paint;
+  width: 50px;
+  height: 50px;
+}
+
+#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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-013-ref.html
@@ -0,0 +1,20 @@
+<!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 on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
+<div class="wrapper">
+  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
+</div>
+<div class="wrapper">
+  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
+</div>
+<div class="wrapper">
+  <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-013.html
@@ -0,0 +1,29 @@
+<!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="contain-paint-013-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 and inline blocks, but it doesn't apply to inline elements.">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</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>
+<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>
+<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>