Bug 1588966 - Add a wpt reftest of breaking a nested column container. r=emilio
authorTing-Yu Lin <tlin@mozilla.com>
Mon, 01 Feb 2021 04:30:06 +0000
changeset 565361 7d6747360f8019928087303bf598512397f24613
parent 565360 b86aaca8e7db99491f5642ecfa9e1f8b4632e3b5
child 565362 6e2dfe331b793e17405b8271434a30b2b0f7c489
push id38160
push userapavel@mozilla.com
push dateMon, 01 Feb 2021 21:36:20 +0000
treeherdermozilla-central@f6e71a0eec55 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1588966, 1677917
milestone87.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 1588966 - Add a wpt reftest of breaking a nested column container. r=emilio Bug 1677917 makes Firefox render this test the same as Google Chrome. Differential Revision: https://phabricator.services.mozilla.com/D103528
testing/web-platform/tests/css/css-multicol/multicol-breaking-006-ref.html
testing/web-platform/tests/css/css-multicol/multicol-breaking-006.html
copy from testing/web-platform/tests/css/css-multicol/multicol-breaking-001-ref.html
copy to testing/web-platform/tests/css/css-multicol/multicol-breaking-006-ref.html
--- a/testing/web-platform/tests/css/css-multicol/multicol-breaking-001-ref.html
+++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-006-ref.html
@@ -1,29 +1,29 @@
 <!DOCTYPE HTML>
 <title>CSS Test Reference: breaking of a multicolumn</title>
 <meta charset="utf-8">
 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
 <link rel="author" title="Mozilla" href="https://mozilla.org/">
 <style>
 
 .outer {
   height: 100px;
   width: 800px;
   background: rgba(0, 0, 255, 0.3);
   position: relative;
 }
 
 .blueborders {
   position: absolute;
   top: 0;
   left: 194px; /* 188px first column + (16px gap - 4px rule) / 2 */
   width: 200px; /* 188px second column + (16px gap - 4px rule) */
   height: 100px;
-  border-right: blue solid 4px;
   border-left: blue solid 4px;
 }
 
 .innerbg {
   height: 100px;
   width: 188px;
   background: rgba(255, 0, 255, 0.3);
   position: absolute;
@@ -42,16 +42,24 @@
   border-right: 2px solid fuchsia;
   padding-right: 7px;
 }
 
 .righthalf {
   padding-left: 7px;
 }
 
+.border-bottom {
+  height: 20px;
+  width: 188px;
+  background: green;
+  position: absolute;
+  top: 80px;
+}
+
 </style>
 
 <div class="outer">
   <div class="blueborders"></div>
   <div class="innerbg" style="left: 0"></div>
   <div class="inner lefthalf" style="left: 0">
     AAAAA<br>
     BBBBB<br>
@@ -73,10 +81,10 @@
     MMMMM<br>
     NNNNN
   </div>
   <div class="inner righthalf" style="left: 299px">
     OOOOO<br>
     PPPPP<br>
     QQQQQ<br>
   </div>
-  <div class="innerbg" style="left: 408px"></div>
+  <div class="border-bottom" style="left: 204px"></div>
 </div>
copy from testing/web-platform/tests/css/css-multicol/multicol-breaking-001.html
copy to testing/web-platform/tests/css/css-multicol/multicol-breaking-006.html
--- a/testing/web-platform/tests/css/css-multicol/multicol-breaking-001.html
+++ b/testing/web-platform/tests/css/css-multicol/multicol-breaking-006.html
@@ -1,17 +1,18 @@
 <!DOCTYPE HTML>
 <title>CSS Test: breaking of a multicolumn</title>
 <meta charset="utf-8">
 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
 <link rel="author" title="Mozilla" href="https://mozilla.org/">
 <link rel="help" href="https://drafts.csswg.org/css-multicol/#column-gaps-and-rules">
 <link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2309">
-<link rel="match" href="multicol-breaking-001-ref.html">
+<link rel="match" href="multicol-breaking-006-ref.html">
 <style>
 
 .outer {
   height: 100px;
   column-fill: auto;
   width: 800px;
   column-count: 4;
   column-rule: 4px solid blue;
@@ -20,22 +21,25 @@
 }
 
 .inner {
   column-count: 2;
   column-rule: 2px solid fuchsia;
   column-gap: 16px;
   background: rgba(255, 0, 255, 0.3);
   font: 16px/1.25 sans-serif;
+  border-bottom: 20px solid green;
 }
 
 </style>
 
+<!-- This test is adapted from multicol-breaking-001.html.
+     The inner column is changed to have "height:auto" and border-bottom. -->
 <div class="outer">
-  <div class="inner" style="height: 300px">
+  <div class="inner" style="height: auto">
     AAAAA<br>
     BBBBB<br>
     CCCCC<br>
     DDDDD<br>
     EEEEE<br>
     FFFFF<br>
     GGGGG<br>
     HHHHH<br>