Source/WebCore/ChangeLog

 12015-06-22 Dean Jackson <dino@apple.com>
 2
 3 Element with blur backdrop-filter shows edge duplication and dark edges
 4 https://bugs.webkit.org/show_bug.cgi?id=146215
 5 <rdar://problem/20367695>
 6
 7 Reviewed by NOBODY (OOPS!).
 8
 9 The input images to backdrop filters should duplicate their edge pixels
 10 outwards, rather than using transparent pixels. This is a flag we
 11 set on the Gaussian blur, but means we have to remember if the
 12 FilterOperations list came from a regular filter or a backdrop filter.
 13
 14 Test: css3/filters/backdrop/blur-input-bounds.html
 15
 16 * css/CSSPropertyNames.in: New custom convertor for backdrop-filter.
 17 * css/StyleBuilderConverter.h:
 18 (WebCore::StyleBuilderConverter::convertBackdropFilterOperations): New convertor
 19 that sets the backdrop flag, but is otherwise the same as a normal filter
 20 convertor.
 21 * page/animation/CSSPropertyAnimation.cpp:
 22 (WebCore::blendFilterOperations): Inherit the backdrop flag if either of our
 23 inputs has it.
 24 * platform/graphics/ca/mac/PlatformCAFiltersMac.mm: Set the inputNormalizeEdges
 25 key on the CAFilter if necessary.
 26 * platform/graphics/filters/FilterOperations.cpp: Add a new flag indicating if
 27 these operations are intended for backdrops.
 28 (WebCore::FilterOperations::operator=):
 29 (WebCore::FilterOperations::operator==):
 30 * platform/graphics/filters/FilterOperations.h:
 31 (WebCore::FilterOperations::usedForBackdropFilters):
 32 (WebCore::FilterOperations::setUsedForBackdropFilters):
 33
1342015-06-19 Michael Catanzaro <mcatanzaro@igalia.com>
235
336 Fix absolute value warning in LocalizedStringsGtk.cpp

Source/WebCore/css/CSSPropertyNames.in

@@flex-wrap
476476justify-content [Initial=initialContentAlignment, Converter=ContentAlignmentData]
477477-webkit-justify-content = justify-content
478478#if defined(ENABLE_FILTERS_LEVEL_2) && ENABLE_FILTERS_LEVEL_2
479 -webkit-backdrop-filter [ConditionalConverter=FilterOperations]
 479-webkit-backdrop-filter [ConditionalConverter=BackdropFilterOperations]
480480#endif
481481justify-self [Initial=initialSelfAlignment, Converter=SelfOrDefaultAlignmentData]
482482-webkit-font-size-delta [SkipBuilder]

Source/WebCore/css/StyleBuilderConverter.h

@@public:
104104 static Optional<float> convertPerspective(StyleResolver&, CSSValue&);
105105 static Optional<Length> convertMarqueeIncrement(StyleResolver&, CSSValue&);
106106 static Optional<FilterOperations> convertFilterOperations(StyleResolver&, CSSValue&);
 107#if ENABLE(FILTERS_LEVEL_2)
 108 static Optional<FilterOperations> convertBackdropFilterOperations(StyleResolver&, CSSValue&);
 109#endif
107110 static Vector<RefPtr<MaskImageOperation>> convertMaskImageOperations(StyleResolver&, CSSValue&);
108111#if PLATFORM(IOS)
109112 static bool convertTouchCallout(StyleResolver&, CSSValue&);

@@inline Optional<FilterOperations> StyleBuilderConverter::convertFilterOperations
10051008 return Nullopt;
10061009}
10071010
 1011#if ENABLE(FILTERS_LEVEL_2)
 1012inline Optional<FilterOperations> StyleBuilderConverter::convertBackdropFilterOperations(StyleResolver& styleResolver, CSSValue& value)
 1013{
 1014 FilterOperations operations;
 1015 if (styleResolver.createFilterOperations(value, operations)) {
 1016 operations.setUsedForBackdropFilters(true);
 1017 return operations;
 1018 }
 1019 return Nullopt;
 1020}
 1021#endif
 1022
10081023static inline WebKitCSSResourceValue* maskImageValueFromIterator(CSSValueList& maskImagesList, CSSValueList::iterator it)
10091024{
10101025 // May also be a CSSInitialValue.

Source/WebCore/page/animation/CSSPropertyAnimation.cpp

@@static inline FilterOperations blendFilterOperations(const AnimationBase* anim,
192192 result.operations().append(fromOp ? fromOp : identityOp);
193193 }
194194 }
 195#if ENABLE(FILTERS_LEVEL_2)
 196 result.setUsedForBackdropFilters(from.usedForBackdropFilters() || to.usedForBackdropFilters());
 197#endif
 198
195199 return result;
196200}
197201

Source/WebCore/platform/graphics/ca/mac/PlatformCAFiltersMac.mm

