Bug 1480325 [wpt PR 12270] - [css-contain] Apply different changes to improve tests, a=testonly
authorFlorian Rivoal <git@florian.rivoal.net>
Mon, 06 Aug 2018 17:13:54 +0000
changeset 430639 e15b8e9f7f54c525f20a62402b2a8251604e6b13
parent 430638 23e3c094a638ae29e60e593f851562727b64592d
child 430640 1f3d0f393d2e73996bb8f6dcd1ee07937daa3ac6
push id34410
push usertoros@mozilla.com
push dateThu, 09 Aug 2018 10:02:47 +0000
treeherdermozilla-central@f650c0df72f9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1480325, 12270
milestone63.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 1480325 [wpt PR 12270] - [css-contain] Apply different changes to improve tests, a=testonly Automatic update from web-platform-testsMerge pull request #12270 from mrego/css-contain-fixes [css-contain] Apply different changes to improve tests -- wpt-commits: 391abef11d9f9849d973360f9de82eaeac61153b wpt-pr: 12270
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-contain/contain-layout-001.html
testing/web-platform/tests/css/css-contain/contain-paint-001.html
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-size-breaks-001.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -516511,17 +516511,17 @@
    "f34245ec472aa11a4ce35b4d6551e43f8d588260",
    "testharness"
   ],
   "css/css-contain/META.yml": [
    "259c00b2a587c9aa2d07de97fb547b32f9772b92",
    "support"
   ],
   "css/css-contain/contain-layout-001.html": [
-   "c8895b9a6670852accf54ae6ac4f8581d4c031d5",
+   "85b959da2b9a151c13be3dc83485646341752915",
    "reftest"
   ],
   "css/css-contain/contain-layout-002.html": [
    "1ae149f1aaf9d22b4d4fbe8efd44c702d6501c39",
    "reftest"
   ],
   "css/css-contain/contain-layout-003.html": [
    "1b063f1965bb7561fdf6acec946db483bb6eb85c",
@@ -516579,17 +516579,17 @@
    "a85cf2c6c8e00f1d21fa5a63da81eff8148f3d71",
    "reftest"
   ],
   "css/css-contain/contain-layout-breaks-002.html": [
    "4398387f26ca16a7527167ec71e802aa48228da7",
    "reftest"
   ],
   "css/css-contain/contain-paint-001.html": [
-   "37609e616dec256155b3c569d4474058631989bf",
+   "ca2eb6e6f98fd8aec3fbd3b252658e7e966f03a2",
    "reftest"
   ],
   "css/css-contain/contain-paint-002.html": [
    "6f495f56173078d323fd2f6ba47bc92ea32e1aab",
    "reftest"
   ],
   "css/css-contain/contain-paint-003.html": [
    "ae9238d35bff745220ccca8244fe28afde00fee9",
@@ -516619,21 +516619,21 @@
    "34ca8d72b5994a1a47f3dc95bd8b738e913eb997",
    "reftest"
   ],
   "css/css-contain/contain-paint-010.html": [
    "a05ce58f8bc47130c8b32f92950cec36b6c7ef62",
    "reftest"
   ],
   "css/css-contain/contain-paint-011.html": [
-   "fdb2d2d2c8c9898e7469d69b007e910ff69f7e8c",
+   "d18a667025f43803a3285431fc07315d61a37265",
    "reftest"
   ],
   "css/css-contain/contain-paint-012.html": [
-   "f3c635191467986a5d66c1cc1c33ac65d64924f3",
+   "471726a99c659ab0d6a7870ee2519994051b425f",
    "reftest"
   ],
   "css/css-contain/contain-paint-013.html": [
    "3b6b3a76dc63028e1ae22b81c4ba06112c5aceb7",
    "reftest"
   ],
   "css/css-contain/contain-paint-014.html": [
    "ee6bc7876f6f0a1f3653c62819fd16553b1610b7",
@@ -516711,17 +516711,17 @@
    "4d1cbc403bd48b21f8d657d4adc7a50bffbb618c",
    "reftest"
   ],
   "css/css-contain/contain-size-borders.html": [
    "16b5b06295fcc0b44944b1b92afa3ee42271b68f",
    "reftest"
   ],
   "css/css-contain/contain-size-breaks-001.html": [
-   "d8538f65d876438ae0851d296f5a086367905e51",
+   "453d56073ca12f8be339dbd5511225c5a29f9f6f",
    "reftest"
   ],
   "css/css-contain/contain-size-button-001.html": [
    "1e4965e9daf380aec19cf43902c409ad6b457370",
    "reftest"
   ],
   "css/css-contain/contain-size-flexbox-001.html": [
    "31e82f5d24c4aa673291a2ce25c660cf10977e28",
--- a/testing/web-platform/tests/css/css-contain/contain-layout-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-001.html
@@ -4,16 +4,20 @@
   <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>
-span {
+#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>PA</span>SS</div>
+<div><span id="pa">PA</span><span id="ss">SS</span></div>
--- a/testing/web-platform/tests/css/css-contain/contain-paint-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-001.html
@@ -10,32 +10,30 @@
 
 <style>
 div {
   width: 100px;
   height: 100px;
   background: blue;
   padding: 50px;
   border-radius: 100px;
-  border: white 50px solid;
   contain: paint;
 }
 div::before {
  content:"";
  display: block;
  background: green;
  width: 100px;
  height: 100px;
 }
 div::after {
   content:"";
   display: block;
   background: red;
   width: 50px;
   height: 50px;
-  float: left;
-  margin-top: 36px;
-  margin-left: -86px;
+  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>
--- a/testing/web-platform/tests/css/css-contain/contain-paint-011.html
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-011.html
@@ -1,29 +1,25 @@
 <!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.">
+<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;
-  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%;
--- a/testing/web-platform/tests/css/css-contain/contain-paint-012.html
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-012.html
@@ -1,29 +1,25 @@
 <!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.">
+<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;
-  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%;
--- a/testing/web-platform/tests/css/css-contain/contain-size-breaks-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-size-breaks-001.html
@@ -1,48 +1,64 @@
 <!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-style">
+  <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">
 
 <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 {
   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 A A A A</div>
+<div>A B C D E</div>
 </article>
 
 <!--
-If the element is monolythic, it may:
-* overflow and be a 1x5 em rectangle
-* be sliced and be 2 contigious 1x2.5 em rectangles, appearing as a single
-  2x2.5 em rectangle.
+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 As in the first column, 2 in
-the second column, and the fith will be overflowing the div, either into the
-thrid column, or into the bottom of the second one.
+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
 -->