Bug 211530

Summary: REGRESSION (r252161): Incorrect rendering of some inset box-shadow with spread and border-radius
Product: WebKit Reporter: Antoine Quint <graouts>
Component: Layout and RenderingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, changseok, dino, esprehn+autocc, ews-watchlist, glenn, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Testcase
none
Go big or go home
none
Static testcase
none
Patch
zalan: review+
For Windows EWS
none
For EWS
none
For EWS none

Description Antoine Quint 2020-05-06 14:26:55 PDT
Created attachment 398657 [details]
Testcase

See the attached test case which consists of:

<style>

div {
    width: 100px;
    height: 30px;

    box-shadow: rgb(0, 0, 0) 0px 0px 0px 1px inset;

    border-radius: 100px;

    /* Slowed down from 0.1s in original content */
    transition: box-shadow 1s linear;
}

div:hover {
    box-shadow: inset 0 0 0 2px #000;
}

</style>
<div></div>

Hovering the <div> shows an unpleasant behavior. This used to work fine before regressing in to r252161 and this was then improved a bit in r252689.
Comment 1 Antoine Quint 2020-05-06 14:27:11 PDT
<rdar://problem/62570229>
Comment 2 Simon Fraser (smfr) 2020-05-06 14:51:23 PDT
Created attachment 398662 [details]
Go big or go home
Comment 3 Simon Fraser (smfr) 2020-05-06 15:01:44 PDT
Created attachment 398669 [details]
Static testcase
Comment 4 Simon Fraser (smfr) 2020-05-06 15:12:44 PDT
Everything looks OK from the drawing side; we do the same drawing:

applying 2  (save)
applying 3  (clip-path (path move to (318,60), add line to (318,60), add curve to (318,87.61) (295.61,110) (268,110), add line to (68,110), add curve to (40.39,110) (18,87.61) (18,60), add line to (18,60), add curve to (18,32.39) (40.39,10) (68,10), add line to (268,10), add curve to (295.61,10) (318,32.39) (318,60), close subpath) (wind-rule EVEN-ODD))
applying 4  (translate (x 661.00) (y 0.00))
applying 5  (set-state (change-flags 512) (shadow-blur 0.00) (shadow-offset width=-661 height=0) (shadows-use-legacy-radius 0))
applying 6  (fill-rect-with-rounded-hole (extent (18,10) width=300 height=100) (rect (18,10) width=300 height=100) (rounded-hole-rect 48.00 40.00 240.00 40.00
topLeft=20.03 20.03
topRight=20.03 20.03
bottomLeft=20.03 20.03
bottomRight=20.03 20.03) (color #000000))
applying 7  (restore)
Comment 5 Simon Fraser (smfr) 2020-05-06 15:31:46 PDT
Ah we're giving CG a non-renderable around hole rect:

applying 12  (fill-rect-with-rounded-hole (extent (18,120) width=300 height=100) (rect (18,120) width=300 height=100) (rounded-hole-rect 48.00 150.00 240.00 40.00
topLeft=20.23 20.23
topRight=20.23 20.23
bottomLeft=20.23 20.23
bottomRight=20.23 20.23) (color #000000))
Comment 6 Simon Fraser (smfr) 2020-05-06 23:04:01 PDT
Created attachment 398705 [details]
Patch
Comment 7 Simon Fraser (smfr) 2020-05-07 10:15:35 PDT
Created attachment 398754 [details]
For Windows EWS
Comment 8 Simon Fraser (smfr) 2020-05-07 11:31:07 PDT
Created attachment 398769 [details]
For EWS
Comment 9 Simon Fraser (smfr) 2020-05-07 12:51:35 PDT
Created attachment 398784 [details]
For EWS
Comment 10 EWS 2020-05-07 14:02:41 PDT
Committed r261334: <https://trac.webkit.org/changeset/261334>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 398784 [details].