StackingContext.cpp 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606
  1. /*
  2. * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/Debug.h>
  8. #include <AK/QuickSort.h>
  9. #include <AK/StringBuilder.h>
  10. #include <LibGfx/AffineTransform.h>
  11. #include <LibGfx/Matrix4x4.h>
  12. #include <LibGfx/Rect.h>
  13. #include <LibWeb/CSS/ComputedValues.h>
  14. #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
  15. #include <LibWeb/Layout/Box.h>
  16. #include <LibWeb/Layout/ReplacedBox.h>
  17. #include <LibWeb/Layout/Viewport.h>
  18. #include <LibWeb/Painting/PaintableBox.h>
  19. #include <LibWeb/Painting/SVGPaintable.h>
  20. #include <LibWeb/Painting/StackingContext.h>
  21. #include <LibWeb/Painting/TableBordersPainting.h>
  22. #include <LibWeb/SVG/SVGMaskElement.h>
  23. namespace Web::Painting {
  24. static void paint_node(Paintable const& paintable, PaintContext& context, PaintPhase phase)
  25. {
  26. paintable.before_paint(context, phase);
  27. paintable.paint(context, phase);
  28. paintable.after_paint(context, phase);
  29. }
  30. StackingContext::StackingContext(Paintable& paintable, StackingContext* parent, size_t index_in_tree_order)
  31. : m_paintable(paintable)
  32. , m_transform(combine_transformations(paintable.computed_values().transformations()))
  33. , m_transform_origin(compute_transform_origin())
  34. , m_parent(parent)
  35. , m_index_in_tree_order(index_in_tree_order)
  36. {
  37. VERIFY(m_parent != this);
  38. if (m_parent)
  39. m_parent->m_children.append(this);
  40. }
  41. void StackingContext::sort()
  42. {
  43. quick_sort(m_children, [](auto& a, auto& b) {
  44. auto a_z_index = a->paintable().computed_values().z_index().value_or(0);
  45. auto b_z_index = b->paintable().computed_values().z_index().value_or(0);
  46. if (a_z_index == b_z_index)
  47. return a->m_index_in_tree_order < b->m_index_in_tree_order;
  48. return a_z_index < b_z_index;
  49. });
  50. for (auto* child : m_children)
  51. child->sort();
  52. }
  53. static PaintPhase to_paint_phase(StackingContext::StackingContextPaintPhase phase)
  54. {
  55. // There are not a fully correct mapping since some stacking context phases are combined.
  56. switch (phase) {
  57. case StackingContext::StackingContextPaintPhase::Floats:
  58. case StackingContext::StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
  59. case StackingContext::StackingContextPaintPhase::BackgroundAndBorders:
  60. return PaintPhase::Background;
  61. case StackingContext::StackingContextPaintPhase::Foreground:
  62. return PaintPhase::Foreground;
  63. case StackingContext::StackingContextPaintPhase::FocusAndOverlay:
  64. return PaintPhase::Overlay;
  65. default:
  66. VERIFY_NOT_REACHED();
  67. }
  68. }
  69. void StackingContext::paint_node_as_stacking_context(Paintable const& paintable, PaintContext& context)
  70. {
  71. paint_node(paintable, context, PaintPhase::Background);
  72. paint_node(paintable, context, PaintPhase::Border);
  73. paint_descendants(context, paintable, StackingContextPaintPhase::BackgroundAndBorders);
  74. paint_descendants(context, paintable, StackingContextPaintPhase::Floats);
  75. paint_descendants(context, paintable, StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
  76. paint_node(paintable, context, PaintPhase::Foreground);
  77. paint_descendants(context, paintable, StackingContextPaintPhase::Foreground);
  78. paint_node(paintable, context, PaintPhase::Outline);
  79. paint_node(paintable, context, PaintPhase::Overlay);
  80. paint_descendants(context, paintable, StackingContextPaintPhase::FocusAndOverlay);
  81. }
  82. void StackingContext::paint_descendants(PaintContext& context, Paintable const& paintable, StackingContextPaintPhase phase)
  83. {
  84. paintable.apply_scroll_offset(context, to_paint_phase(phase));
  85. paintable.before_children_paint(context, to_paint_phase(phase));
  86. paintable.apply_clip_overflow_rect(context, to_paint_phase(phase));
  87. paintable.for_each_child([&context, phase](auto& child) {
  88. auto* stacking_context = child.stacking_context();
  89. auto const& z_index = child.computed_values().z_index();
  90. // NOTE: Grid specification https://www.w3.org/TR/css-grid-2/#z-order says that grid items should be treated
  91. // the same way as CSS2 defines for inline-blocks:
  92. // "For each one of these, treat the element as if it created a new stacking context, but any positioned
  93. // descendants and descendants which actually create a new stacking context should be considered part of
  94. // the parent stacking context, not this new one."
  95. auto should_be_treated_as_stacking_context = child.layout_node().is_grid_item() && !z_index.has_value();
  96. if (should_be_treated_as_stacking_context) {
  97. // FIXME: This may not be fully correct with respect to the paint phases.
  98. if (phase == StackingContextPaintPhase::Foreground)
  99. paint_node_as_stacking_context(child, context);
  100. return;
  101. }
  102. if (stacking_context && z_index.has_value())
  103. return;
  104. if (child.is_positioned() && !z_index.has_value())
  105. return;
  106. if (stacking_context) {
  107. // FIXME: This may not be fully correct with respect to the paint phases.
  108. if (phase == StackingContextPaintPhase::Foreground) {
  109. paint_child(context, *stacking_context);
  110. }
  111. // Note: Don't further recurse into descendants as paint_child() will do that.
  112. return;
  113. }
  114. bool child_is_inline_or_replaced = child.is_inline() || is<Layout::ReplacedBox>(child);
  115. switch (phase) {
  116. case StackingContextPaintPhase::BackgroundAndBorders:
  117. if (!child_is_inline_or_replaced && !child.is_floating()) {
  118. paint_node(child, context, PaintPhase::Background);
  119. bool is_table_with_collapsed_borders = child.display().is_table_inside() && child.computed_values().border_collapse() == CSS::BorderCollapse::Collapse;
  120. if (!child.display().is_table_cell() && !is_table_with_collapsed_borders)
  121. paint_node(child, context, PaintPhase::Border);
  122. paint_descendants(context, child, phase);
  123. if (child.display().is_table_inside() || child.computed_values().border_collapse() == CSS::BorderCollapse::Collapse) {
  124. paint_table_borders(context, verify_cast<PaintableBox>(child));
  125. }
  126. }
  127. break;
  128. case StackingContextPaintPhase::Floats:
  129. if (child.is_floating()) {
  130. paint_node(child, context, PaintPhase::Background);
  131. paint_node(child, context, PaintPhase::Border);
  132. paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
  133. }
  134. paint_descendants(context, child, phase);
  135. break;
  136. case StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
  137. if (child_is_inline_or_replaced) {
  138. paint_node(child, context, PaintPhase::Background);
  139. paint_node(child, context, PaintPhase::Border);
  140. if (child.display().is_table_inside() && child.computed_values().border_collapse() == CSS::BorderCollapse::Separate)
  141. paint_table_borders(context, verify_cast<PaintableBox>(child));
  142. paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
  143. }
  144. paint_descendants(context, child, phase);
  145. break;
  146. case StackingContextPaintPhase::Foreground:
  147. paint_node(child, context, PaintPhase::Foreground);
  148. paint_descendants(context, child, phase);
  149. break;
  150. case StackingContextPaintPhase::FocusAndOverlay:
  151. paint_node(child, context, PaintPhase::Outline);
  152. paint_node(child, context, PaintPhase::Overlay);
  153. paint_descendants(context, child, phase);
  154. break;
  155. }
  156. });
  157. paintable.clear_clip_overflow_rect(context, to_paint_phase(phase));
  158. paintable.after_children_paint(context, to_paint_phase(phase));
  159. paintable.reset_scroll_offset(context, to_paint_phase(phase));
  160. }
  161. void StackingContext::paint_child(PaintContext& context, StackingContext const& child)
  162. {
  163. auto parent_paintable = child.paintable().parent();
  164. if (parent_paintable)
  165. parent_paintable->before_children_paint(context, PaintPhase::Foreground);
  166. PaintableBox const* nearest_scrollable_ancestor = child.paintable().nearest_scrollable_ancestor_within_stacking_context();
  167. if (nearest_scrollable_ancestor)
  168. nearest_scrollable_ancestor->apply_scroll_offset(context, PaintPhase::Foreground);
  169. child.paint(context);
  170. if (nearest_scrollable_ancestor)
  171. nearest_scrollable_ancestor->reset_scroll_offset(context, PaintPhase::Foreground);
  172. if (parent_paintable)
  173. parent_paintable->after_children_paint(context, PaintPhase::Foreground);
  174. }
  175. void StackingContext::paint_internal(PaintContext& context) const
  176. {
  177. // For a more elaborate description of the algorithm, see CSS 2.1 Appendix E
  178. // Draw the background and borders for the context root (steps 1, 2)
  179. paint_node(paintable(), context, PaintPhase::Background);
  180. paint_node(paintable(), context, PaintPhase::Border);
  181. // Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order
  182. // (most negative first) then tree order. (step 3)
  183. // NOTE: This doesn't check if a descendant is positioned as modern CSS allows for alternative methods to establish stacking contexts.
  184. for (auto* child : m_children) {
  185. if (child->paintable().computed_values().z_index().has_value() && child->paintable().computed_values().z_index().value() < 0)
  186. paint_child(context, *child);
  187. }
  188. // Draw the background and borders for block-level children (step 4)
  189. paint_descendants(context, paintable(), StackingContextPaintPhase::BackgroundAndBorders);
  190. // Draw the non-positioned floats (step 5)
  191. paint_descendants(context, paintable(), StackingContextPaintPhase::Floats);
  192. // Draw inline content, replaced content, etc. (steps 6, 7)
  193. paint_descendants(context, paintable(), StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
  194. paint_node(paintable(), context, PaintPhase::Foreground);
  195. paint_descendants(context, paintable(), StackingContextPaintPhase::Foreground);
  196. // Draw positioned descendants with z-index `0` or `auto` in tree order. (step 8)
  197. // FIXME: There's more to this step that we have yet to understand and implement.
  198. paintable().for_each_in_subtree([&context](Paintable const& paintable) {
  199. auto const& z_index = paintable.computed_values().z_index();
  200. if (!paintable.is_positioned() || (z_index.has_value() && z_index.value() != 0)) {
  201. return paintable.stacking_context()
  202. ? TraversalDecision::SkipChildrenAndContinue
  203. : TraversalDecision::Continue;
  204. }
  205. // Apply scroll offset of nearest scrollable ancestor before painting the positioned descendant.
  206. PaintableBox const* nearest_scrollable_ancestor = paintable.nearest_scrollable_ancestor_within_stacking_context();
  207. if (nearest_scrollable_ancestor)
  208. nearest_scrollable_ancestor->apply_scroll_offset(context, PaintPhase::Foreground);
  209. // At this point, `paintable_box` is a positioned descendant with z-index: auto.
  210. // FIXME: This is basically duplicating logic found elsewhere in this same function. Find a way to make this more elegant.
  211. auto exit_decision = TraversalDecision::Continue;
  212. auto* parent_paintable = paintable.parent();
  213. if (parent_paintable)
  214. parent_paintable->before_children_paint(context, PaintPhase::Foreground);
  215. auto containing_block = paintable.containing_block();
  216. auto* containing_block_paintable = containing_block ? containing_block->paintable() : nullptr;
  217. if (containing_block_paintable)
  218. containing_block_paintable->apply_clip_overflow_rect(context, PaintPhase::Foreground);
  219. if (auto* child = paintable.stacking_context()) {
  220. paint_child(context, *child);
  221. exit_decision = TraversalDecision::SkipChildrenAndContinue;
  222. } else {
  223. paint_node_as_stacking_context(paintable, context);
  224. }
  225. if (parent_paintable)
  226. parent_paintable->after_children_paint(context, PaintPhase::Foreground);
  227. if (containing_block_paintable)
  228. containing_block_paintable->clear_clip_overflow_rect(context, PaintPhase::Foreground);
  229. if (nearest_scrollable_ancestor)
  230. nearest_scrollable_ancestor->reset_scroll_offset(context, PaintPhase::Foreground);
  231. return exit_decision;
  232. });
  233. // Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order
  234. // (smallest first) then tree order. (Step 9)
  235. // NOTE: This doesn't check if a descendant is positioned as modern CSS allows for alternative methods to establish stacking contexts.
  236. for (auto* child : m_children) {
  237. PaintableBox const* nearest_scrollable_ancestor = child->paintable().nearest_scrollable_ancestor_within_stacking_context();
  238. if (nearest_scrollable_ancestor)
  239. nearest_scrollable_ancestor->apply_scroll_offset(context, PaintPhase::Foreground);
  240. auto containing_block = child->paintable().containing_block();
  241. auto const* containing_block_paintable = containing_block ? containing_block->paintable() : nullptr;
  242. if (containing_block_paintable)
  243. containing_block_paintable->apply_clip_overflow_rect(context, PaintPhase::Foreground);
  244. if (child->paintable().computed_values().z_index().has_value() && child->paintable().computed_values().z_index().value() >= 1)
  245. paint_child(context, *child);
  246. if (containing_block_paintable)
  247. containing_block_paintable->clear_clip_overflow_rect(context, PaintPhase::Foreground);
  248. if (nearest_scrollable_ancestor)
  249. nearest_scrollable_ancestor->reset_scroll_offset(context, PaintPhase::Foreground);
  250. }
  251. paint_node(paintable(), context, PaintPhase::Outline);
  252. if (context.should_paint_overlay()) {
  253. paint_node(paintable(), context, PaintPhase::Overlay);
  254. paint_descendants(context, paintable(), StackingContextPaintPhase::FocusAndOverlay);
  255. }
  256. }
  257. Gfx::FloatMatrix4x4 StackingContext::combine_transformations(Vector<CSS::Transformation> const& transformations) const
  258. {
  259. // https://drafts.csswg.org/css-transforms-1/#WD20171130 says:
  260. // "No transform on non-replaced inline boxes, table-column boxes, and table-column-group boxes."
  261. // and https://www.w3.org/TR/css-transforms-2/ does not say anything about what to do with inline boxes.
  262. auto matrix = Gfx::FloatMatrix4x4::identity();
  263. if (paintable().is_paintable_box()) {
  264. for (auto const& transform : transformations)
  265. matrix = matrix * transform.to_matrix(paintable_box());
  266. return matrix;
  267. }
  268. return matrix;
  269. }
  270. // FIXME: This extracts the affine 2D part of the full transformation matrix.
  271. // Use the whole matrix when we get better transformation support in LibGfx or use LibGL for drawing the bitmap
  272. Gfx::AffineTransform StackingContext::affine_transform_matrix() const
  273. {
  274. return Gfx::extract_2d_affine_transform(m_transform);
  275. }
  276. static Gfx::FloatMatrix4x4 matrix_with_scaled_translation(Gfx::FloatMatrix4x4 matrix, float scale)
  277. {
  278. auto* m = matrix.elements();
  279. m[0][3] *= scale;
  280. m[1][3] *= scale;
  281. m[2][3] *= scale;
  282. return matrix;
  283. }
  284. void StackingContext::paint(PaintContext& context) const
  285. {
  286. auto opacity = paintable().computed_values().opacity();
  287. if (opacity == 0.0f)
  288. return;
  289. RecordingPainterStateSaver saver(context.recording_painter());
  290. auto to_device_pixels_scale = float(context.device_pixels_per_css_pixel());
  291. Gfx::IntRect source_paintable_rect;
  292. if (paintable().is_paintable_box()) {
  293. source_paintable_rect = context.enclosing_device_rect(paintable_box().absolute_paint_rect()).to_type<int>();
  294. } else if (paintable().is_inline()) {
  295. source_paintable_rect = context.enclosing_device_rect(inline_paintable().bounding_rect()).to_type<int>();
  296. } else {
  297. VERIFY_NOT_REACHED();
  298. }
  299. RecordingPainter::PushStackingContextParams push_stacking_context_params {
  300. .opacity = opacity,
  301. .is_fixed_position = paintable().is_fixed_position(),
  302. .source_paintable_rect = source_paintable_rect,
  303. .image_rendering = paintable().computed_values().image_rendering(),
  304. .transform = {
  305. .origin = transform_origin().scaled(to_device_pixels_scale),
  306. .matrix = matrix_with_scaled_translation(transform_matrix(), to_device_pixels_scale),
  307. },
  308. };
  309. if (paintable().is_paintable_box()) {
  310. if (auto masking_area = paintable_box().get_masking_area(); masking_area.has_value()) {
  311. if (masking_area->is_empty())
  312. return;
  313. auto mask_bitmap = paintable_box().calculate_mask(context, *masking_area);
  314. if (mask_bitmap) {
  315. auto source_paintable_rect = context.enclosing_device_rect(*masking_area).to_type<int>();
  316. push_stacking_context_params.source_paintable_rect = source_paintable_rect;
  317. push_stacking_context_params.mask = StackingContextMask {
  318. .mask_bitmap = mask_bitmap.release_nonnull(),
  319. .mask_kind = *paintable_box().get_mask_type()
  320. };
  321. }
  322. }
  323. }
  324. context.recording_painter().push_stacking_context(push_stacking_context_params);
  325. paint_internal(context);
  326. context.recording_painter().pop_stacking_context();
  327. }
  328. Gfx::FloatPoint StackingContext::compute_transform_origin() const
  329. {
  330. if (!paintable().is_paintable_box())
  331. return {};
  332. auto style_value = paintable().computed_values().transform_origin();
  333. // FIXME: respect transform-box property
  334. auto reference_box = paintable_box().absolute_border_box_rect();
  335. auto x = reference_box.left() + style_value.x.to_px(paintable().layout_node(), reference_box.width());
  336. auto y = reference_box.top() + style_value.y.to_px(paintable().layout_node(), reference_box.height());
  337. return { x.to_float(), y.to_float() };
  338. }
  339. template<typename Callback>
  340. static TraversalDecision for_each_in_inclusive_subtree_within_same_stacking_context_in_reverse(Paintable const& paintable, Callback callback)
  341. {
  342. if (paintable.stacking_context()) {
  343. // Note: Include the stacking context (so we can hit test it), but don't recurse into it.
  344. if (auto decision = callback(paintable); decision != TraversalDecision::Continue)
  345. return decision;
  346. return TraversalDecision::SkipChildrenAndContinue;
  347. }
  348. for (auto* child = paintable.last_child(); child; child = child->previous_sibling()) {
  349. if (for_each_in_inclusive_subtree_within_same_stacking_context_in_reverse(*child, callback) == TraversalDecision::Break)
  350. return TraversalDecision::Break;
  351. }
  352. if (auto decision = callback(paintable); decision != TraversalDecision::Continue)
  353. return decision;
  354. return TraversalDecision::Continue;
  355. }
  356. template<typename Callback>
  357. static TraversalDecision for_each_in_subtree_within_same_stacking_context_in_reverse(Paintable const& paintable, Callback callback)
  358. {
  359. for (auto* child = paintable.last_child(); child; child = child->previous_sibling()) {
  360. if (for_each_in_inclusive_subtree_within_same_stacking_context_in_reverse(*child, callback) == TraversalDecision::Break)
  361. return TraversalDecision::Break;
  362. }
  363. return TraversalDecision::Continue;
  364. }
  365. Optional<HitTestResult> StackingContext::hit_test(CSSPixelPoint position, HitTestType type) const
  366. {
  367. if (!paintable().is_visible())
  368. return {};
  369. auto transform_origin = this->transform_origin().to_type<CSSPixels>();
  370. // NOTE: This CSSPixels -> Float -> CSSPixels conversion is because we can't AffineTransform::map() a CSSPixelPoint.
  371. Gfx::FloatPoint offset_position {
  372. (position.x() - transform_origin.x()).to_float(),
  373. (position.y() - transform_origin.y()).to_float()
  374. };
  375. auto transformed_position = affine_transform_matrix().inverse().value_or({}).map(offset_position).to_type<CSSPixels>() + transform_origin;
  376. if (paintable().is_fixed_position()) {
  377. auto scroll_offset = paintable().document().navigable()->viewport_scroll_offset();
  378. transformed_position.translate_by(-scroll_offset);
  379. }
  380. // FIXME: Support more overflow variations.
  381. if (paintable().computed_values().overflow_x() == CSS::Overflow::Hidden && paintable().computed_values().overflow_y() == CSS::Overflow::Hidden) {
  382. if (paintable().is_paintable_box()) {
  383. if (!paintable_box().absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  384. return {};
  385. }
  386. }
  387. // NOTE: Hit testing basically happens in reverse painting order.
  388. // https://www.w3.org/TR/CSS22/visuren.html#z-index
  389. // 7. the child stacking contexts with positive stack levels (least positive first).
  390. // NOTE: Hit testing follows reverse painting order, that's why the conditions here are reversed.
  391. for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
  392. auto const& child = *m_children[i];
  393. if (child.paintable().computed_values().z_index().value_or(0) <= 0)
  394. break;
  395. auto result = child.hit_test(transformed_position, type);
  396. if (result.has_value() && result->paintable->visible_for_hit_testing())
  397. return result;
  398. }
  399. // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  400. Optional<HitTestResult> result;
  401. for_each_in_subtree_within_same_stacking_context_in_reverse(paintable(), [&](Paintable const& paintable) {
  402. if (!paintable.is_paintable_box())
  403. return TraversalDecision::Continue;
  404. auto const& paintable_box = verify_cast<PaintableBox>(paintable);
  405. // FIXME: Support more overflow variations.
  406. if (paintable_box.computed_values().overflow_x() == CSS::Overflow::Hidden && paintable_box.computed_values().overflow_y() == CSS::Overflow::Hidden) {
  407. if (!paintable_box.absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  408. return TraversalDecision::SkipChildrenAndContinue;
  409. }
  410. auto const& z_index = paintable_box.computed_values().z_index();
  411. if (z_index.value_or(0) == 0 && paintable_box.is_positioned() && !paintable_box.stacking_context()) {
  412. auto candidate = paintable_box.hit_test(transformed_position, type);
  413. if (candidate.has_value() && candidate->paintable->visible_for_hit_testing()) {
  414. result = move(candidate);
  415. return TraversalDecision::Break;
  416. }
  417. }
  418. if (paintable_box.stacking_context()) {
  419. if (z_index.value_or(0) == 0) {
  420. auto candidate = paintable_box.stacking_context()->hit_test(transformed_position, type);
  421. if (candidate.has_value() && candidate->paintable->visible_for_hit_testing()) {
  422. result = move(candidate);
  423. return TraversalDecision::Break;
  424. }
  425. }
  426. }
  427. return TraversalDecision::Continue;
  428. });
  429. if (result.has_value())
  430. return result;
  431. // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  432. if (paintable().layout_node().children_are_inline() && is<Layout::BlockContainer>(paintable().layout_node())) {
  433. auto result = paintable_box().hit_test(transformed_position, type);
  434. if (result.has_value() && result->paintable->visible_for_hit_testing())
  435. return result;
  436. }
  437. // 4. the non-positioned floats.
  438. for_each_in_subtree_within_same_stacking_context_in_reverse(paintable(), [&](Paintable const& paintable) {
  439. if (!paintable.is_paintable_box())
  440. return TraversalDecision::Continue;
  441. auto const& paintable_box = verify_cast<PaintableBox>(paintable);
  442. // FIXME: Support more overflow variations.
  443. if (paintable_box.computed_values().overflow_x() == CSS::Overflow::Hidden && paintable_box.computed_values().overflow_y() == CSS::Overflow::Hidden) {
  444. if (!paintable_box.absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  445. return TraversalDecision::SkipChildrenAndContinue;
  446. }
  447. if (paintable_box.is_floating()) {
  448. if (auto candidate = paintable_box.hit_test(transformed_position, type); candidate.has_value()) {
  449. result = move(candidate);
  450. return TraversalDecision::Break;
  451. }
  452. }
  453. return TraversalDecision::Continue;
  454. });
  455. if (result.has_value() && result->paintable->visible_for_hit_testing())
  456. return result;
  457. // 3. the in-flow, non-inline-level, non-positioned descendants.
  458. if (!paintable().layout_node().children_are_inline()) {
  459. for_each_in_subtree_within_same_stacking_context_in_reverse(paintable(), [&](Paintable const& paintable) {
  460. if (!paintable.is_paintable_box())
  461. return TraversalDecision::Continue;
  462. auto const& paintable_box = verify_cast<PaintableBox>(paintable);
  463. // FIXME: Support more overflow variations.
  464. if (paintable_box.computed_values().overflow_x() == CSS::Overflow::Hidden && paintable_box.computed_values().overflow_y() == CSS::Overflow::Hidden) {
  465. if (!paintable_box.absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  466. return TraversalDecision::SkipChildrenAndContinue;
  467. }
  468. if (!paintable_box.is_absolutely_positioned() && !paintable_box.is_floating()) {
  469. if (auto candidate = paintable_box.hit_test(transformed_position, type); candidate.has_value()) {
  470. result = move(candidate);
  471. return TraversalDecision::Break;
  472. }
  473. }
  474. return TraversalDecision::Continue;
  475. });
  476. if (result.has_value() && result->paintable->visible_for_hit_testing())
  477. return result;
  478. }
  479. // 2. the child stacking contexts with negative stack levels (most negative first).
  480. // NOTE: Hit testing follows reverse painting order, that's why the conditions here are reversed.
  481. for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
  482. auto const& child = *m_children[i];
  483. if (child.paintable().computed_values().z_index().value_or(0) >= 0)
  484. break;
  485. auto result = child.hit_test(transformed_position, type);
  486. if (result.has_value() && result->paintable->visible_for_hit_testing())
  487. return result;
  488. }
  489. // 1. the background and borders of the element forming the stacking context.
  490. if (paintable().is_paintable_box()) {
  491. if (paintable_box().absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y())) {
  492. return HitTestResult {
  493. .paintable = const_cast<PaintableBox&>(paintable_box()),
  494. };
  495. }
  496. }
  497. return {};
  498. }
  499. void StackingContext::dump(int indent) const
  500. {
  501. StringBuilder builder;
  502. for (int i = 0; i < indent; ++i)
  503. builder.append(' ');
  504. CSSPixelRect rect;
  505. if (paintable().is_paintable_box()) {
  506. rect = paintable_box().absolute_rect();
  507. } else if (paintable().is_inline_paintable()) {
  508. rect = inline_paintable().bounding_rect();
  509. } else {
  510. VERIFY_NOT_REACHED();
  511. }
  512. builder.appendff("SC for {} {} [children: {}] (z-index: ", paintable().layout_node().debug_description(), rect, m_children.size());
  513. if (paintable().computed_values().z_index().has_value())
  514. builder.appendff("{}", paintable().computed_values().z_index().value());
  515. else
  516. builder.append("auto"sv);
  517. builder.append(')');
  518. auto affine_transform = affine_transform_matrix();
  519. if (!affine_transform.is_identity()) {
  520. builder.appendff(", transform: {}", affine_transform);
  521. }
  522. dbgln("{}", builder.string_view());
  523. for (auto& child : m_children)
  524. child->dump(indent + 1);
  525. }
  526. }