Bug 1611724 - [css-grid] Add NS_FRAME_CONTAINS_RELATIVE_BSIZE to grid items with content first baseline alignment to ensure lines are marked dirty in a IsBResize reflow. r=dholbert
authorMats Palmgren <mats@mozilla.com>
Mon, 27 Jan 2020 19:45:13 +0000
changeset 511980 bae3742d10e20e3f54850a1b50838f14e3f11bd0
parent 511979 97abb715caf9c51f31499659deaa27d3ad9fa853
child 511981 56f4381060761030a59975eb1af5ba99c6d87e27
push id106090
push usermpalmgren@mozilla.com
push dateMon, 27 Jan 2020 19:45:51 +0000
treeherderautoland@bae3742d10e2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1611724
milestone74.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 1611724 - [css-grid] Add NS_FRAME_CONTAINS_RELATIVE_BSIZE to grid items with content first baseline alignment to ensure lines are marked dirty in a IsBResize reflow. r=dholbert To make this condition true to be clear: https://searchfox.org/mozilla-central/rev/aa684c0c76136be80af4c6e429bce81dea55c429/layout/generic/nsBlockFrame.cpp#2478-2479 Differential Revision: https://phabricator.services.mozilla.com/D61100
layout/generic/ReflowInput.cpp
layout/reftests/css-grid/grid-item-content-baseline-003-ref.html
layout/reftests/css-grid/grid-item-content-baseline-003.html
layout/reftests/css-grid/reftest.list
--- a/layout/generic/ReflowInput.cpp
+++ b/layout/generic/ReflowInput.cpp
@@ -2582,16 +2582,21 @@ void SizeComputationInput::InitOffsets(W
       if (val > 0) {
         side = MakeLogicalSide(aAxis, eLogicalEdgeStart);
       } else {
         side = MakeLogicalSide(aAxis, eLogicalEdgeEnd);
         val = -val;
       }
       mComputedPadding.Side(wm.PhysicalSide(side)) += val;
       needPaddingProp = true;
+      if (aAxis == eLogicalAxisBlock && val > 0) {
+        // We have a baseline-adjusted block-axis start padding, so
+        // we need this to mark lines dirty when mIsBResize is true:
+        this->mFrame->AddStateBits(NS_FRAME_CONTAINS_RELATIVE_BSIZE);
+      }
     }
   };
   if (!aFlags.mUseAutoBSize) {
     ApplyBaselinePadding(eLogicalAxisBlock, nsIFrame::BBaselinePadProperty());
   }
   if (!aFlags.mShrinkWrap) {
     ApplyBaselinePadding(eLogicalAxisInline, nsIFrame::IBaselinePadProperty());
   }
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-content-baseline-003-ref.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: content-box silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:32px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:16px;" class="fb">A</span><span class="fb">M<br>N</span><span style="padding-block-start:17px; height:49px;" class="fb s">X</span></div>
+<div class="grid hl"><span style="padding-block-start:16px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; height:49px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:4px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; width:62px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A</span><span style="padding-block-start:16px;" class="fb">M<br>N</span><span style="padding-block-start:20px; width:62px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:16px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; width:49px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:16px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:17px; width:49px;" class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:4px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:6px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:16px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:16px;" class="lb pbs">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:4px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:6px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:4px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:62px;" class="fb s vl">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:4px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:62px;" class="fb s vl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:16px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; height:49px;" class="fb s hl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A</span><span style="padding-block-start:4px;" class="fb hl">M<br>N</span><span style="padding-block-start:21px; height:49px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:16px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; height:49px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:16px;" class="fb hl pbe">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:17px; height:49px;" class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:16px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:13px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:4px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:4px;" class="lb hl pbs">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:4px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A</span><span style="padding-block-end:6px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:16px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; width:49px;" class="fb s vr">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:13px;" class="fb vr pbe">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; width:49px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="padding-block-start:16px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; width:49px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="padding-block-start:16px;" class="fb vr pbs">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:17px; width:49px;" class="fb s vr">X</span></div>
+<div class="grid vr"><span style="padding-block-start:4px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:62px;" class="fb s vl">X</span></div>
+<div class="grid vr"><span style="padding-block-start:1px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:62px;" class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:4px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:4px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A</span><span style="padding-block-end:1px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:16px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:16px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-grid/grid-item-content-baseline-003.html
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="support/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font-size:16px; font-family: Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: content-box silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:32px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid hl"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c vl"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr pbs">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vr"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid vr"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
--- a/layout/reftests/css-grid/reftest.list
+++ b/layout/reftests/css-grid/reftest.list
@@ -129,16 +129,17 @@ fails-if(Android) == grid-item-table-str
 == grid-item-table-stretch-004.html grid-item-table-stretch-004-ref.html
 == grid-item-fieldset-stretch-001.html grid-item-fieldset-stretch-001-ref.html
 skip-if(Android) == grid-item-video-stretch-001.html grid-item-video-stretch-001-ref.html # Huh, Android doesn't have webm support?
 skip-if(Android) == grid-item-video-stretch-002.html grid-item-video-stretch-002-ref.html # Huh, Android doesn't have webm support?
 == grid-item-input-stretch-001.html grid-item-input-stretch-001-ref.html
 == grid-item-self-baseline-001.html grid-item-self-baseline-001-ref.html
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-001.html grid-item-content-baseline-001-ref.html # depends on exact Ahem baseline font metrics which seems to differ between platforms: bug 1310792
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-002.html grid-item-content-baseline-002-ref.html # ditto
+random-if(http.oscpu!="Linux\u0020i686") == grid-item-content-baseline-003.html grid-item-content-baseline-003-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-001.html grid-item-mixed-baseline-001-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-002.html grid-item-mixed-baseline-002-ref.html # ditto
 random-if(http.oscpu!="Linux\u0020i686") == grid-item-mixed-baseline-003.html grid-item-mixed-baseline-003-ref.html # ditto
 skip-if(!gtkWidget) skip-if(verify) == grid-item-mixed-baseline-004.html grid-item-mixed-baseline-004-ref.html # ditto.
 == grid-align-content-001.html grid-align-content-001-ref.html
 == grid-justify-content-001.html grid-justify-content-001-ref.html
 == grid-justify-content-002.html grid-justify-content-002-ref.html
 == grid-justify-content-003.html grid-justify-content-003-ref.html