basalt-appkit 0.0.0-rc5 → 0.1.0

package/native/tests/test_appkit_titlebar.mm

@@ -13,6 +13,8 @@
 
 #import "AppKitTitleBar.h"
 
+#include "WindowControl.h"
+
 TEST(titlebar_native_style_costs_the_app_nothing) {
   @autoreleasepool {
     NSWindow *window = [[NSWindow alloc]
@@ -105,3 +107,44 @@ TEST(titlebar_actions_are_safe_with_no_window) {
     EXPECT(true);
   }
 }
+
+// Which window `core/WindowControl.h` answers about, when the app is not the
+// active one.
+//
+// `NSApp.keyWindow` and `NSApp.mainWindow` are both nil for a background app,
+// and this file's suite *is* a background app: nothing here activates. So a
+// bounds read that only asked those two reported zero, which is what
+// `e2e/window.tsx` was seeing -- `getBounds()` answering 0x0 for the whole life
+// of a host that was launched while something else had focus.
+TEST(appkit_window_bounds_do_not_need_the_app_to_be_active) {
+  @autoreleasepool {
+    NSWindow *window = [[NSWindow alloc]
+        initWithContentRect:NSMakeRect(0, 0, 640, 480)
+                  styleMask:NSWindowStyleMaskTitled | NSWindowStyleMaskResizable
+                    backing:NSBackingStoreBuffered
+                      defer:NO];
+    // Ordered front rather than made key: the point is a window that exists and
+    // is visible without the app being frontmost.
+    // Not released when closed, which is the same line main_appkit.mm needs for
+    // the windows the host makes and for the same reason: `close` on a window
+    // whose `releasedWhenClosed` is YES -- the default for one built in code --
+    // releases it while ARC still holds a reference, and the second release
+    // comes when the pool drains.
+    //
+    // Undefined behaviour, which behaved: it passed here and segfaulted on
+    // CI's Mac. See test_appkit_services.mm for the rest of that story.
+    window.releasedWhenClosed = NO;
+    [window orderFront:nil];
+
+    const basalt::WindowBounds bounds = basalt::windowBounds();
+    // The frame rather than the content rect, which is what `getBounds()`
+    // reports and is taller by the title bar.
+    EXPECT(bounds.width >= 640.0);
+    EXPECT(bounds.height >= 480.0);
+    EXPECT_EQ(bounds.width, window.frame.size.width);
+    EXPECT_EQ(bounds.height, window.frame.size.height);
+
+    [window orderOut:nil];
+    [window close];
+  }
+}

package/native/tests/test_appkit_view.mm

@@ -7,6 +7,8 @@
 
 #include "TestHarness.h"
 
+#include "Filters.h"
+
 #import "RnAppKitView.h"
 
 #include <sstream>
@@ -235,3 +237,610 @@ TEST(appkit_view_describes_its_tree_like_the_gtk_one) {
 int main(int argc, char **argv) {
   return basalt::testing::runAllTests(argc, argv);
 }
+
+// The `cursor` style property.
+//
+// Two halves, and they fail differently: which NSCursor a CSS keyword means, and
+// whether the view tells AppKit about it. The second is a cursor *rect*, which
+// AppKit asks for by calling `resetCursorRects`, so the test subclass below
+// records what the view adds rather than needing a window and a real pointer.
+// An Objective-C class cannot be declared inside a namespace, which is why this
+// one is not in the anonymous namespace the rest of the file's helpers are in.
+@interface RnRecordingCursorView : RnAppKitView
+@property(nonatomic, strong, nullable) NSCursor *recorded;
+@property(nonatomic) NSInteger rectCount;
+@end
+
+@implementation RnRecordingCursorView
+- (void)addCursorRect:(NSRect)rect cursor:(NSCursor *)cursor {
+  // Deliberately not calling super: without a window there is nothing to add it
+  // to, and what is being checked is what the view asked for.
+  (void)rect;
+  self.recorded = cursor;
+  self.rectCount++;
+}
+@end
+
+namespace {
+
+RnRecordingCursorView *cursorView(NSString *name) {
+  RnRecordingCursorView *view = [[RnRecordingCursorView alloc] initWithFrame:NSZeroRect];
+  [view setRnFrameX:0 y:0 width:100 height:50];
+  [view setRnCursorName:name];
+  [view resetCursorRects];
+  return view;
+}
+
+} // namespace
+
+TEST(cursor_pointer_is_the_pointing_hand) {
+  @autoreleasepool {
+    RnRecordingCursorView *view = cursorView(@"pointer");
+    EXPECT(view.rnResolvedCursor == NSCursor.pointingHandCursor);
+    // And it reached AppKit, which is the half a stored property cannot show.
+    EXPECT_EQ((long)view.rectCount, 1L);
+    EXPECT(view.recorded == NSCursor.pointingHandCursor);
+  }
+}
+
+TEST(cursor_keywords_map_to_the_cursors_macos_has) {
+  @autoreleasepool {
+    EXPECT(cursorView(@"text").rnResolvedCursor == NSCursor.IBeamCursor);
+    EXPECT(cursorView(@"default").rnResolvedCursor == NSCursor.arrowCursor);
+    EXPECT(cursorView(@"grab").rnResolvedCursor == NSCursor.openHandCursor);
+    EXPECT(cursorView(@"grabbing").rnResolvedCursor == NSCursor.closedHandCursor);
+    EXPECT(cursorView(@"crosshair").rnResolvedCursor == NSCursor.crosshairCursor);
+    EXPECT(cursorView(@"copy").rnResolvedCursor == NSCursor.dragCopyCursor);
+    EXPECT(cursorView(@"alias").rnResolvedCursor == NSCursor.dragLinkCursor);
+    EXPECT(cursorView(@"context-menu").rnResolvedCursor == NSCursor.contextualMenuCursor);
+    // CSS has two keywords for this and macOS has one cursor.
+    EXPECT(cursorView(@"not-allowed").rnResolvedCursor == NSCursor.operationNotAllowedCursor);
+    EXPECT(cursorView(@"no-drop").rnResolvedCursor == NSCursor.operationNotAllowedCursor);
+    // The axis-aligned resizes collapse onto the two double-headed arrows, since
+    // "e-resize" and "w-resize" are the same picture on this platform.
+    EXPECT(cursorView(@"ew-resize").rnResolvedCursor == NSCursor.resizeLeftRightCursor);
+    EXPECT(cursorView(@"e-resize").rnResolvedCursor == NSCursor.resizeLeftRightCursor);
+    EXPECT(cursorView(@"ns-resize").rnResolvedCursor == NSCursor.resizeUpDownCursor);
+    EXPECT(cursorView(@"s-resize").rnResolvedCursor == NSCursor.resizeUpDownCursor);
+    // "none" hides the pointer, which is a cursor made of an empty image rather
+    // than the absence of one: nil would mean "inherit" and show an arrow.
+    EXPECT(cursorView(@"none").rnResolvedCursor != nil);
+  }
+}
+
+// A keyword macOS has no cursor for installs no rect, so the cursor is whatever
+// encloses the view. Forcing an arrow instead would be worse than doing nothing:
+// a spinner view inside a window showing a busy cursor would cut a hole in it.
+TEST(cursor_a_keyword_macos_lacks_leaves_the_cursor_alone) {
+  @autoreleasepool {
+    for (NSString *name in @[@"wait", @"help", @"move", @"progress", @"cell", @"all-scroll"]) {
+      RnRecordingCursorView *view = cursorView(name);
+      EXPECT(view.rnResolvedCursor == nil);
+      EXPECT_EQ((long)view.rectCount, 0L);
+    }
+  }
+}
+
+TEST(cursor_auto_is_no_cursor_at_all) {
+  @autoreleasepool {
+    // What `cursor: 'auto'` becomes by the time it is here: nothing to apply.
+    RnRecordingCursorView *view = cursorView(nil);
+    EXPECT(view.rnResolvedCursor == nil);
+    EXPECT_EQ((long)view.rectCount, 0L);
+    EXPECT(![[view describeTree] containsString:@"cursor="]);
+  }
+}
+
+// Clearing has to clear. A view whose cursor prop goes away keeps showing the
+// hand otherwise, because a cursor rect lives in the window until it is
+// discarded.
+TEST(cursor_can_be_taken_away_again) {
+  @autoreleasepool {
+    RnRecordingCursorView *view = cursorView(@"pointer");
+    [view setRnCursorName:nil];
+    view.rectCount = 0;
+    [view resetCursorRects];
+    EXPECT(view.rnResolvedCursor == nil);
+    EXPECT_EQ((long)view.rectCount, 0L);
+  }
+}
+
+// And the keyword is in the tree dump, which is what makes the wiring testable:
+// the prop is read in AppKitMountingManager, and every test above sets the name
+// on the view by hand. Spelled as the GTK side spells it, so the cross-host diff
+// can compare them.
+TEST(cursor_is_reported_in_the_tree) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    [view setRnFrameX:0 y:0 width:100 height:50];
+    [view setRnCursorName:@"grab"];
+    EXPECT([[view describeTree] containsString:@"cursor=grab"]);
+    // A keyword macOS cannot show is still reported: the dump says what the app
+    // asked for, and the two hosts' trees have to match whatever each can draw.
+    [view setRnCursorName:@"wait"];
+    EXPECT([[view describeTree] containsString:@"cursor=wait"]);
+  }
+}
+
+// `filter`: the CSS filter functions, as Core Image filters on the layer.
+//
+// `CALayer.filters` is public on macOS and private on iOS, which is why React
+// Native's own iOS half builds a SwiftUI wrapper and a multiply-blend layer to
+// approximate what this sets directly. What is asserted is what each filter was
+// handed: a filter, like a shadow, is composited by Core Animation, and
+// `renderInContext:` draws neither -- measured earlier on a bare layer. The GTK
+// side has the render tree and checks a rendered pixel instead; the arithmetic
+// they share is tested in core.
+namespace {
+
+RnAppKitFilters resolvedFilters(const std::vector<facebook::react::FilterFunction> &functions) {
+  const basalt::ResolvedFilters resolved = basalt::resolveFilters(functions);
+  RnAppKitFilters filters{};
+  filters.hasMatrix = resolved.hasMatrix;
+  for (int i = 0; i < 16; i++) {
+    filters.matrix[i] = resolved.matrix.m[i];
+  }
+  for (int i = 0; i < 4; i++) {
+    filters.offset[i] = resolved.matrix.offset[i];
+  }
+  filters.blurRadius = resolved.blurRadius;
+  filters.opacity = resolved.opacity;
+  return filters;
+}
+
+facebook::react::FilterFunction filterFunction(facebook::react::FilterType type, double amount) {
+  facebook::react::FilterFunction function;
+  function.type = type;
+  function.parameters = static_cast<facebook::react::Float>(amount);
+  return function;
+}
+
+} // namespace
+
+TEST(filter_a_colour_matrix_reaches_core_image_row_by_row) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    EXPECT_EQ((long)view.rnFilters.count, 0L);
+
+    using facebook::react::FilterType;
+    const RnAppKitFilters filters = resolvedFilters({filterFunction(FilterType::Grayscale, 1.0)});
+    [view setRnFilters:&filters];
+
+    EXPECT_EQ((long)view.rnFilters.count, 1L);
+    CIFilter *matrix = view.rnFilters.firstObject;
+    EXPECT([matrix.name isEqualToString:@"CIColorMatrix"]);
+
+    // The red output's weights are the luminance weights, which is what
+    // grayscale(1) means -- and they are a *row* of the matrix, so a column-wise
+    // hand-off would put 0.2126 in all three vectors' X instead.
+    CIVector *red = [matrix valueForKey:@"inputRVector"];
+    EXPECT_NEAR((int)(red.X * 1000), 213, 2);
+    EXPECT_NEAR((int)(red.Y * 1000), 715, 2);
+    EXPECT_NEAR((int)(red.Z * 1000), 72, 2);
+    // Alpha is left alone.
+    CIVector *alpha = [matrix valueForKey:@"inputAVector"];
+    EXPECT_NEAR((int)alpha.W, 1, 0);
+  }
+}
+
+// invert(1) is a scale and a translate, and the translate is the half a
+// matrix-only hand-off drops.
+TEST(filter_an_offset_reaches_core_image_as_the_bias) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    using facebook::react::FilterType;
+    const RnAppKitFilters filters = resolvedFilters({filterFunction(FilterType::Invert, 1.0)});
+    [view setRnFilters:&filters];
+
+    CIFilter *matrix = view.rnFilters.firstObject;
+    CIVector *bias = [matrix valueForKey:@"inputBiasVector"];
+    EXPECT_NEAR((int)(bias.X * 100), 100, 1);
+    EXPECT_NEAR((int)(bias.Y * 100), 100, 1);
+    EXPECT_NEAR((int)(bias.Z * 100), 100, 1);
+    // And the scale is -1, so black comes out white rather than staying black.
+    CIVector *red = [matrix valueForKey:@"inputRVector"];
+    EXPECT_NEAR((int)(red.X * 100), -100, 1);
+  }
+}
+
+TEST(filter_a_blur_becomes_a_gaussian_of_half_the_radius) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    using facebook::react::FilterType;
+    const RnAppKitFilters filters = resolvedFilters({filterFunction(FilterType::Blur, 8.0)});
+    [view setRnFilters:&filters];
+
+    EXPECT_EQ((long)view.rnFilters.count, 1L);
+    CIFilter *blur = view.rnFilters.firstObject;
+    EXPECT([blur.name isEqualToString:@"CIGaussianBlur"]);
+    EXPECT_NEAR([[blur valueForKey:@"inputRadius"] intValue], 4, 0);
+  }
+}
+
+// `opacity()` is the layer's own opacity rather than a filter pass, which is
+// cheaper and is what the GTK side does with its opacity node. It multiplies the
+// view's own opacity, CSS letting an app ask in both places.
+TEST(filter_opacity_multiplies_the_views_own) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    [view setRnOpacity:0.5];
+    using facebook::react::FilterType;
+    const RnAppKitFilters filters = resolvedFilters({filterFunction(FilterType::Opacity, 0.5)});
+    [view setRnFilters:&filters];
+
+    EXPECT_EQ((long)view.rnFilters.count, 0L);
+    EXPECT_NEAR((int)(view.layer.opacity * 100), 25, 1);
+
+    // And taken away again, which puts the view's own opacity back rather than
+    // leaving it at a quarter.
+    [view setRnFilters:nullptr];
+    EXPECT_NEAR((int)(view.layer.opacity * 100), 50, 1);
+  }
+}
+
+TEST(filter_is_reported_in_the_tree) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    EXPECT(![[view describeTree] containsString:@"filter="]);
+
+    using facebook::react::FilterType;
+    const RnAppKitFilters filters = resolvedFilters(
+        {filterFunction(FilterType::Grayscale, 1.0), filterFunction(FilterType::Blur, 8.0)});
+    [view setRnFilters:&filters];
+
+    // Spelled as GTK spells it, probe colour and all: (1, 0.5, 0.25) greyed is
+    // 0.588, which is 0x96 in every channel.
+    const std::string described = [view describeTree].UTF8String;
+    EXPECT(described.find("filter=(probe=#969696ff,blur=8)") != std::string::npos);
+  }
+}
+
+// `mixBlendMode`, which on macOS is one Core Animation property: a Core Image
+// blend-mode filter set as the layer's `compositingFilter`, which blends the
+// layer with whatever is beneath it in the layer tree.
+//
+// **No pixels, for the reason box shadows and filters have none here**, and it is
+// the same measurement: compositing happens in the window server, and
+// `-[CALayer renderInContext:]` -- which is what this project's snapshots use --
+// composites nothing, so a blended layer draws exactly as an unblended one in a
+// snapshot. The GTK side has the render tree and asserts the blended pixels node
+// by node; here the observable is the filter the layer was given.
+namespace {
+
+RnAppKitView *blendedView(NSString *keyword) {
+  RnAppKitView *view = [RnAppKitView viewWithTag:1];
+  [view setRnFrameX:0 y:0 width:100 height:50];
+  [view setRnBlendModeName:keyword];
+  return view;
+}
+
+NSString *compositingFilterName(RnAppKitView *view) {
+  id filter = view.layer.compositingFilter;
+  if (![filter isKindOfClass:[CIFilter class]]) {
+    return nil;
+  }
+  return ((CIFilter *)filter).name;
+}
+
+} // namespace
+
+TEST(blend_mode_becomes_a_core_image_compositing_filter) {
+  @autoreleasepool {
+    RnAppKitView *view = blendedView(@"multiply");
+    EXPECT([view.rnBlendModeName isEqualToString:@"multiply"]);
+    EXPECT([view.rnBlendFilterName isEqualToString:@"CIMultiplyBlendMode"]);
+    // And it reached the layer as a filter object, which is the half a stored
+    // property cannot show. `compositingFilter` is typed `id`: a string is what
+    // React Native's iOS half sets, and is undocumented.
+    EXPECT([compositingFilterName(view) isEqualToString:@"CIMultiplyBlendMode"]);
+  }
+}
+
+// Every keyword, and that Core Image has a filter for each: the mapping is
+// sixteen lines of table, which is sixteen chances to paste the wrong name, and a
+// name Core Image does not know makes `filterWithName:` return nil -- a view that
+// silently stops blending rather than anything louder.
+TEST(blend_mode_every_css_keyword_has_a_filter_core_image_knows) {
+  @autoreleasepool {
+    NSArray<NSString *> *keywords = @[
+      @"multiply", @"screen", @"overlay", @"darken", @"lighten", @"color-dodge",
+      @"color-burn", @"hard-light", @"soft-light", @"difference", @"exclusion",
+      @"hue", @"saturation", @"color", @"luminosity", @"plus-lighter"
+    ];
+    for (NSString *keyword in keywords) {
+      RnAppKitView *view = blendedView(keyword);
+      EXPECT(view.rnBlendFilterName != nil);
+      EXPECT([CIFilter filterWithName:view.rnBlendFilterName] != nil);
+      EXPECT(compositingFilterName(view) != nil);
+    }
+
+    // The one GSK has no node for, which this host does have: CSS's plus-lighter
+    // is clamped addition, and that is linear dodge.
+    EXPECT([blendedView(@"plus-lighter").rnBlendFilterName
+        isEqualToString:@"CILinearDodgeBlendMode"]);
+    // And two that are easy to swap for each other.
+    EXPECT([blendedView(@"color-dodge").rnBlendFilterName
+        isEqualToString:@"CIColorDodgeBlendMode"]);
+    EXPECT([blendedView(@"color-burn").rnBlendFilterName
+        isEqualToString:@"CIColorBurnBlendMode"]);
+  }
+}
+
+// `mixBlendMode: 'normal'` arrives as no keyword at all, and a view that was
+// blending has to stop: a compositing filter left behind is a view that keeps
+// blending for the rest of its life.
+TEST(blend_mode_normal_leaves_the_layer_alone) {
+  @autoreleasepool {
+    RnAppKitView *view = blendedView(nil);
+    EXPECT(view.rnBlendModeName == nil);
+    EXPECT(view.layer.compositingFilter == nil);
+
+    [view setRnBlendModeName:@"overlay"];
+    EXPECT(view.layer.compositingFilter != nil);
+
+    [view setRnBlendModeName:nil];
+    EXPECT(view.layer.compositingFilter == nil);
+    EXPECT(view.rnBlendModeName == nil);
+  }
+}
+
+// A keyword this host has no filter for leaves the layer unblended, and keeps
+// the keyword: the dump says what the app asked for. Nothing in React Native can
+// send one today, which is exactly why it is worth pinning -- the enum is theirs
+// to extend.
+TEST(blend_mode_an_unknown_keyword_is_kept_and_not_applied) {
+  @autoreleasepool {
+    RnAppKitView *view = blendedView(@"plus-darker");
+    EXPECT([view.rnBlendModeName isEqualToString:@"plus-darker"]);
+    EXPECT(view.rnBlendFilterName == nil);
+    EXPECT(view.layer.compositingFilter == nil);
+  }
+}
+
+// And in the tree dump, spelled as GTK spells it, which is what lets one
+// scenario check the wiring on both hosts.
+TEST(blend_mode_is_reported_in_the_tree) {
+  @autoreleasepool {
+    RnAppKitView *plain = blendedView(nil);
+    EXPECT([plain describeTree].UTF8String != nullptr);
+    EXPECT(std::string([plain describeTree].UTF8String).find("blend=") == std::string::npos);
+
+    RnAppKitView *view = blendedView(@"color-dodge");
+    const std::string described = [view describeTree].UTF8String;
+    EXPECT(described.find("blend=color-dodge") != std::string::npos);
+  }
+}
+
+// `filter: drop-shadow(...)`, which on this host is the layer's own shadow: with
+// no `shadowPath`, Core Animation casts it from the layer's alpha, which is what
+// the filter function means and what the box shadows beside it -- each with a
+// path -- cannot do.
+//
+// No pixels, for the reason the rest of this file has none: `renderInContext:`
+// draws no shadow at all, measured on a bare layer. The GTK side asserts the
+// picture, including that the shadow has a hole where the view does.
+namespace {
+
+RnAppKitView *dropShadowed(CGFloat dx, CGFloat dy, CGFloat sigma, CGFloat alpha) {
+  RnAppKitView *view = [RnAppKitView viewWithTag:1];
+  [view setRnFrameX:0 y:0 width:60 height:40];
+  RnAppKitFilters filters{};
+  filters.opacity = 1;
+  RnAppKitFilterShadow shadow{};
+  shadow.dx = dx;
+  shadow.dy = dy;
+  shadow.standardDeviation = sigma;
+  shadow.color[3] = alpha;
+  filters.shadows = &shadow;
+  filters.shadowCount = 1;
+  [view setRnFilters:&filters];
+  return view;
+}
+
+} // namespace
+
+TEST(filter_a_drop_shadow_becomes_the_layers_own_shadow) {
+  @autoreleasepool {
+    RnAppKitView *view = dropShadowed(4, 6, 3, 0.5);
+
+    // The standard deviation unchanged: CALayer's shadowRadius is one, where
+    // GSK's radius is twice one. A doubling here would be a shadow twice as soft
+    // as the GTK host's.
+    EXPECT_EQ((int)(view.layer.shadowRadius * 10), 30);
+    // The alpha is the layer's opacity rather than the colour's, so the two
+    // cannot multiply together.
+    EXPECT_EQ((int)(view.layer.shadowOpacity * 100), 50);
+    EXPECT(view.layer.shadowColor != nil);
+    EXPECT_EQ((int)(CGColorGetAlpha(view.layer.shadowColor) * 100), 100);
+
+    // Down the screen is a positive dy, as CSS means it, and the layer is not
+    // flipped where this view is -- so the sign turns over.
+    EXPECT_EQ((int)view.layer.shadowOffset.width, 4);
+    EXPECT_EQ((int)view.layer.shadowOffset.height, -6);
+
+    // And no path, which is what makes it follow the alpha rather than the box.
+    EXPECT(view.layer.shadowPath == nil);
+  }
+}
+
+// It comes off again. This is the failure the `opacity()` filter actually had
+// before it was caught: a layer property set by a filter and never cleared
+// leaves the view wrong for the rest of its life.
+TEST(filter_a_drop_shadow_comes_off_again) {
+  @autoreleasepool {
+    RnAppKitView *view = dropShadowed(4, 6, 3, 0.5);
+    EXPECT(view.layer.shadowOpacity > 0);
+
+    [view setRnFilters:nullptr];
+    EXPECT_EQ((int)(view.layer.shadowOpacity * 100), 0);
+    EXPECT(view.layer.shadowColor == nil);
+    EXPECT_EQ((int)view.layer.shadowRadius, 0);
+    EXPECT_EQ((int)view.rnFilterShadow.standardDeviation, 0);
+
+    // And a filter list without a drop shadow clears it too, which is the case
+    // that goes through the other branch.
+    RnAppKitView *second = dropShadowed(4, 6, 3, 0.5);
+    using facebook::react::FilterType;
+    const RnAppKitFilters greyscale = resolvedFilters({filterFunction(FilterType::Grayscale, 1.0)});
+    [second setRnFilters:&greyscale];
+    EXPECT_EQ((int)(second.layer.shadowOpacity * 100), 0);
+    EXPECT(second.rnFilters.count == 1);
+  }
+}
+
+// The first `dropShadow()` is the view's own layer's, which is the half of the
+// arrangement worth pinning separately: it is the one cast from the content's
+// *alpha* rather than from the view's box, which is what makes a drop shadow a
+// drop shadow, and CSS applies a filter list left to right so the first is the
+// one nearest the content. The rest are layers of their own and the test below
+// is theirs.
+TEST(filter_the_first_drop_shadow_is_the_views_own_layers) {
+  @autoreleasepool {
+    RnAppKitView *view = [RnAppKitView viewWithTag:1];
+    [view setRnFrameX:0 y:0 width:60 height:40];
+
+    RnAppKitFilterShadow shadows[2]{};
+    shadows[0].dx = 2;
+    shadows[0].standardDeviation = 1;
+    shadows[0].color[3] = 1;
+    shadows[1].dx = 20;
+    shadows[1].standardDeviation = 10;
+    shadows[1].color[3] = 1;
+
+    RnAppKitFilters filters{};
+    filters.opacity = 1;
+    filters.shadows = shadows;
+    filters.shadowCount = 2;
+    [view setRnFilters:&filters];
+
+    EXPECT_EQ((int)view.layer.shadowOffset.width, 2);
+    EXPECT_EQ((int)view.layer.shadowRadius, 1);
+  }
+}
+
+// Both `dropShadow()` entries in a filter list are drawn, which is the half of
+// the list this host drops. CSS applies a filter list left to right, each
+// function working on what the one before it produced, so two drop shadows are
+// a shadow of the content and then a shadow of that -- not a choice between the
+// two. The pair that an app actually writes is a tight dark shadow for the edge
+// and a wide soft one for the lift, and with only the first drawn the view
+// still looks deliberate: the warning goes to the log, nothing on screen says a
+// shadow is missing, and the design it was copied from is the only place the
+// second one survives.
+//
+// A CALayer carries one shadow, so the two cannot both live on the view's own
+// layer -- which is why this looks at every layer in the view's own tree rather
+// than at `self.layer` alone, the way the box shadows beside it already take a
+// layer per shadow. Which layer each lands on is an implementation's choice;
+// that both are there is not. Layer properties and no pixels, for the reason
+// the rest of this file has none: Core Animation composites a shadow and
+// `renderInContext:` draws nothing of it.
+//
+// `filter_the_first_drop_shadow_is_the_views_own_layers` above pins the half
+// of this that is cast from the content's alpha; this one is about the rest of
+// the list arriving at all.
+namespace {
+
+// One shadow found in a layer tree, in the layer's own terms.
+struct LayerShadow {
+  CGFloat dx = 0;
+  CGFloat dy = 0;
+  CGFloat radius = 0;
+  float opacity = 0;
+};
+
+void collectShadows(CALayer *layer, std::vector<LayerShadow> &found) {
+  if (layer.shadowOpacity > 0) {
+    found.push_back(LayerShadow{layer.shadowOffset.width,
+                                layer.shadowOffset.height,
+                                layer.shadowRadius,
+                                layer.shadowOpacity});
+  }
+  for (CALayer *sublayer in layer.sublayers) {
+    collectShadows(sublayer, found);
+  }
+}
+
+std::vector<LayerShadow> shadowsInLayerTree(RnAppKitView *view) {
+  std::vector<LayerShadow> found;
+  collectShadows(view.layer, found);
+  return found;
+}
+
+// Whether one of them is the shadow that was asked for, in the terms the other
+// drop shadow tests use: the standard deviation crosses unchanged into
+// `shadowRadius`, the colour's alpha becomes `shadowOpacity`, and the offset is
+// CSS's with the sign of dy turned over, the layer not being flipped where the
+// view is.
+bool carriesShadow(const std::vector<LayerShadow> &found,
+                   CGFloat dx,
+                   CGFloat dy,
+                   CGFloat standardDeviation,
+                   float opacity) {
+  for (const LayerShadow &shadow : found) {
+    if ((int)shadow.dx == (int)dx && (int)shadow.dy == (int)(-dy) &&
+        (int)(shadow.radius * 10) == (int)(standardDeviation * 10) &&
+        (int)(shadow.opacity * 100) == (int)(opacity * 100)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// A view asking for two unmistakably different drop shadows, or for the first
+// of them alone -- the same two numbers either way, so the only difference
+// between the two views is the entry that is meant to be dropped.
+RnAppKitView *twiceDropShadowed(bool bothEntries) {
+  RnAppKitView *view = [RnAppKitView viewWithTag:1];
+  [view setRnFrameX:0 y:0 width:60 height:40];
+
+  RnAppKitFilterShadow shadows[2]{};
+  shadows[0].dx = 2;
+  shadows[0].dy = 3;
+  shadows[0].standardDeviation = 1;
+  shadows[0].color[3] = 1;
+  shadows[1].dx = 20;
+  shadows[1].dy = 6;
+  shadows[1].standardDeviation = 10;
+  shadows[1].color[3] = 0.5;
+
+  RnAppKitFilters filters{};
+  filters.opacity = 1;
+  filters.shadows = shadows;
+  filters.shadowCount = bothEntries ? 2 : 1;
+  [view setRnFilters:&filters];
+  return view;
+}
+
+} // namespace
+
+TEST(filter_two_drop_shadows_are_both_drawn) {
+  @autoreleasepool {
+    const std::vector<LayerShadow> both = shadowsInLayerTree(twiceDropShadowed(true));
+
+    // Two shadows, each with its own numbers: a view that kept only the last,
+    // or that averaged the pair into one middling shadow, fails here as surely
+    // as one that keeps only the first.
+    EXPECT_EQ((long)both.size(), 2L);
+    EXPECT(carriesShadow(both, 2, 3, 1, 1.0F));
+    EXPECT(carriesShadow(both, 20, 6, 10, 0.5F));
+
+    // And asking for two is not the same as asking for the first alone, which
+    // is what dropping the rest of the list comes to.
+    const std::vector<LayerShadow> firstOnly = shadowsInLayerTree(twiceDropShadowed(false));
+    EXPECT_EQ((long)firstOnly.size(), 1L);
+    EXPECT(carriesShadow(firstOnly, 2, 3, 1, 1.0F));
+    EXPECT(!carriesShadow(firstOnly, 20, 6, 10, 0.5F));
+    EXPECT(both.size() != firstOnly.size());
+  }
+}
+
+TEST(filter_a_drop_shadow_is_reported_in_the_tree) {
+  @autoreleasepool {
+    RnAppKitView *view = dropShadowed(4, 6, 3, 0.5);
+    // Spelled as GTK spells it, and with the standard deviation React Native
+    // parsed rather than either platform's own radius.
+    const std::string described = [view describeTree].UTF8String;
+    EXPECT(described.find("filter=(shadow=(4,6,3,#00000080))") != std::string::npos);
+  }
+}