Bug 202049

Summary: Setting border-radius on <video> element clips top and left sections of video
Product: WebKit Reporter: Jonathan Hammer <jonathan>
Component: CompositingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, commit-queue, dino, eric.carlson, esprehn+autocc, ews-watchlist, fred.wang, glenn, jer.noble, jonathan, kondapallykalyan, pdr, philipj, sabouhallawa, sergio, simon.fraser, thorton, tsavell, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=199135
Attachments:
Description Flags
Patch commit-queue: commit-queue-

Description Jonathan Hammer 2019-09-20 11:27:09 PDT
Setting border-radius on a <video> element to a value greater than zero causes large chunks of the video to be clipped incorrectly. Please see https://directmailmac.com/safari-13-bug.php for an example. On that page, the <video> element has a border-radius of 5px, but approx. 40px of the left and 30px of the top of the video are clipped off.

The workaround (which can be seen at https://directmailmac.com) is to set the border-radius to zero.
Comment 1 Radar WebKit Bug Importer 2019-09-20 13:25:16 PDT
<rdar://problem/55570024>
Comment 2 Simon Fraser (smfr) 2019-10-07 10:56:20 PDT
I can reproduce.
Comment 3 Simon Fraser (smfr) 2019-10-19 14:11:11 PDT
Probably regressed in r246845.
Comment 4 Simon Fraser (smfr) 2019-10-19 21:54:07 PDT
Created attachment 381389 [details]
Patch
Comment 5 zalan 2019-10-21 08:40:30 PDT
Comment on attachment 381389 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=381389&action=review

> Source/WebCore/rendering/RenderLayerBacking.cpp:1934
> +            contentsClippingRect.move(LayoutSize(-clipLayer->offsetFromRenderer()));

moveBy()? or LayoutSize { }
Comment 6 Said Abou-Hallawa 2019-10-21 10:19:45 PDT
Comment on attachment 381389 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=381389&action=review

> Source/WebCore/platform/graphics/FloatRoundedRect.h:106
> +    void setLocation(FloatPoint location) { m_rect.setLocation(location); }

Can't we use setRect() or move() to change the location?

Or can't we make rect() non-const and use rect().setLocation()? Maybe a better solution is to make FloatRoundedRect inherits FloatRect.

> Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:2648
> +        clippingRectRelativeToClippingLayer.setLocation({ });

Shouldn't clippingRectRelativeToClippingLayer be translated to the coordinates of m_contentsClippingLayer instead of just making its location at { 0, 0 }?

> LayoutTests/compositing/video/video-border-radius-clipping-expected.html:27
> +            var totalCount = document.getElementsByTagName('video').length;
> +            var count = totalCount;

There is only one <video> element in the <body> element. Why do we have to get the count and check if (!--count...) in the script below?

> LayoutTests/compositing/video/video-border-radius-clipping.html:28
> +            var totalCount = document.getElementsByTagName('video').length;
> +            var count = totalCount;

Ditto.
Comment 7 WebKit Commit Bot 2019-10-21 10:37:58 PDT
Comment on attachment 381389 [details]
Patch

Rejecting attachment 381389 [details] from commit-queue.

Failed to run "['/Volumes/Data/EWS/WebKit/Tools/Scripts/webkit-patch', '--status-host=webkit-queues.webkit.org', '--bot-id=webkit-cq-01', 'land-attachment', '--force-clean', '--non-interactive', '--parent-command=commit-queue', 381389, '--port=mac']" exit_code: 1 cwd: /Volumes/Data/EWS/WebKit

Logging in as commit-queue@webkit.org...
Fetching: https://bugs.webkit.org/attachment.cgi?id=381389&action=edit
Fetching: https://bugs.webkit.org/show_bug.cgi?id=202049&ctype=xml&excludefield=attachmentdata
Processing 1 patch from 1 bug.
Updating working directory
Processing patch 381389 from bug 202049.
Fetching: https://bugs.webkit.org/attachment.cgi?id=381389
/Volumes/Data/EWS/WebKit/LayoutTests/ChangeLog neither lists a valid reviewer nor contains the string "Unreviewed" or "Rubber stamp" (case insensitive).
Updating OpenSource
Current branch master is up to date.

Full output: https://webkit-queues.webkit.org/results/13159497
Comment 8 Said Abou-Hallawa 2019-10-21 10:41:00 PDT
I am sorry I did not mean to set r? There was a review conflict and I chose to submit it anyway. It seems this replaced the r+ with the r?.
Comment 9 Simon Fraser (smfr) 2019-10-21 13:08:40 PDT
(In reply to Said Abou-Hallawa from comment #6)
> Comment on attachment 381389 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=381389&action=review
> 
> > Source/WebCore/platform/graphics/FloatRoundedRect.h:106
> > +    void setLocation(FloatPoint location) { m_rect.setLocation(location); }
> 
> Can't we use setRect() or move() to change the location?
>
> Or can't we make rect() non-const and use rect().setLocation()? Maybe a
> better solution is to make FloatRoundedRect inherits FloatRect.

I considered these. setLocation() seemed simplest.

> > Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:2648
> > +        clippingRectRelativeToClippingLayer.setLocation({ });
> 
> Shouldn't clippingRectRelativeToClippingLayer be translated to the
> coordinates of m_contentsClippingLayer instead of just making its location
> at { 0, 0 }?

clippingRectRelativeToClippingLayer was sized and positioned based on the rounded rect.

> > LayoutTests/compositing/video/video-border-radius-clipping-expected.html:27
> > +            var totalCount = document.getElementsByTagName('video').length;
> > +            var count = totalCount;
> 
> There is only one <video> element in the <body> element. Why do we have to
> get the count and check if (!--count...) in the script below?
> 
> > LayoutTests/compositing/video/video-border-radius-clipping.html:28
> > +            var totalCount = document.getElementsByTagName('video').length;
> > +            var count = totalCount;
> 
> Ditto.

Copy-pasted from another test.
Comment 10 Simon Fraser (smfr) 2019-10-21 14:36:31 PDT
https://trac.webkit.org/changeset/251385/webkit
Comment 12 Simon Fraser (smfr) 2019-10-24 14:22:31 PDT
Fixed the test in https://trac.webkit.org/r251561.