Bug 1489038 [wpt PR 12868] - [css-contain] check the effects of containment on baseline alignment, a=testonly
authorFlorian Rivoal <git@florian.rivoal.net>
Mon, 10 Sep 2018 18:15:30 +0000
changeset 435990 858f51269eb26a23b18264f1e28f2647cc11a4ad
parent 435989 977177e75fabc38be4ee9cf463e86580cad246ff
child 435991 8dc164ae68307016777cb9d82ca2fd8aa5f3d6bd
push id34625
push userdvarga@mozilla.com
push dateThu, 13 Sep 2018 02:31:40 +0000
treeherdermozilla-central@51e9e9660b3e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1489038, 12868
milestone64.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 1489038 [wpt PR 12868] - [css-contain] check the effects of containment on baseline alignment, a=testonly Automatic update from web-platform-tests[css-contain] check the effects of containment on baseline alignment (#12868) * [css-contain] check the effects of containment on baseline alignment Tests for https://github.com/w3c/csswg-drafts/issues/2995 Only the layout and size variant are needed to catch know bugs (in chrome) at the time of implementation, and mistakes on paint or style would be surprising, but it doesn't hurt to be exhaustive. -- wpt-commits: 844cecae1ea48d364c5dfb723695354256c13666 wpt-pr: 12868
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-contain/contain-layout-baseline-001.html
testing/web-platform/tests/css/css-contain/contain-paint-baseline-001.html
testing/web-platform/tests/css/css-contain/contain-size-baseline-001.html
testing/web-platform/tests/css/css-contain/contain-style-baseline-001.html
testing/web-platform/tests/css/css-contain/reference/contain-baseline-ref.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -109658,16 +109658,28 @@
       [
        "/css/reference/nothing.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-contain/contain-layout-baseline-001.html": [
+    [
+     "/css/css-contain/contain-layout-baseline-001.html",
+     [
+      [
+       "/css/reference/ref-filled-green-100px-square.xht",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-contain/contain-layout-breaks-001.html": [
     [
      "/css/css-contain/contain-layout-breaks-001.html",
      [
       [
        "/css/css-contain/reference/contain-style-breaks-004-ref.html",
        "=="
       ]
@@ -110138,16 +110150,28 @@
       [
        "/css/css-contain/reference/ref-if-there-is-no-red.xht",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-contain/contain-paint-baseline-001.html": [
+    [
+     "/css/css-contain/contain-paint-baseline-001.html",
+     [
+      [
+       "/css/css-contain/reference/contain-baseline-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-contain/contain-paint-cell-001.html": [
     [
      "/css/css-contain/contain-paint-cell-001.html",
      [
       [
        "/css/css-contain/reference/contain-paint-047-ref.html",
        "=="
       ]
@@ -110594,16 +110618,28 @@
       [
        "/css/css-contain/reference/contain-size-062-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-contain/contain-size-baseline-001.html": [
+    [
+     "/css/css-contain/contain-size-baseline-001.html",
+     [
+      [
+       "/css/css-contain/reference/contain-baseline-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-contain/contain-size-borders.html": [
     [
      "/css/css-contain/contain-size-borders.html",
      [
       [
        "/css/reference/ref-filled-green-100px-square.xht",
        "=="
       ]
@@ -110738,16 +110774,28 @@
       [
        "/css/css-contain/reference/contain-layout-size-003-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-contain/contain-style-baseline-001.html": [
+    [
+     "/css/css-contain/contain-style-baseline-001.html",
+     [
+      [
+       "/css/css-contain/reference/contain-baseline-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-contain/contain-style-breaks-001.html": [
     [
      "/css/css-contain/contain-style-breaks-001.html",
      [
       [
        "/css/css-contain/reference/contain-style-breaks-001-ref.html",
        "=="
       ]
@@ -247430,16 +247478,21 @@
      {}
     ]
    ],
    "css/css-contain/contain-style-counters-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-contain/reference/contain-baseline-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-contain/reference/contain-layout-breaks-002-ref.html": [
     [
      {}
     ]
    ],
    "css/css-contain/reference/contain-layout-cell-001-ref.html": [
     [
      {}
@@ -528034,16 +528087,20 @@
   "css/css-contain/contain-layout-017.html": [
    "c8118ad974844cd807e0dfbcc07a9a06469a308c",
    "reftest"
   ],
   "css/css-contain/contain-layout-018.html": [
    "5d7ebc0195cbbb7bc303784ab05296885c323f40",
    "reftest"
   ],
+  "css/css-contain/contain-layout-baseline-001.html": [
+   "ed2471a62614bf961cf2cd9441256ac02d3d6f6b",
+   "reftest"
+  ],
   "css/css-contain/contain-layout-breaks-001.html": [
    "a85cf2c6c8e00f1d21fa5a63da81eff8148f3d71",
    "reftest"
   ],
   "css/css-contain/contain-layout-breaks-002.html": [
    "fadb3c41c5363742eb88bdf803eac7cdbf5e7a8f",
    "reftest"
   ],
@@ -528194,16 +528251,20 @@
   "css/css-contain/contain-paint-047.html": [
    "e4a0b28457c752232f4314175ffdf1840f7e336a",
    "reftest"
   ],
   "css/css-contain/contain-paint-048.html": [
    "e48fcb64a4acbb8683730c58577ba530487a5ad9",
    "reftest"
   ],
+  "css/css-contain/contain-paint-baseline-001.html": [
+   "3f84a3003a2a991a745198e2ad97938754462ef7",
+   "reftest"
+  ],
   "css/css-contain/contain-paint-cell-001.html": [
    "d66a16944ecadca57a585a4514024b198c19478f",
    "reftest"
   ],
   "css/css-contain/contain-paint-cell-002.html": [
    "e486aa2c576a4412ba0ac553dc074f6151ec217b",
    "reftest"
   ],
@@ -528346,16 +528407,20 @@
   "css/css-contain/contain-size-061.html": [
    "2af24fc24be02525b2082cd87e4f07d8be995a5b",
    "reftest"
   ],
   "css/css-contain/contain-size-062.html": [
    "60cb194242894b540aaa50c6990e7cbcb491e27e",
    "reftest"
   ],
+  "css/css-contain/contain-size-baseline-001.html": [
+   "0ffed1b3b6a08831792b0a5ac40d1340c142c48d",
+   "reftest"
+  ],
   "css/css-contain/contain-size-borders.html": [
    "16b5b06295fcc0b44944b1b92afa3ee42271b68f",
    "reftest"
   ],
   "css/css-contain/contain-size-breaks-001.html": [
    "453d56073ca12f8be339dbd5511225c5a29f9f6f",
    "reftest"
   ],
@@ -528394,16 +528459,20 @@
   "css/css-contain/contain-strict-002.html": [
    "369275e1d91a4638975f1241ca624a7dc88754d9",
    "reftest"
   ],
   "css/css-contain/contain-strict-003.html": [
    "792710cd87d8ee0813838dd39847f9dd2db2e2a9",
    "reftest"
   ],
+  "css/css-contain/contain-style-baseline-001.html": [
+   "f05d20982833077d53ecad3340065aee7e0ca8cd",
+   "reftest"
+  ],
   "css/css-contain/contain-style-breaks-001.html": [
    "9e5c27a075eddb80dfd9305abcba50aeefec5088",
    "reftest"
   ],
   "css/css-contain/contain-style-breaks-002.html": [
    "1b089c84a2d862d36d554e06757391dd33a75a78",
    "reftest"
   ],
@@ -528462,16 +528531,20 @@
   "css/css-contain/quote-scoping-003.html": [
    "2a909511c3451c98bcdd059d506279923e6ce709",
    "reftest"
   ],
   "css/css-contain/quote-scoping-004.html": [
    "d86382be08532323baad174808181e338adbc932",
    "reftest"
   ],
+  "css/css-contain/reference/contain-baseline-ref.html": [
+   "1fdecb1c33149af52c48c105bce8ad91904bad44",
+   "support"
+  ],
   "css/css-contain/reference/contain-layout-breaks-002-ref.html": [
    "c68bee1d0aa4f9201fb6e48cc25199f373128ca8",
    "support"
   ],
   "css/css-contain/reference/contain-layout-cell-001-ref.html": [
    "093dd363392d37b0f67f8409c6acc0c06e00d7cd",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-001.html
@@ -0,0 +1,31 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-paint-baseline-001.html
@@ -0,0 +1,24 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-size-baseline-001.html
@@ -0,0 +1,24 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-style-baseline-001.html
@@ -0,0 +1,24 @@
+<!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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/reference/contain-baseline-ref.html
@@ -0,0 +1,18 @@
+<!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>