Bug 232417

Summary: Assertion in RenderGrid::computeAutoRepeatTracksCount() loading myshopify.com page
Product: WebKit Reporter: Simon Fraser (smfr) <simon.fraser>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, rbuis, simon.fraser, webkit-bug-importer, webkit-layout-noreply, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
New Assert Logs none

Description Simon Fraser (smfr) 2021-10-27 20:06:48 PDT 
When loading https://focal-theme-ivory.myshopify.com/ in debug, we hit an assertion:

  * frame #1: 0x00000001df8bc86b WebCore`WTFCrashWithInfo((null)=341, (null)="/Volumes/Data/Development/system/webkit/OpenSource/Source/WebCore/platform/Length.h", (null)="float WebCore::Length::value() const", (null)=395) at Assertions.h:732:5
    frame #2: 0x00000001e144b246 WebCore`WebCore::Length::value(this={ calc }) const at Length.h:341:5
    frame #3: 0x00000001e40932d6 WebCore`WebCore::RenderGrid::computeAutoRepeatTracksCount(this=0x00000001aec94be0, direction=ForColumns, availableSize= Has Value=true ) const at RenderGrid.cpp:511:63
    frame #4: 0x00000001e4091259 WebCore`WebCore::RenderGrid::placeItemsOnGrid(this=0x00000001aec94be0, algorithm=0x00000001aec94d60, availableLogicalWidth= Has Value=true ) const at RenderGrid.cpp:606:34
    frame #5: 0x00000001e4090b97 WebCore`WebCore::RenderGrid::layoutBlock(this=0x00000001aec94be0, relayoutChildren=false, (null)={ 0px (0) }) at RenderGrid.cpp:234:9
    frame #6: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001aec94be0) at RenderBlock.cpp:595:5
    frame #7: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001c5bcc7e0, child=0x00000001aec94be0, marginInfo=0x00007ff7baa7e958, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #8: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001c5bcc7e0, relayoutChildren=true, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #9: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001c5bcc7e0, relayoutChildren=true, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #10: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001c5bcc7e0) at RenderBlock.cpp:595:5
    frame #11: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001c5bcc6c0, child=0x00000001c5bcc7e0, marginInfo=0x00007ff7baa7ef38, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #12: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001c5bcc6c0, relayoutChildren=true, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #13: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001c5bcc6c0, relayoutChildren=true, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #14: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001c5bcc6c0) at RenderBlock.cpp:595:5
    frame #15: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001c5bcc360, child=0x00000001c5bcc6c0, marginInfo=0x00007ff7baa7f518, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #16: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001c5bcc360, relayoutChildren=true, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #17: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001c5bcc360, relayoutChildren=true, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #18: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001c5bcc360) at RenderBlock.cpp:595:5
    frame #19: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001c5bcc240, child=0x00000001c5bcc360, marginInfo=0x00007ff7baa7faf8, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #20: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001c5bcc240, relayoutChildren=true, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #21: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001c5bcc240, relayoutChildren=true, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #22: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001c5bcc240) at RenderBlock.cpp:595:5
    frame #23: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001c5bcc120, child=0x00000001c5bcc240, marginInfo=0x00007ff7baa800d8, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #24: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001c5bcc120, relayoutChildren=true, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #25: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001c5bcc120, relayoutChildren=true, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #26: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001c5bcc120) at RenderBlock.cpp:595:5
    frame #27: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001c4f37de0, child=0x00000001c5bcc120, marginInfo=0x00007ff7baa806b8, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #28: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001c4f37de0, relayoutChildren=true, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #29: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001c4f37de0, relayoutChildren=true, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #30: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001c4f37de0) at RenderBlock.cpp:595:5
    frame #31: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001c4f37cc0, child=0x00000001c4f37de0, marginInfo=0x00007ff7baa80c98, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #32: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001c4f37cc0, relayoutChildren=true, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #33: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001c4f37cc0, relayoutChildren=true, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #34: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001c4f37cc0) at RenderBlock.cpp:595:5
    frame #35: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001aec5d320, child=0x00000001c4f37cc0, marginInfo=0x00007ff7baa81278, previousFloatLogicalBottom={ 4385.73px (280687) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #36: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001aec5d320, relayoutChildren=false, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #37: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001aec5d320, relayoutChildren=false, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #38: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001aec5d320) at RenderBlock.cpp:595:5
    frame #39: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001a0411dd0, child=0x00000001aec5d320, marginInfo=0x00007ff7baa81858, previousFloatLogicalBottom={ 130px (8320) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #40: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001a0411dd0, relayoutChildren=false, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #41: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001a0411dd0, relayoutChildren=false, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #42: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001a0411dd0) at RenderBlock.cpp:595:5
    frame #43: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001a0411ca0, child=0x00000001a0411dd0, marginInfo=0x00007ff7baa81e38, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #44: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001a0411ca0, relayoutChildren=false, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #45: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001a0411ca0, relayoutChildren=false, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #46: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001a0411ca0) at RenderBlock.cpp:595:5
    frame #47: 0x00000001e3fadd04 WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00000001a04113e0, child=0x00000001a0411ca0, marginInfo=0x00007ff7baa82418, previousFloatLogicalBottom={ 0px (0) }, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:767:15
    frame #48: 0x00000001e3fac40b WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00000001a04113e0, relayoutChildren=false, maxFloatLogicalBottom={ 0px (0) }) at RenderBlockFlow.cpp:678:9
    frame #49: 0x00000001e3fab35b WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00000001a04113e0, relayoutChildren=false, pageLogicalHeight={ 0px (0) }) at RenderBlockFlow.cpp:532:13
    frame #50: 0x00000001e3f8fc78 WebCore`WebCore::RenderBlock::layout(this=0x00000001a04113e0) at RenderBlock.cpp:595:5
    frame #51: 0x00000001e421a0e5 WebCore`WebCore::RenderView::layout(this=0x00000001a04113e0) at RenderView.cpp:186:22
    frame #52: 0x00000001e3669b4a WebCore`WebCore::FrameViewLayoutContext::layout(this=0x00000001a0410158) at FrameViewLayoutContext.cpp:232:21

Seems like grid code isn't happy with a calc() value in track-related CSS properties
Comment 1 Simon Fraser (smfr) 2021-10-27 20:08:19 PDT 
Maybe caused by :
--grid-column-width: calc((100vw - var(--container-outer-width) * 2 - var(--grid-gap) *(var(--grid-column-count) - 1)) / var(--grid-column-count));
Comment 2 Radar WebKit Bug Importer 2021-11-03 20:07:16 PDT 
<rdar://problem/85002969>
Comment 3 Rob Buis 2021-11-05 03:25:42 PDT 
Is this possibly fixed by r285232? I can't repro on MiniBrowser Debug.
Comment 4 Ahmad Saleem 2023-01-20 10:04:53 PST 
Created attachment 464580 [details]
New Assert Logs

I am not able to get same assertion logs using URL from Comment 0 but these and it also lead to crashing MiniBrowser WK2 Debug instance based of 259136@main.
Comment 5 Ahmad Saleem 2024-05-02 17:24:36 PDT 
It is reproducible for me with (278291@main) on https://invisioncommunity.com/