Attachment #279233 for bug #142662

View Details Raw Unified Return to Bug 142662

| Differences between



2016-05-18  Antoine Quint  <graouts@apple.com>

        Elements with backdrop-filter cannot be clipped with clip-path or mask
        https://bugs.webkit.org/show_bug.cgi?id=142662
        <rdar://problem/20150192>

        Reviewed by NOBODY (OOPS!).

        If a backdrop filter is applied then we have a backdrop layer which we shold use to apply a mask to.

        Test: css3/filters/backdrop/backdrop-filter-with-clip-path.html

        * platform/graphics/ca/GraphicsLayerCA.cpp:
        (WebCore::GraphicsLayerCA::updateMaskLayer):

2016-05-18  Joanmarie Diggs  <jdiggs@igalia.com>

        AX: [ATK] Use WebCore Accessibility's AccessibilityText for AtkObject name and description

Lines 2453-2459 void GraphicsLayerCA::updateMasksToBoundsRect() a/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp_sec1
- a/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp -1 / +4 lines
2453	void GraphicsLayerCA::updateMaskLayer()	2453	void GraphicsLayerCA::updateMaskLayer()
2454	{	2454	{
2455	PlatformCALayer* maskCALayer = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayer() : nullptr;	2455	PlatformCALayer* maskCALayer = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayer() : nullptr;
2456	m_layer->setMask(maskCALayer);	2456	if (m_backdropLayer)
		2457	m_backdropLayer->setMask(maskCALayer);
		2458	else
		2459	m_layer->setMask(maskCALayer);
2457		2460
2458	LayerMap* maskLayerCloneMap = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayerClones() : nullptr;	2461	LayerMap* maskLayerCloneMap = m_maskLayer ? downcast<GraphicsLayerCA>(*m_maskLayer).primaryLayerClones() : nullptr;
2459		2462



2016-05-18  Antoine Quint  <graouts@apple.com>

        Elements with backdrop-filter cannot be clipped with clip-path or mask
        https://bugs.webkit.org/show_bug.cgi?id=142662
        <rdar://problem/20150192>

        Reviewed by NOBODY (OOPS!).

        New test that checks that applying a backdrop-filter and a clip-path on a single
        element has the same effect as applying a clip-path on a parent of a child with
        a backdrop-filter.

        * css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html: Added.
        * css3/filters/backdrop/backdrop-filter-with-clip-path.html: Added.

2016-05-18  Joanmarie Diggs  <jdiggs@igalia.com>

        AX: [ATK] Use WebCore Accessibility's AccessibilityText for AtkObject name and description



<!DOCTYPE html>
<html>
<head>
<title>This tests that backdrop filter with clip-path works properly.</title>
    <style>
    #text {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

    #clip {
        position: absolute;
        left: calc(50% - 50px);
        top: calc(50% - 50px);
        width: 100px;
        height: 100px;

        -webkit-clip-path: circle(50px at 50px 50px);
    }

    #blur {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        -webkit-backdrop-filter: blur(2px);
    }
    </style>
</head>
<body>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a nunc ultrices, faucibus ligula ac, euismod elit. Ut in vehicula enim. Suspendisse sodales auctor nunc, sit amet vehicula velit cursus vulputate. Nunc sed ipsum vitae massa <div id="clip"><span id="blur"></span></div>dapibus sodales sit amet quis dui. Aenean sit amet interdum arcu, et facilisis diam. Ut a lacus eleifend, feugiat tellus vel, molestie lorem. Nulla pulvinar dapibus semper. Quisque mollis, neque non luctus aliquam, ex risus lacinia augue, vel eleifend augue erat eget ante.
</div>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<title>This tests that backdrop filter with clip-path works properly.</title>
    <style>
    #text {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    #blur {
        width: 100px;
        height: 100px;
        position: absolute;
        left: calc(50% - 50px);
        top: calc(50% - 50px);

        -webkit-backdrop-filter: blur(2px);
        -webkit-clip-path: circle(50px at 50px 50px);
    }
    </style>
