Bug 233252

Summary: Updating grid gap value does not recalculate styles
Product: WebKit Reporter: Brad Frost <bfrost>
Component: Layout and RenderingAssignee: zalan <zalan>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, changseok, esprehn+autocc, ews-watchlist, glenn, kondapallykalyan, pdr, rbuis, shuangqiu2, simon.fraser, webkit-bug-importer, webkit-layout-noreply, zalan, zsun
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Test reduction
none
Patch
simon.fraser: review+, ews-feeder: commit-queue-
[fast-cq]Patch none

Description Brad Frost 2021-11-17 06:32:13 PST
When updating the grid-gap (or gap, column-gap, row-gap, etc.) by editing the style attribute of the element, the styles are not recalculated and element does not change.
This also happens when editing the grid-gap value in Safari Inspector.

In other browsers, the styles are recalculated and the layout is updated.

Here is an example showing the behavior: https://jsbin.com/guhufuk/1/edit?css,js,output
Comment 1 Radar WebKit Bug Importer 2021-11-24 06:33:21 PST
<rdar://problem/85727334>
Comment 2 shuangqiu2 2022-01-14 00:33:59 PST
In case the example above doesn't load, this is another repro: https://codesandbox.io/s/eager-lederberg-vx8pg?file=/src/App.js
Comment 3 Simon Fraser (smfr) 2022-02-02 11:51:34 PST
cc'd the Igalia grid layout experts.
Comment 4 zalan 2022-02-07 10:06:01 PST
Created attachment 451120 [details]
Test reduction
Comment 5 zalan 2022-02-07 10:18:39 PST
This looks like a styleAdjuster bug. We get the setStyle call right after the gap value change but we compute the diff to be Equal -> no layout.
If I force the diff to Layout, the jsbin example starts working.
Comment 6 zalan 2022-02-07 10:40:14 PST
This affects flex gaps too.
Comment 7 zalan 2022-02-07 10:44:51 PST
@@ -664,6 +664,9 @@ static bool rareNonInheritedDataChangeRequiresLayout(const StyleRareNonInherited
     if (first.flexibleBox != second.flexibleBox)
         return true;
 
+    if (first.columnGap != second.columnGap || first.rowGap != second.rowGap)
+        return true;
+
     if (first.order != second.order
         || first.alignContent != second.alignContent
         || first.alignItems != second.alignItems

fixes both grid and flex. patch is coming up.
Comment 8 zalan 2022-02-07 11:01:09 PST
Created attachment 451126 [details]
Patch
Comment 9 zalan 2022-02-07 11:09:08 PST
will fix the "!=" older compiler vs. auto generating now issue
Comment 10 zalan 2022-02-07 11:46:25 PST
Created attachment 451129 [details]
[fast-cq]Patch
Comment 11 EWS 2022-02-07 14:28:47 PST
Committed r289241 (246925@main): <https://commits.webkit.org/246925@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 451129 [details].
Comment 12 Brad Frost 2022-02-07 14:38:44 PST
Thank you all for addressing this! Looking forward to the release.
Comment 13 zalan 2022-02-07 14:53:34 PST
(In reply to Brad Frost from comment #12)
> Thank you all for addressing this! Looking forward to the release.
Thank you for filing it!