Bug 1553548: [css-contain] Make table-wrapper-box inherit CSS "contain" from table box. r=TYLin
authorDaniel Holbert <dholbert@cs.stanford.edu>
Thu, 23 May 2019 16:52:28 +0000
changeset 475220 afb705ca89e170f53f0a64e1339e9b5e6d5f84a8
parent 475219 e95e6a0e38542135a67bad172386f5d3652a9410
child 475221 ae1b2b5ee05c54ecdb80876134eda2f4973640b6
push id36057
push useraciure@mozilla.com
push dateThu, 23 May 2019 21:52:03 +0000
treeherdermozilla-central@d551d37b9ad0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersTYLin
bugs1553548
milestone69.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 1553548: [css-contain] Make table-wrapper-box inherit CSS "contain" from table box. r=TYLin Differential Revision: https://phabricator.services.mozilla.com/D32179
layout/style/res/ua.css
testing/web-platform/tests/css/css-contain/contain-paint-table-001.html
testing/web-platform/tests/css/css-contain/contain-paint-table-002.html
--- a/layout/style/res/ua.css
+++ b/layout/style/res/ua.css
@@ -56,16 +56,17 @@
   align-self: inherit;
   justify-self: inherit;
   grid-column-start: inherit;
   grid-column-end: inherit;
   grid-row-start: inherit;
   grid-row-end: inherit;
   order: inherit;
   column-span: inherit; /* needed if <table> has "column-span:all" */
+  contain: inherit; /* needed if table has 'contain:layout' or 'paint' */
 }
 
 *|*::-moz-table-row {
   display: table-row;
 }
 
 /* The ::-moz-table-column pseudo-element is for extra columns at the end
    of a table. */
copy from testing/web-platform/tests/css/css-contain/contain-paint-cell-001.html
copy to testing/web-platform/tests/css/css-contain/contain-paint-table-001.html
--- a/testing/web-platform/tests/css/css-contain/contain-paint-cell-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-table-001.html
@@ -1,70 +1,42 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
-  <title>CSS Containment Test: 'contain: paint' applies to 'table-cell' elements</title>
+  <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 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 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;
-    }
-
-  div.column
-    {
-      display: table-column;
-    }
-
-  div#middle-column
-    {
-      width: 4ch;
-    }
-
-  div.row
-    {
-      display: table-row;
+      contain: paint;
     }
 
   div.cell
     {
-      background-color: white;
       display: table-cell;
+      color: green;
     }
-
-  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 class="cell">PASS<span>FAIL</span></div>
   </div>
copy from testing/web-platform/tests/css/css-contain/contain-paint-cell-001.html
copy to testing/web-platform/tests/css/css-contain/contain-paint-table-002.html
--- a/testing/web-platform/tests/css/css-contain/contain-paint-cell-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-table-002.html
@@ -1,70 +1,50 @@
 <!DOCTYPE html>
 
   <meta charset="UTF-8">
 
-  <title>CSS Containment Test: 'contain: paint' applies to 'table-cell' elements</title>
+  <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 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 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.column
+  div.caption
     {
-      display: table-column;
-    }
-
-  div#middle-column
-    {
+      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;
     }
-
-  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 class="caption">
+      PASS<span>FAIL</span>
+    </div>
   </div>