@@void PlatformCAFilters::setFiltersOnLayer(PlatformLayer* layer, const FilterOper
161161 const auto& blurOperation = downcast<BlurFilterOperation>(filterOperation);
162162 CAFilter *filter = [CAFilter filterWithType:kCAFilterGaussianBlur];
163163 [filter setValue:[NSNumber numberWithFloat:floatValueForLength(blurOperation.stdDeviation(), 0)] forKey:@"inputRadius"];
 164#if ENABLE(FILTERS_LEVEL_2)
 165 if (filters.usedForBackdropFilters())
 166 [filter setValue:[NSNumber numberWithBool:YES] forKey:@"inputNormalizeEdges"];
 167#endif
164168 [filter setName:filterName];
165169 [array.get() addObject:filter];
166170 break;

Source/WebCore/platform/graphics/filters/FilterOperations.cpp

@@FilterOperations::FilterOperations()
5151FilterOperations& FilterOperations::operator=(const FilterOperations& other)
5252{
5353 m_operations = other.m_operations;
 54#if ENABLE(FILTERS_LEVEL_2)
 55 m_usedForBackdropFilters = other.m_usedForBackdropFilters;
 56#endif
5457 return *this;
5558}
5659

@@bool FilterOperations::operator==(const FilterOperations& o) const
5861{
5962 if (m_operations.size() != o.m_operations.size())
6063 return false;
61 
 64
 65#if ENABLE(FILTERS_LEVEL_2)
 66 if (m_usedForBackdropFilters != o.m_usedForBackdropFilters)
 67 return false;
 68#endif
 69
6270 unsigned s = m_operations.size();
6371 for (unsigned i = 0; i < s; i++) {
6472 if (*m_operations[i] != *o.m_operations[i])

Source/WebCore/platform/graphics/filters/FilterOperations.h

@@public:
4242 FilterOperations(const FilterOperations& other) { *this = other; }
4343
4444 WEBCORE_EXPORT FilterOperations& operator=(const FilterOperations&);
45 
 45
4646 bool operator==(const FilterOperations&) const;
4747 bool operator!=(const FilterOperations& o) const
4848 {

@@public:
7070 bool hasFilterThatMovesPixels() const;
7171
7272 bool hasReferenceFilter() const;
 73
 74#if ENABLE(FILTERS_LEVEL_2)
 75 bool usedForBackdropFilters() const { return m_usedForBackdropFilters; }
 76 void setUsedForBackdropFilters(bool usedForBackdrop) { m_usedForBackdropFilters = usedForBackdrop; }
 77#endif
 78
7379private:
7480 Vector<RefPtr<FilterOperation>> m_operations;
 81#if ENABLE(FILTERS_LEVEL_2)
 82 bool m_usedForBackdropFilters { false };
 83#endif
7584};
7685
7786} // namespace WebCore

LayoutTests/ChangeLog

 12015-06-22 Dean Jackson <dino@apple.com>
 2
 3 Element with blur backdrop-filter shows edge duplication and dark edges
 4 https://bugs.webkit.org/show_bug.cgi?id=146215
 5 <rdar://problem/20367695>
 6
 7 Reviewed by NOBODY (OOPS!).
 8
 9 Add a pixel test to show that the input images to backdrop filters should duplicate their
 10 edge pixels. Unfortunately this is not reproducible with normal filters, so it
 11 can't be a reference test.
 12
 13 * css3/filters/backdrop/blur-input-bounds.html: Added.
 14 * platform/mac/css3/filters/backdrop/blur-input-bounds-expected.png: Added.
 15 * platform/mac/css3/filters/backdrop/blur-input-bounds-expected.txt: Added.
 16
1172015-06-19 Dean Jackson <dino@apple.com>
218
319 Extremely large canvas crashes on pre-El Capitan machines

LayoutTests/css3/filters/backdrop/blur-input-bounds.html

 1<style>
 2div {
 3 display: inline-block;
 4 position: relative;
 5 margin: 10px;
 6 width: 160px;
 7 height: 80px;
 8}
 9
 10img {
 11 position: absolute;
 12 top: 0;
 13 left: 0;
 14 margin: 0;
 15 padding: 0;
 16}
 17
 18p {
 19 position: absolute;
 20 top: 10px;
 21 left: 20px;
 22 width: 120px;
 23 height: 60px;
 24 margin: 0;
 25 padding: 0;
 26}
 27
 28</style>
 29<div>
 30 <img src="../resources/reference.png">
 31 <p style="-webkit-backdrop-filter: blur(10px)"></p>
 32</div>

LayoutTests/platform/mac/css3/filters/backdrop/blur-input-bounds-expected.png


Added

2146d51446791babd04b31dc397b9fac

LayoutTests/platform/mac/css3/filters/backdrop/blur-input-bounds-expected.txt

 1layer at (0,0) size 800x600
 2 RenderView at (0,0) size 800x600
 3layer at (0,0) size 800x600
 4 RenderBlock {HTML} at (0,0) size 800x600
 5 RenderBody {BODY} at (8,8) size 784x584
 6 RenderText {#text} at (0,0) size 0x0
 7layer at (18,18) size 160x80
 8 RenderBlock (relative positioned) {DIV} at (10,10) size 160x80
 9layer at (18,18) size 160x90
 10 RenderImage {IMG} at (0,0) size 160x90
 11layer at (38,28) size 120x60
 12 RenderBlock (positioned) {P} at (20,10) size 120x60