ShadowPainting.cpp 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
  4. * Copyright (c) 2022, MacDue <macdue@dueutil.tech>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <AK/NumericLimits.h>
  9. #include <LibGfx/DisjointRectSet.h>
  10. #include <LibGfx/Filters/StackBlurFilter.h>
  11. #include <LibGfx/Font/Font.h>
  12. #include <LibGfx/Painter.h>
  13. #include <LibWeb/Layout/LineBoxFragment.h>
  14. #include <LibWeb/Layout/Node.h>
  15. #include <LibWeb/Painting/BorderPainting.h>
  16. #include <LibWeb/Painting/BorderRadiusCornerClipper.h>
  17. #include <LibWeb/Painting/PaintContext.h>
  18. #include <LibWeb/Painting/PaintOuterBoxShadowParams.h>
  19. #include <LibWeb/Painting/ShadowPainting.h>
  20. namespace Web::Painting {
  21. void paint_inner_box_shadow(Gfx::Painter& painter, PaintOuterBoxShadowParams params)
  22. {
  23. auto device_content_rect = params.device_content_rect;
  24. DevicePixels offset_x = params.offset_x;
  25. DevicePixels offset_y = params.offset_y;
  26. DevicePixels blur_radius = params.blur_radius;
  27. DevicePixels spread_distance = params.spread_distance;
  28. auto shadows_bitmap_rect = device_content_rect.inflated(
  29. blur_radius.value() + offset_y.value(),
  30. blur_radius.value() + abs(offset_x.value()),
  31. blur_radius.value() + abs(offset_y.value()),
  32. blur_radius.value() + offset_x.value());
  33. auto shadows_bitmap = Gfx::Bitmap::create(Gfx::BitmapFormat::BGRA8888, shadows_bitmap_rect.size().to_type<int>());
  34. if (shadows_bitmap.is_error()) {
  35. dbgln("Unable to allocate temporary bitmap {} for box-shadow rendering: {}", device_content_rect, shadows_bitmap.error());
  36. return;
  37. }
  38. auto shadow_bitmap = shadows_bitmap.release_value();
  39. Gfx::Painter shadow_painter { *shadow_bitmap };
  40. Gfx::AntiAliasingPainter shadow_aa_painter { shadow_painter };
  41. auto device_content_rect_int = device_content_rect.to_type<int>();
  42. auto origin_device_content_rect = device_content_rect_int.translated(-device_content_rect_int.x(), -device_content_rect_int.y());
  43. auto outer_shadow_rect = origin_device_content_rect.translated({ offset_x + blur_radius.value(), offset_y + blur_radius.value() });
  44. auto spread_distance_value = spread_distance.value();
  45. auto inner_shadow_rect = outer_shadow_rect.inflated(-spread_distance_value, -spread_distance_value, -spread_distance_value, -spread_distance_value);
  46. outer_shadow_rect.inflate(
  47. blur_radius.value() + offset_y.value(),
  48. blur_radius.value() + abs(offset_x.value()),
  49. blur_radius.value() + abs(offset_y.value()),
  50. blur_radius.value() + offset_x.value());
  51. auto top_left_corner = params.corner_radii.top_left;
  52. auto top_right_corner = params.corner_radii.top_right;
  53. auto bottom_right_corner = params.corner_radii.bottom_right;
  54. auto bottom_left_corner = params.corner_radii.bottom_left;
  55. shadow_painter.fill_rect(outer_shadow_rect, params.box_shadow_data.color.with_alpha(0xff));
  56. if (params.border_radii.has_any_radius()) {
  57. shadow_aa_painter.fill_rect_with_rounded_corners(inner_shadow_rect, params.box_shadow_data.color.with_alpha(0xff),
  58. top_left_corner, top_right_corner, bottom_right_corner, bottom_left_corner,
  59. Gfx::AntiAliasingPainter::BlendMode::AlphaSubtract);
  60. } else {
  61. shadow_painter.clear_rect(inner_shadow_rect, Color::Transparent);
  62. }
  63. Gfx::StackBlurFilter filter(*shadow_bitmap);
  64. filter.process_rgba(blur_radius.value(), params.box_shadow_data.color);
  65. Gfx::PainterStateSaver save { painter };
  66. painter.add_clip_rect(device_content_rect_int);
  67. painter.blit({ device_content_rect_int.left() - blur_radius.value(), device_content_rect_int.top() - blur_radius.value() },
  68. *shadow_bitmap, shadow_bitmap->rect(), params.box_shadow_data.color.alpha() / 255.);
  69. }
  70. void paint_outer_box_shadow(Gfx::Painter& painter, PaintOuterBoxShadowParams params)
  71. {
  72. auto const& border_radii = params.border_radii;
  73. auto const& box_shadow_data = params.box_shadow_data;
  74. auto device_content_rect = params.device_content_rect;
  75. auto top_left_corner = params.corner_radii.top_left;
  76. auto top_right_corner = params.corner_radii.top_right;
  77. auto bottom_right_corner = params.corner_radii.bottom_right;
  78. auto bottom_left_corner = params.corner_radii.bottom_left;
  79. DevicePixels offset_x = params.offset_x;
  80. DevicePixels offset_y = params.offset_y;
  81. DevicePixels blur_radius = params.blur_radius;
  82. DevicePixels spread_distance = params.spread_distance;
  83. auto fill_rect_masked = [](auto& painter, auto fill_rect, auto mask_rect, auto color) {
  84. Gfx::DisjointRectSet<DevicePixels> rect_set;
  85. rect_set.add(fill_rect);
  86. auto shattered = rect_set.shatter(mask_rect);
  87. for (auto& rect : shattered.rects())
  88. painter.fill_rect(rect.template to_type<int>(), color);
  89. };
  90. // Our blur cannot handle radii over 255 so there's no point trying (255 is silly big anyway)
  91. blur_radius = clamp(blur_radius, 0, 255);
  92. // If there's no blurring, nor rounded corners, we can save a lot of effort.
  93. auto non_blurred_shadow_rect = device_content_rect.inflated(spread_distance, spread_distance, spread_distance, spread_distance);
  94. if (blur_radius == 0 && !border_radii.has_any_radius()) {
  95. fill_rect_masked(painter, non_blurred_shadow_rect.translated(offset_x, offset_y), device_content_rect, box_shadow_data.color);
  96. return;
  97. }
  98. auto top_left_shadow_corner = top_left_corner;
  99. auto top_right_shadow_corner = top_right_corner;
  100. auto bottom_right_shadow_corner = bottom_right_corner;
  101. auto bottom_left_shadow_corner = bottom_left_corner;
  102. auto spread_corner = [&](auto& corner) {
  103. if (corner) {
  104. corner.horizontal_radius += spread_distance.value();
  105. corner.vertical_radius += spread_distance.value();
  106. }
  107. };
  108. spread_corner(top_left_shadow_corner);
  109. spread_corner(top_right_shadow_corner);
  110. spread_corner(bottom_right_shadow_corner);
  111. spread_corner(bottom_left_shadow_corner);
  112. auto expansion = spread_distance - (blur_radius * 2);
  113. DevicePixelRect inner_bounding_rect = {
  114. device_content_rect.x() + offset_x - expansion,
  115. device_content_rect.y() + offset_y - expansion,
  116. device_content_rect.width() + 2 * expansion,
  117. device_content_rect.height() + 2 * expansion
  118. };
  119. // Calculating and blurring the box-shadow full size is expensive, and wasteful - aside from the corners,
  120. // all vertical strips of the shadow are identical, and the same goes for horizontal ones.
  121. // So instead, we generate a shadow bitmap that is just large enough to include the corners and 1px of
  122. // non-corner, and then we repeatedly blit sections of it. This is similar to a NinePatch on Android.
  123. auto double_radius = blur_radius * 2;
  124. auto blurred_edge_thickness = blur_radius * 4;
  125. auto default_corner_size = Gfx::IntSize { double_radius, double_radius };
  126. auto top_left_corner_size = (top_left_shadow_corner ? top_left_shadow_corner.as_rect().size() : default_corner_size).to_type<DevicePixels>();
  127. auto top_right_corner_size = (top_right_shadow_corner ? top_right_shadow_corner.as_rect().size() : default_corner_size).to_type<DevicePixels>();
  128. auto bottom_left_corner_size = (bottom_left_shadow_corner ? bottom_left_shadow_corner.as_rect().size() : default_corner_size).to_type<DevicePixels>();
  129. auto bottom_right_corner_size = (bottom_right_shadow_corner ? bottom_right_shadow_corner.as_rect().size() : default_corner_size).to_type<DevicePixels>();
  130. auto max_edge_width = non_blurred_shadow_rect.width() / 2;
  131. auto max_edge_height = non_blurred_shadow_rect.height() / 2;
  132. auto extra_edge_width = non_blurred_shadow_rect.width() % 2;
  133. auto extra_edge_height = non_blurred_shadow_rect.height() % 2;
  134. auto clip_corner_size = [&](auto& size, auto const& corner, DevicePixels x_bonus = 0, DevicePixels y_bonus = 0) {
  135. auto max_x = (max_edge_width + x_bonus).value();
  136. auto max_y = (max_edge_height + y_bonus).value();
  137. auto min_x = max(corner.horizontal_radius, min(double_radius, max_x).value());
  138. auto min_y = max(corner.vertical_radius, min(double_radius, max_y).value());
  139. if (min_x <= max_x)
  140. size.set_width(clamp(size.width(), min_x, max_x));
  141. if (min_y <= max_y)
  142. size.set_height(clamp(size.height(), min_y, max_y));
  143. };
  144. clip_corner_size(top_left_corner_size, top_left_corner, extra_edge_width, extra_edge_height);
  145. clip_corner_size(top_right_corner_size, top_right_corner, 0, extra_edge_height);
  146. clip_corner_size(bottom_left_corner_size, bottom_left_corner, extra_edge_width);
  147. clip_corner_size(bottom_right_corner_size, bottom_right_corner);
  148. auto shadow_bitmap_rect = DevicePixelRect(
  149. 0, 0,
  150. max(max(
  151. top_left_corner_size.width() + top_right_corner_size.width(),
  152. bottom_left_corner_size.width() + bottom_right_corner_size.width()),
  153. max(top_left_corner_size.width() + bottom_right_corner_size.width(),
  154. bottom_left_corner_size.width() + top_right_corner_size.width()))
  155. + 1 + blurred_edge_thickness,
  156. max(max(
  157. top_left_corner_size.height() + bottom_left_corner_size.height(),
  158. top_right_corner_size.height() + bottom_right_corner_size.height()),
  159. max(top_left_corner_size.height() + bottom_right_corner_size.height(),
  160. bottom_left_corner_size.height() + top_right_corner_size.height()))
  161. + 1 + blurred_edge_thickness);
  162. auto top_left_corner_rect = DevicePixelRect {
  163. 0, 0,
  164. top_left_corner_size.width() + double_radius,
  165. top_left_corner_size.height() + double_radius
  166. };
  167. auto top_right_corner_rect = DevicePixelRect {
  168. shadow_bitmap_rect.width() - (top_right_corner_size.width() + double_radius), 0,
  169. top_right_corner_size.width() + double_radius,
  170. top_right_corner_size.height() + double_radius
  171. };
  172. auto bottom_right_corner_rect = DevicePixelRect {
  173. shadow_bitmap_rect.width() - (bottom_right_corner_size.width() + double_radius),
  174. shadow_bitmap_rect.height() - (bottom_right_corner_size.height() + double_radius),
  175. bottom_right_corner_size.width() + double_radius,
  176. bottom_right_corner_size.height() + double_radius
  177. };
  178. auto bottom_left_corner_rect = DevicePixelRect {
  179. 0, shadow_bitmap_rect.height() - (bottom_left_corner_size.height() + double_radius),
  180. bottom_left_corner_size.width() + double_radius,
  181. bottom_left_corner_size.height() + double_radius
  182. };
  183. auto horizontal_edge_width = min(max_edge_height, double_radius) + double_radius;
  184. auto vertical_edge_width = min(max_edge_width, double_radius) + double_radius;
  185. auto horizontal_top_edge_width = min(max_edge_height + extra_edge_height, double_radius) + double_radius;
  186. auto vertical_left_edge_width = min(max_edge_width + extra_edge_width, double_radius) + double_radius;
  187. DevicePixelRect left_edge_rect { 0, top_left_corner_rect.height(), vertical_left_edge_width, 1 };
  188. DevicePixelRect right_edge_rect { shadow_bitmap_rect.width() - vertical_edge_width, top_right_corner_rect.height(), vertical_edge_width, 1 };
  189. DevicePixelRect top_edge_rect { top_left_corner_rect.width(), 0, 1, horizontal_top_edge_width };
  190. DevicePixelRect bottom_edge_rect { bottom_left_corner_rect.width(), shadow_bitmap_rect.height() - horizontal_edge_width, 1, horizontal_edge_width };
  191. auto shadows_bitmap = Gfx::Bitmap::create(Gfx::BitmapFormat::BGRA8888, shadow_bitmap_rect.size().to_type<int>());
  192. if (shadows_bitmap.is_error()) {
  193. dbgln("Unable to allocate temporary bitmap {} for box-shadow rendering: {}", shadow_bitmap_rect, shadows_bitmap.error());
  194. return;
  195. }
  196. auto shadow_bitmap = shadows_bitmap.release_value();
  197. Gfx::Painter corner_painter { *shadow_bitmap };
  198. Gfx::AntiAliasingPainter aa_corner_painter { corner_painter };
  199. aa_corner_painter.fill_rect_with_rounded_corners(
  200. shadow_bitmap_rect.shrunken(double_radius, double_radius, double_radius, double_radius).to_type<int>(),
  201. box_shadow_data.color, top_left_shadow_corner, top_right_shadow_corner, bottom_right_shadow_corner, bottom_left_shadow_corner);
  202. Gfx::StackBlurFilter filter(*shadow_bitmap);
  203. filter.process_rgba(blur_radius.value(), box_shadow_data.color);
  204. auto paint_shadow_infill = [&] {
  205. if (!params.border_radii.has_any_radius())
  206. return painter.fill_rect(inner_bounding_rect.to_type<int>(), box_shadow_data.color);
  207. auto top_left_inner_width = top_left_corner_rect.width() - blurred_edge_thickness;
  208. auto top_left_inner_height = top_left_corner_rect.height() - blurred_edge_thickness;
  209. auto top_right_inner_width = top_right_corner_rect.width() - blurred_edge_thickness;
  210. auto top_right_inner_height = top_right_corner_rect.height() - blurred_edge_thickness;
  211. auto bottom_right_inner_width = bottom_right_corner_rect.width() - blurred_edge_thickness;
  212. auto bottom_right_inner_height = bottom_right_corner_rect.height() - blurred_edge_thickness;
  213. auto bottom_left_inner_width = bottom_left_corner_rect.width() - blurred_edge_thickness;
  214. auto bottom_left_inner_height = bottom_left_corner_rect.height() - blurred_edge_thickness;
  215. DevicePixelRect top_rect {
  216. inner_bounding_rect.x() + top_left_inner_width,
  217. inner_bounding_rect.y(),
  218. inner_bounding_rect.width() - top_left_inner_width - top_right_inner_width,
  219. top_left_inner_height
  220. };
  221. DevicePixelRect right_rect {
  222. inner_bounding_rect.x() + inner_bounding_rect.width() - top_right_inner_width,
  223. inner_bounding_rect.y() + top_right_inner_height,
  224. top_right_inner_width,
  225. inner_bounding_rect.height() - top_right_inner_height - bottom_right_inner_height
  226. };
  227. DevicePixelRect bottom_rect {
  228. inner_bounding_rect.x() + bottom_left_inner_width,
  229. inner_bounding_rect.y() + inner_bounding_rect.height() - bottom_right_inner_height,
  230. inner_bounding_rect.width() - bottom_left_inner_width - bottom_right_inner_width,
  231. bottom_right_inner_height
  232. };
  233. DevicePixelRect left_rect {
  234. inner_bounding_rect.x(),
  235. inner_bounding_rect.y() + top_left_inner_height,
  236. bottom_left_inner_width,
  237. inner_bounding_rect.height() - top_left_inner_height - bottom_left_inner_height
  238. };
  239. DevicePixelRect inner = {
  240. left_rect.x() + left_rect.width(),
  241. left_rect.y(),
  242. inner_bounding_rect.width() - left_rect.width() - right_rect.width(),
  243. inner_bounding_rect.height() - top_rect.height() - bottom_rect.height()
  244. };
  245. painter.fill_rect(top_rect.to_type<int>(), box_shadow_data.color);
  246. painter.fill_rect(right_rect.to_type<int>(), box_shadow_data.color);
  247. painter.fill_rect(bottom_rect.to_type<int>(), box_shadow_data.color);
  248. painter.fill_rect(left_rect.to_type<int>(), box_shadow_data.color);
  249. painter.fill_rect(inner.to_type<int>(), box_shadow_data.color);
  250. };
  251. auto left_start = inner_bounding_rect.left() - blurred_edge_thickness;
  252. auto right_start = inner_bounding_rect.left() + inner_bounding_rect.width() + (blurred_edge_thickness - vertical_edge_width);
  253. auto top_start = inner_bounding_rect.top() - blurred_edge_thickness;
  254. auto bottom_start = inner_bounding_rect.top() + inner_bounding_rect.height() + (blurred_edge_thickness - horizontal_edge_width);
  255. auto top_left_corner_blit_pos = inner_bounding_rect.top_left().translated(-blurred_edge_thickness, -blurred_edge_thickness);
  256. auto top_right_corner_blit_pos = inner_bounding_rect.top_right().translated(-top_right_corner_size.width() + double_radius, -blurred_edge_thickness);
  257. auto bottom_left_corner_blit_pos = inner_bounding_rect.bottom_left().translated(-blurred_edge_thickness, -bottom_left_corner_size.height() + double_radius);
  258. auto bottom_right_corner_blit_pos = inner_bounding_rect.bottom_right().translated(-bottom_right_corner_size.width() + double_radius, -bottom_right_corner_size.height() + double_radius);
  259. auto paint_shadow = [&](DevicePixelRect clip_rect) {
  260. Gfx::PainterStateSaver save { painter };
  261. painter.add_clip_rect(clip_rect.to_type<int>());
  262. paint_shadow_infill();
  263. // Corners
  264. painter.blit(top_left_corner_blit_pos.to_type<int>(), shadow_bitmap, top_left_corner_rect.to_type<int>());
  265. painter.blit(top_right_corner_blit_pos.to_type<int>(), shadow_bitmap, top_right_corner_rect.to_type<int>());
  266. painter.blit(bottom_left_corner_blit_pos.to_type<int>(), shadow_bitmap, bottom_left_corner_rect.to_type<int>());
  267. painter.blit(bottom_right_corner_blit_pos.to_type<int>(), shadow_bitmap, bottom_right_corner_rect.to_type<int>());
  268. // Horizontal edges
  269. for (auto x = inner_bounding_rect.left() + (bottom_left_corner_size.width() - double_radius); x < inner_bounding_rect.right() - (bottom_right_corner_size.width() - double_radius); ++x)
  270. painter.blit({ x, bottom_start }, shadow_bitmap, bottom_edge_rect.to_type<int>());
  271. for (auto x = inner_bounding_rect.left() + (top_left_corner_size.width() - double_radius); x < inner_bounding_rect.right() - (top_right_corner_size.width() - double_radius); ++x)
  272. painter.blit({ x, top_start }, shadow_bitmap, top_edge_rect.to_type<int>());
  273. // Vertical edges
  274. for (auto y = inner_bounding_rect.top() + (top_right_corner_size.height() - double_radius); y < inner_bounding_rect.bottom() - (bottom_right_corner_size.height() - double_radius); ++y)
  275. painter.blit({ right_start, y }, shadow_bitmap, right_edge_rect.to_type<int>());
  276. for (auto y = inner_bounding_rect.top() + (top_left_corner_size.height() - double_radius); y < inner_bounding_rect.bottom() - (bottom_left_corner_size.height() - double_radius); ++y)
  277. painter.blit({ left_start, y }, shadow_bitmap, left_edge_rect.to_type<int>());
  278. };
  279. // FIXME: Painter only lets us define a clip-rect which discards drawing outside of it, whereas here we want
  280. // a rect which discards drawing inside it. So, we run the draw operations 4 to 8 times with clip-rects
  281. // covering each side of the content_rect exactly once.
  282. // If we were painting a shadow without a border radius we'd want to clip everything inside the box below.
  283. // If painting a shadow with rounded corners (but still rectangular) we want to clip everything inside
  284. // the box except the corners. This gives us an upper bound of 8 shadow paints now :^(.
  285. // (However, this does not seem to be the costly part in profiling).
  286. //
  287. // ┌───┬────────┬───┐
  288. // │ │xxxxxxxx│ │
  289. // ├───┼────────┼───┤
  290. // │xxx│xxxxxxxx│xxx│
  291. // │xxx│xxxxxxxx│xxx│
  292. // │xxx│xxxxxxxx│xxx│
  293. // │xxx│xxxxxxxx│xxx│
  294. // │xxx│xxxxxxxx│xxx│
  295. // ├───┼────────┼───┤
  296. // │ │ xxxxxx │ │
  297. // └───┴────────┴───┘
  298. // How many times would you like to paint the shadow sir?
  299. // Yes.
  300. // FIXME: Could reduce the shadow paints from 8 to 4 for shadows with all corner radii 50%.
  301. // FIXME: We use this since we want the clip rect to include everything after a certain x or y.
  302. // Note: Using painter.target()->width() or height() does not work, when the painter is a small
  303. // translated bitmap rather than full screen, as the clip rect may not intersect.
  304. constexpr auto really_large_number = NumericLimits<int>::max() / 2;
  305. // Everything above content_rect, including sides
  306. paint_shadow({ 0, 0, really_large_number, device_content_rect.top() });
  307. // Everything below content_rect, including sides
  308. paint_shadow({ 0, device_content_rect.bottom(), really_large_number, really_large_number });
  309. // Everything directly to the left of content_rect
  310. paint_shadow({ 0, device_content_rect.top(), device_content_rect.left(), device_content_rect.height() });
  311. // Everything directly to the right of content_rect
  312. paint_shadow({ device_content_rect.right(), device_content_rect.top(), really_large_number, device_content_rect.height() });
  313. if (top_left_corner) {
  314. // Inside the top left corner (the part outside the border radius)
  315. auto top_left = top_left_corner.as_rect().to_type<DevicePixels>().translated(device_content_rect.top_left());
  316. paint_shadow(top_left);
  317. }
  318. if (top_right_corner) {
  319. // Inside the top right corner (the part outside the border radius)
  320. auto top_right = top_right_corner.as_rect().to_type<DevicePixels>().translated(device_content_rect.top_right().translated(-top_right_corner.horizontal_radius, 0));
  321. paint_shadow(top_right);
  322. }
  323. if (bottom_right_corner) {
  324. // Inside the bottom right corner (the part outside the border radius)
  325. auto bottom_right = bottom_right_corner.as_rect().to_type<DevicePixels>().translated(device_content_rect.bottom_right().translated(-bottom_right_corner.horizontal_radius, -bottom_right_corner.vertical_radius));
  326. paint_shadow(bottom_right);
  327. }
  328. if (bottom_left_corner) {
  329. // Inside the bottom left corner (the part outside the border radius)
  330. auto bottom_left = bottom_left_corner.as_rect().to_type<DevicePixels>().translated(device_content_rect.bottom_left().translated(0, -bottom_left_corner.vertical_radius));
  331. paint_shadow(bottom_left);
  332. }
  333. }
  334. void paint_box_shadow(PaintContext& context,
  335. CSSPixelRect const& bordered_content_rect,
  336. CSSPixelRect const& borderless_content_rect,
  337. BordersData const& borders_data,
  338. BorderRadiiData const& border_radii,
  339. Vector<ShadowData> const& box_shadow_layers)
  340. {
  341. // Note: Box-shadow layers are ordered front-to-back, so we paint them in reverse
  342. for (auto& box_shadow_data : box_shadow_layers.in_reverse()) {
  343. DevicePixels offset_x = context.rounded_device_pixels(box_shadow_data.offset_x);
  344. DevicePixels offset_y = context.rounded_device_pixels(box_shadow_data.offset_y);
  345. DevicePixels blur_radius = context.rounded_device_pixels(box_shadow_data.blur_radius);
  346. DevicePixels spread_distance = context.rounded_device_pixels(box_shadow_data.spread_distance);
  347. DevicePixelRect device_content_rect;
  348. if (box_shadow_data.placement == ShadowPlacement::Inner) {
  349. device_content_rect = context.rounded_device_rect(borderless_content_rect);
  350. } else {
  351. device_content_rect = context.rounded_device_rect(bordered_content_rect);
  352. }
  353. auto params = PaintOuterBoxShadowParams {
  354. .painter = context.painter(),
  355. .content_rect = bordered_content_rect,
  356. .border_radii = border_radii,
  357. .box_shadow_data = box_shadow_data,
  358. .corner_radii = CornerRadii {
  359. .top_left = border_radii.top_left.as_corner(context),
  360. .top_right = border_radii.top_right.as_corner(context),
  361. .bottom_right = border_radii.bottom_right.as_corner(context),
  362. .bottom_left = border_radii.bottom_left.as_corner(context) },
  363. .offset_x = offset_x,
  364. .offset_y = offset_y,
  365. .blur_radius = blur_radius,
  366. .spread_distance = spread_distance,
  367. .device_content_rect = device_content_rect,
  368. };
  369. params.border_radii.shrink(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
  370. if (box_shadow_data.placement == ShadowPlacement::Inner) {
  371. ScopedCornerRadiusClip corner_clipper { context, device_content_rect, border_radii, CornerClip::Outside };
  372. context.painter().paint_inner_box_shadow_params(params);
  373. } else {
  374. ScopedCornerRadiusClip corner_clipper { context, device_content_rect, params.border_radii, CornerClip::Inside };
  375. context.painter().paint_outer_box_shadow_params(params);
  376. }
  377. }
  378. }
  379. void paint_text_shadow(PaintContext& context, Layout::LineBoxFragment const& fragment, Vector<ShadowData> const& shadow_layers)
  380. {
  381. if (shadow_layers.is_empty() || fragment.text().is_empty())
  382. return;
  383. auto fragment_width = context.enclosing_device_pixels(fragment.width());
  384. auto fragment_height = context.enclosing_device_pixels(fragment.height());
  385. auto draw_rect = context.enclosing_device_rect(fragment.absolute_rect());
  386. auto text = Utf8View(fragment.text());
  387. auto& font = fragment.layout_node().scaled_font(context);
  388. auto fragment_baseline = context.rounded_device_pixels(fragment.baseline());
  389. // Note: Box-shadow layers are ordered front-to-back, so we paint them in reverse
  390. for (auto& layer : shadow_layers.in_reverse()) {
  391. DevicePixels offset_x = context.rounded_device_pixels(layer.offset_x);
  392. DevicePixels offset_y = context.rounded_device_pixels(layer.offset_y);
  393. DevicePixels blur_radius = context.rounded_device_pixels(layer.blur_radius);
  394. // Space around the painted text to allow it to blur.
  395. // FIXME: Include spread in this once we use that.
  396. DevicePixels margin = blur_radius * 2;
  397. DevicePixelRect text_rect {
  398. margin, margin,
  399. fragment_width, fragment_height
  400. };
  401. DevicePixelRect bounding_rect {
  402. 0, 0,
  403. text_rect.width() + margin + margin,
  404. text_rect.height() + margin + margin
  405. };
  406. DevicePixelPoint draw_location {
  407. draw_rect.x() + offset_x - margin,
  408. draw_rect.y() + offset_y - margin
  409. };
  410. context.painter().paint_text_shadow(blur_radius, bounding_rect, text_rect, text, font, layer.color, fragment_baseline, draw_location);
  411. }
  412. }
  413. }