</head>
<body>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a nunc ultrices, faucibus ligula ac, euismod elit. Ut in vehicula enim. Suspendisse sodales auctor nunc, sit amet vehicula velit cursus vulputate. Nunc sed ipsum vitae massa <span id="blur"></span>dapibus sodales sit amet quis dui. Aenean sit amet interdum arcu, et facilisis diam. Ut a lacus eleifend, feugiat tellus vel, molestie lorem. Nulla pulvinar dapibus semper. Quisque mollis, neque non luctus aliquam, ex risus lacinia augue, vel eleifend augue erat eget ante.
</div>
</body>
</html>

Return to Bug 142662

Lines 1-3 a/Source/WebCore/ChangeLog_sec1
- a/Source/WebCore/ChangeLog +15 lines
		1	2016-05-18 Antoine Quint <graouts@apple.com>
		2
		3	Elements with backdrop-filter cannot be clipped with clip-path or mask
		4	https://bugs.webkit.org/show_bug.cgi?id=142662
		5	<rdar://problem/20150192>
		6
		7	Reviewed by NOBODY (OOPS!).
		8
		9	If a backdrop filter is applied then we have a backdrop layer which we shold use to apply a mask to.
		10
		11	Test: css3/filters/backdrop/backdrop-filter-with-clip-path.html
		12
		13	* platform/graphics/ca/GraphicsLayerCA.cpp:
		14	(WebCore::GraphicsLayerCA::updateMaskLayer):
		15
1	2016-05-18 Joanmarie Diggs <jdiggs@igalia.com>	16	2016-05-18 Joanmarie Diggs <jdiggs@igalia.com>
2		17
3	AX: [ATK] Use WebCore Accessibility's AccessibilityText for AtkObject name and description	18	AX: [ATK] Use WebCore Accessibility's AccessibilityText for AtkObject name and description

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +15 lines
		1	2016-05-18 Antoine Quint <graouts@apple.com>
		2
		3	Elements with backdrop-filter cannot be clipped with clip-path or mask
		4	https://bugs.webkit.org/show_bug.cgi?id=142662
		5	<rdar://problem/20150192>
		6
		7	Reviewed by NOBODY (OOPS!).
		8
		9	New test that checks that applying a backdrop-filter and a clip-path on a single
		10	element has the same effect as applying a clip-path on a parent of a child with
		11	a backdrop-filter.
		12
		13	* css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html: Added.
		14	* css3/filters/backdrop/backdrop-filter-with-clip-path.html: Added.
		15
1	2016-05-18 Joanmarie Diggs <jdiggs@igalia.com>	16	2016-05-18 Joanmarie Diggs <jdiggs@igalia.com>
2		17
3	AX: [ATK] Use WebCore Accessibility's AccessibilityText for AtkObject name and description	18	AX: [ATK] Use WebCore Accessibility's AccessibilityText for AtkObject name and description

Line 0 a/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html_sec1
- a/LayoutTests/css3/filters/backdrop/backdrop-filter-with-clip-path-expected.html +38 lines
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>This tests that backdrop filter with clip-path works properly.</title>
	5	<style>
	6	#text {
	7	position: relative;
	8	width: 200px;
	9	height: 200px;
	10	overflow: hidden;
	11	}
	12
	13	#clip {
	14	position: absolute;
	15	left: calc(50% - 50px);
	16	top: calc(50% - 50px);
	17	width: 100px;
	18	height: 100px;
	19
	20	-webkit-clip-path: circle(50px at 50px 50px);
	21	}
	22
	23	#blur {
	24	position: absolute;
	25	left: 0;
	26	top: 0;
	27	width: 100%;
	28	height: 100%;
	29
	30	-webkit-backdrop-filter: blur(2px);
	31	}
	32	</style>
	33	</head>
	34	<body>
	35	<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a nunc ultrices, faucibus ligula ac, euismod elit. Ut in vehicula enim. Suspendisse sodales auctor nunc, sit amet vehicula velit cursus vulputate. Nunc sed ipsum vitae massa <div id="clip"><span id="blur"></span></div>dapibus sodales sit amet quis dui. Aenean sit amet interdum arcu, et facilisis diam. Ut a lacus eleifend, feugiat tellus vel, molestie lorem. Nulla pulvinar dapibus semper. Quisque mollis, neque non luctus aliquam, ex risus lacinia augue, vel eleifend augue erat eget ante.
	36	</div>
	37	</body>
	38	</html>