StackingContext.cpp 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594
  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/ExtraMathConstants.h>
  9. #include <AK/QuickSort.h>
  10. #include <AK/StringBuilder.h>
  11. #include <LibGfx/AffineTransform.h>
  12. #include <LibGfx/Matrix4x4.h>
  13. #include <LibGfx/Painter.h>
  14. #include <LibGfx/Rect.h>
  15. #include <LibWeb/Layout/Box.h>
  16. #include <LibWeb/Layout/InitialContainingBlock.h>
  17. #include <LibWeb/Layout/ReplacedBox.h>
  18. #include <LibWeb/Painting/PaintableBox.h>
  19. #include <LibWeb/Painting/StackingContext.h>
  20. namespace Web::Painting {
  21. static void paint_node(Layout::Node const& layout_node, PaintContext& context, PaintPhase phase)
  22. {
  23. if (auto const* paintable = layout_node.paintable())
  24. paintable->paint(context, phase);
  25. }
  26. StackingContext::StackingContext(Layout::Box& box, StackingContext* parent)
  27. : m_box(box)
  28. , m_transform(combine_transformations(m_box.computed_values().transformations()))
  29. , m_transform_origin(compute_transform_origin())
  30. , m_parent(parent)
  31. {
  32. VERIFY(m_parent != this);
  33. if (m_parent)
  34. m_parent->m_children.append(this);
  35. }
  36. void StackingContext::sort()
  37. {
  38. quick_sort(m_children, [](auto& a, auto& b) {
  39. auto a_z_index = a->m_box.computed_values().z_index().value_or(0);
  40. auto b_z_index = b->m_box.computed_values().z_index().value_or(0);
  41. if (a_z_index == b_z_index)
  42. return a->m_box.is_before(b->m_box);
  43. return a_z_index < b_z_index;
  44. });
  45. for (auto* child : m_children)
  46. child->sort();
  47. }
  48. static PaintPhase to_paint_phase(StackingContext::StackingContextPaintPhase phase)
  49. {
  50. // There are not a fully correct mapping since some stacking context phases are combined.
  51. switch (phase) {
  52. case StackingContext::StackingContextPaintPhase::Floats:
  53. case StackingContext::StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
  54. case StackingContext::StackingContextPaintPhase::BackgroundAndBorders:
  55. return PaintPhase::Background;
  56. case StackingContext::StackingContextPaintPhase::Foreground:
  57. return PaintPhase::Foreground;
  58. case StackingContext::StackingContextPaintPhase::FocusAndOverlay:
  59. return PaintPhase::Overlay;
  60. default:
  61. VERIFY_NOT_REACHED();
  62. }
  63. }
  64. void StackingContext::paint_descendants(PaintContext& context, Layout::Node const& box, StackingContextPaintPhase phase) const
  65. {
  66. if (auto* paintable = box.paintable())
  67. paintable->before_children_paint(context, to_paint_phase(phase));
  68. box.for_each_child([&](auto& child) {
  69. // If `child` establishes its own stacking context, skip over it.
  70. if (is<Layout::Box>(child) && child.paintable() && static_cast<Layout::Box const&>(child).paint_box()->stacking_context())
  71. return;
  72. // If `child` is positioned with a z-index of `0` or `auto`, skip over it.
  73. if (child.is_positioned()) {
  74. auto const& z_index = child.computed_values().z_index();
  75. if (!z_index.has_value() || z_index.value() == 0)
  76. return;
  77. }
  78. bool child_is_inline_or_replaced = child.is_inline() || is<Layout::ReplacedBox>(child);
  79. switch (phase) {
  80. case StackingContextPaintPhase::BackgroundAndBorders:
  81. if (!child_is_inline_or_replaced && !child.is_floating()) {
  82. paint_node(child, context, PaintPhase::Background);
  83. paint_node(child, context, PaintPhase::Border);
  84. paint_descendants(context, child, phase);
  85. }
  86. break;
  87. case StackingContextPaintPhase::Floats:
  88. if (child.is_floating()) {
  89. paint_node(child, context, PaintPhase::Background);
  90. paint_node(child, context, PaintPhase::Border);
  91. paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
  92. }
  93. paint_descendants(context, child, phase);
  94. break;
  95. case StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
  96. if (child_is_inline_or_replaced) {
  97. paint_node(child, context, PaintPhase::Background);
  98. paint_node(child, context, PaintPhase::Border);
  99. paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
  100. }
  101. paint_descendants(context, child, phase);
  102. break;
  103. case StackingContextPaintPhase::Foreground:
  104. paint_node(child, context, PaintPhase::Foreground);
  105. paint_descendants(context, child, phase);
  106. break;
  107. case StackingContextPaintPhase::FocusAndOverlay:
  108. if (context.has_focus()) {
  109. paint_node(child, context, PaintPhase::FocusOutline);
  110. }
  111. paint_node(child, context, PaintPhase::Overlay);
  112. paint_descendants(context, child, phase);
  113. break;
  114. }
  115. });
  116. if (auto* paintable = box.paintable())
  117. paintable->after_children_paint(context, to_paint_phase(phase));
  118. }
  119. void StackingContext::paint_internal(PaintContext& context) const
  120. {
  121. // For a more elaborate description of the algorithm, see CSS 2.1 Appendix E
  122. // Draw the background and borders for the context root (steps 1, 2)
  123. paint_node(m_box, context, PaintPhase::Background);
  124. paint_node(m_box, context, PaintPhase::Border);
  125. auto paint_child = [&](auto* child) {
  126. auto parent = child->m_box.parent();
  127. auto* paintable = parent ? parent->paintable() : nullptr;
  128. if (paintable)
  129. paintable->before_children_paint(context, PaintPhase::Foreground);
  130. child->paint(context);
  131. if (paintable)
  132. paintable->after_children_paint(context, PaintPhase::Foreground);
  133. };
  134. // Draw positioned descendants with negative z-indices (step 3)
  135. for (auto* child : m_children) {
  136. if (child->m_box.computed_values().z_index().has_value() && child->m_box.computed_values().z_index().value() < 0)
  137. paint_child(child);
  138. }
  139. // Draw the background and borders for block-level children (step 4)
  140. paint_descendants(context, m_box, StackingContextPaintPhase::BackgroundAndBorders);
  141. // Draw the non-positioned floats (step 5)
  142. paint_descendants(context, m_box, StackingContextPaintPhase::Floats);
  143. // Draw inline content, replaced content, etc. (steps 6, 7)
  144. paint_descendants(context, m_box, StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
  145. paint_node(m_box, context, PaintPhase::Foreground);
  146. paint_descendants(context, m_box, StackingContextPaintPhase::Foreground);
  147. // Draw positioned descendants with z-index `0` or `auto` in tree order. (step 8)
  148. // NOTE: Non-positioned descendants that establish stacking contexts with z-index `0` or `auto` are also painted here.
  149. // FIXME: There's more to this step that we have yet to understand and implement.
  150. m_box.paint_box()->for_each_in_subtree_of_type<PaintableBox>([&](PaintableBox const& paint_box) {
  151. auto const& z_index = paint_box.computed_values().z_index();
  152. if (auto* child = paint_box.stacking_context()) {
  153. if (!z_index.has_value() || z_index.value() == 0)
  154. paint_child(child);
  155. return TraversalDecision::SkipChildrenAndContinue;
  156. }
  157. if (z_index.has_value() && z_index.value() != 0)
  158. return TraversalDecision::Continue;
  159. if (!paint_box.layout_box().is_positioned())
  160. return TraversalDecision::Continue;
  161. // At this point, `paint_box` is a positioned descendant with z-index: auto
  162. // but no stacking context of its own.
  163. // FIXME: This is basically duplicating logic found elsewhere in this same function. Find a way to make this more elegant.
  164. auto parent = paint_box.layout_node().parent();
  165. auto* paintable = parent ? parent->paintable() : nullptr;
  166. if (paintable)
  167. paintable->before_children_paint(context, PaintPhase::Foreground);
  168. paint_node(paint_box.layout_box(), context, PaintPhase::Background);
  169. paint_node(paint_box.layout_box(), context, PaintPhase::Border);
  170. paint_descendants(context, paint_box.layout_box(), StackingContextPaintPhase::BackgroundAndBorders);
  171. paint_descendants(context, paint_box.layout_box(), StackingContextPaintPhase::Floats);
  172. paint_descendants(context, paint_box.layout_box(), StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
  173. paint_node(paint_box.layout_box(), context, PaintPhase::Foreground);
  174. paint_descendants(context, paint_box.layout_box(), StackingContextPaintPhase::Foreground);
  175. paint_node(paint_box.layout_box(), context, PaintPhase::FocusOutline);
  176. paint_node(paint_box.layout_box(), context, PaintPhase::Overlay);
  177. paint_descendants(context, paint_box.layout_box(), StackingContextPaintPhase::FocusAndOverlay);
  178. if (paintable)
  179. paintable->after_children_paint(context, PaintPhase::Foreground);
  180. return TraversalDecision::Continue;
  181. });
  182. // Draw other positioned descendants (step 9)
  183. for (auto* child : m_children) {
  184. if (child->m_box.computed_values().z_index().has_value() && child->m_box.computed_values().z_index().value() >= 1)
  185. paint_child(child);
  186. }
  187. paint_node(m_box, context, PaintPhase::FocusOutline);
  188. paint_node(m_box, context, PaintPhase::Overlay);
  189. paint_descendants(context, m_box, StackingContextPaintPhase::FocusAndOverlay);
  190. }
  191. Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformation const& transformation) const
  192. {
  193. auto count = transformation.values.size();
  194. auto value = [this, transformation](size_t index, Optional<CSS::Length const&> reference_length = {}) -> float {
  195. return transformation.values[index].visit(
  196. [this, reference_length](CSS::LengthPercentage const& value) {
  197. if (reference_length.has_value()) {
  198. return value.resolved(m_box, reference_length.value()).to_px(m_box);
  199. }
  200. return value.length().to_px(m_box);
  201. },
  202. [](CSS::Angle const& value) {
  203. return value.to_degrees() * static_cast<float>(M_DEG2RAD);
  204. },
  205. [](float value) {
  206. return value;
  207. });
  208. };
  209. auto reference_box = paintable().absolute_rect();
  210. auto width = CSS::Length::make_px(reference_box.width());
  211. auto height = CSS::Length::make_px(reference_box.height());
  212. switch (transformation.function) {
  213. case CSS::TransformFunction::Matrix:
  214. if (count == 6)
  215. return Gfx::FloatMatrix4x4(value(0), value(2), 0, value(4),
  216. value(1), value(3), 0, value(5),
  217. 0, 0, 1, 0,
  218. 0, 0, 0, 1);
  219. break;
  220. case CSS::TransformFunction::Matrix3d:
  221. if (count == 16)
  222. return Gfx::FloatMatrix4x4(value(0), value(4), value(8), value(12),
  223. value(1), value(5), value(9), value(13),
  224. value(2), value(6), value(10), value(14),
  225. value(3), value(7), value(11), value(15));
  226. break;
  227. case CSS::TransformFunction::Translate:
  228. if (count == 1)
  229. return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
  230. 0, 1, 0, 0,
  231. 0, 0, 1, 0,
  232. 0, 0, 0, 1);
  233. if (count == 2)
  234. return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
  235. 0, 1, 0, value(1, height),
  236. 0, 0, 1, 0,
  237. 0, 0, 0, 1);
  238. break;
  239. case CSS::TransformFunction::Translate3d:
  240. return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
  241. 0, 1, 0, value(1, height),
  242. 0, 0, 1, value(2),
  243. 0, 0, 0, 1);
  244. break;
  245. case CSS::TransformFunction::TranslateX:
  246. if (count == 1)
  247. return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
  248. 0, 1, 0, 0,
  249. 0, 0, 1, 0,
  250. 0, 0, 0, 1);
  251. break;
  252. case CSS::TransformFunction::TranslateY:
  253. if (count == 1)
  254. return Gfx::FloatMatrix4x4(1, 0, 0, 0,
  255. 0, 1, 0, value(0, height),
  256. 0, 0, 1, 0,
  257. 0, 0, 0, 1);
  258. break;
  259. case CSS::TransformFunction::Scale:
  260. if (count == 1)
  261. return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
  262. 0, value(0), 0, 0,
  263. 0, 0, 1, 0,
  264. 0, 0, 0, 1);
  265. if (count == 2)
  266. return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
  267. 0, value(1), 0, 0,
  268. 0, 0, 1, 0,
  269. 0, 0, 0, 1);
  270. break;
  271. case CSS::TransformFunction::ScaleX:
  272. if (count == 1)
  273. return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
  274. 0, 1, 0, 0,
  275. 0, 0, 1, 0,
  276. 0, 0, 0, 1);
  277. break;
  278. case CSS::TransformFunction::ScaleY:
  279. if (count == 1)
  280. return Gfx::FloatMatrix4x4(1, 0, 0, 0,
  281. 0, value(0), 0, 0,
  282. 0, 0, 1, 0,
  283. 0, 0, 0, 1);
  284. break;
  285. case CSS::TransformFunction::RotateX:
  286. if (count == 1)
  287. return Gfx::rotation_matrix({ 1.0f, 0.0f, 0.0f }, value(0));
  288. break;
  289. case CSS::TransformFunction::RotateY:
  290. if (count == 1)
  291. return Gfx::rotation_matrix({ 0.0f, 1.0f, 0.0f }, value(0));
  292. break;
  293. case CSS::TransformFunction::Rotate:
  294. case CSS::TransformFunction::RotateZ:
  295. if (count == 1)
  296. return Gfx::rotation_matrix({ 0.0f, 0.0f, 1.0f }, value(0));
  297. break;
  298. default:
  299. dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Unhandled transformation function {}", CSS::TransformationStyleValue::create(transformation.function, {})->to_string());
  300. }
  301. return Gfx::FloatMatrix4x4::identity();
  302. }
  303. Gfx::FloatMatrix4x4 StackingContext::combine_transformations(Vector<CSS::Transformation> const& transformations) const
  304. {
  305. auto matrix = Gfx::FloatMatrix4x4::identity();
  306. for (auto const& transform : transformations)
  307. matrix = matrix * get_transformation_matrix(transform);
  308. return matrix;
  309. }
  310. // FIXME: This extracts the affine 2D part of the full transformation matrix.
  311. // Use the whole matrix when we get better transformation support in LibGfx or use LibGL for drawing the bitmap
  312. Gfx::AffineTransform StackingContext::affine_transform_matrix() const
  313. {
  314. auto* m = m_transform.elements();
  315. return Gfx::AffineTransform(m[0][0], m[1][0], m[0][1], m[1][1], m[0][3], m[1][3]);
  316. }
  317. void StackingContext::paint(PaintContext& context) const
  318. {
  319. Gfx::PainterStateSaver saver(context.painter());
  320. if (m_box.is_fixed_position()) {
  321. context.painter().translate(-context.painter().translation());
  322. }
  323. auto opacity = m_box.computed_values().opacity();
  324. if (opacity == 0.0f)
  325. return;
  326. auto affine_transform = affine_transform_matrix();
  327. if (opacity < 1.0f || !affine_transform.is_identity_or_translation()) {
  328. auto transform_origin = this->transform_origin();
  329. auto source_rect = paintable().absolute_paint_rect().translated(-transform_origin);
  330. auto transformed_destination_rect = affine_transform.map(source_rect).translated(transform_origin);
  331. auto destination_rect = transformed_destination_rect.to_rounded<int>();
  332. // FIXME: We should find a way to scale the paintable, rather than paint into a separate bitmap,
  333. // then scale it. This snippet now copies the background at the destination, then scales it down/up
  334. // to the size of the source (which could add some artefacts, though just scaling the bitmap already does that).
  335. // We need to copy the background at the destination because a bunch of our rendering effects now rely on
  336. // being able to sample the painter (see border radii, shadows, filters, etc).
  337. Gfx::FloatPoint destination_clipped_fixup {};
  338. auto try_get_scaled_destination_bitmap = [&]() -> ErrorOr<NonnullRefPtr<Gfx::Bitmap>> {
  339. Gfx::IntRect actual_destination_rect;
  340. auto bitmap = TRY(context.painter().get_region_bitmap(destination_rect, Gfx::BitmapFormat::BGRA8888, actual_destination_rect));
  341. // get_region_bitmap() may clip to a smaller region if the requested rect goes outside the painter, so we need to account for that.
  342. destination_clipped_fixup = Gfx::FloatPoint { destination_rect.location() - actual_destination_rect.location() };
  343. destination_rect = actual_destination_rect;
  344. if (source_rect.size() != transformed_destination_rect.size()) {
  345. auto sx = static_cast<float>(source_rect.width()) / transformed_destination_rect.width();
  346. auto sy = static_cast<float>(source_rect.height()) / transformed_destination_rect.height();
  347. bitmap = TRY(bitmap->scaled(sx, sy));
  348. destination_clipped_fixup.scale_by(sx, sy);
  349. }
  350. return bitmap;
  351. };
  352. auto bitmap_or_error = try_get_scaled_destination_bitmap();
  353. if (bitmap_or_error.is_error())
  354. return;
  355. auto bitmap = bitmap_or_error.release_value_but_fixme_should_propagate_errors();
  356. Gfx::Painter painter(bitmap);
  357. painter.translate((-paintable().absolute_paint_rect().location() + destination_clipped_fixup).to_rounded<int>());
  358. auto paint_context = context.clone(painter);
  359. paint_internal(paint_context);
  360. if (destination_rect.size() == bitmap->size())
  361. context.painter().blit(destination_rect.location(), *bitmap, bitmap->rect(), opacity);
  362. else
  363. context.painter().draw_scaled_bitmap(destination_rect, *bitmap, bitmap->rect(), opacity, Gfx::Painter::ScalingMode::BilinearBlend);
  364. } else {
  365. Gfx::PainterStateSaver saver(context.painter());
  366. context.painter().translate(affine_transform.translation().to_rounded<int>());
  367. paint_internal(context);
  368. }
  369. }
  370. Gfx::FloatPoint StackingContext::compute_transform_origin() const
  371. {
  372. auto style_value = m_box.computed_values().transform_origin();
  373. // FIXME: respect transform-box property
  374. auto reference_box = paintable().absolute_border_box_rect();
  375. auto x = reference_box.left() + style_value.x.resolved(m_box, CSS::Length::make_px(reference_box.width())).to_px(m_box);
  376. auto y = reference_box.top() + style_value.y.resolved(m_box, CSS::Length::make_px(reference_box.height())).to_px(m_box);
  377. return { x, y };
  378. }
  379. template<typename U, typename Callback>
  380. static TraversalDecision for_each_in_inclusive_subtree_of_type_within_same_stacking_context_in_reverse(Paintable const& paintable, Callback callback)
  381. {
  382. if (is<PaintableBox>(paintable) && static_cast<PaintableBox const&>(paintable).stacking_context())
  383. return TraversalDecision::SkipChildrenAndContinue;
  384. for (auto* child = paintable.last_child(); child; child = child->previous_sibling()) {
  385. if (for_each_in_inclusive_subtree_of_type_within_same_stacking_context_in_reverse<U>(*child, callback) == TraversalDecision::Break)
  386. return TraversalDecision::Break;
  387. }
  388. if (is<U>(paintable)) {
  389. if (auto decision = callback(static_cast<U const&>(paintable)); decision != TraversalDecision::Continue)
  390. return decision;
  391. }
  392. return TraversalDecision::Continue;
  393. }
  394. template<typename U, typename Callback>
  395. static TraversalDecision for_each_in_subtree_of_type_within_same_stacking_context_in_reverse(Paintable const& paintable, Callback callback)
  396. {
  397. for (auto* child = paintable.last_child(); child; child = child->previous_sibling()) {
  398. if (for_each_in_inclusive_subtree_of_type_within_same_stacking_context_in_reverse<U>(*child, callback) == TraversalDecision::Break)
  399. return TraversalDecision::Break;
  400. }
  401. return TraversalDecision::Continue;
  402. }
  403. Optional<HitTestResult> StackingContext::hit_test(Gfx::FloatPoint const& position, HitTestType type) const
  404. {
  405. if (!m_box.is_visible())
  406. return {};
  407. auto transform_origin = this->transform_origin();
  408. auto transformed_position = affine_transform_matrix().inverse().value_or({}).map(position - transform_origin) + transform_origin;
  409. // FIXME: Support more overflow variations.
  410. if (paintable().computed_values().overflow_x() == CSS::Overflow::Hidden && paintable().computed_values().overflow_y() == CSS::Overflow::Hidden) {
  411. if (!paintable().absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  412. return {};
  413. }
  414. // NOTE: Hit testing basically happens in reverse painting order.
  415. // https://www.w3.org/TR/CSS22/visuren.html#z-index
  416. // 7. the child stacking contexts with positive stack levels (least positive first).
  417. // NOTE: Hit testing follows reverse painting order, that's why the conditions here are reversed.
  418. for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
  419. auto const& child = *m_children[i];
  420. if (child.m_box.computed_values().z_index().value_or(0) <= 0)
  421. break;
  422. auto result = child.hit_test(transformed_position, type);
  423. if (result.has_value() && result->paintable->visible_for_hit_testing())
  424. return result;
  425. }
  426. Optional<HitTestResult> result;
  427. // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  428. for_each_in_subtree_of_type_within_same_stacking_context_in_reverse<PaintableBox>(paintable(), [&](PaintableBox const& paint_box) {
  429. // FIXME: Support more overflow variations.
  430. if (paint_box.computed_values().overflow_x() == CSS::Overflow::Hidden && paint_box.computed_values().overflow_y() == CSS::Overflow::Hidden) {
  431. if (!paint_box.absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  432. return TraversalDecision::SkipChildrenAndContinue;
  433. }
  434. if (paint_box.stacking_context()) {
  435. auto const& z_index = paint_box.computed_values().z_index();
  436. if (!z_index.has_value() || z_index.value() == 0) {
  437. auto candidate = paint_box.stacking_context()->hit_test(transformed_position, type);
  438. if (candidate.has_value() && candidate->paintable->visible_for_hit_testing()) {
  439. result = move(candidate);
  440. return TraversalDecision::Break;
  441. }
  442. }
  443. }
  444. auto& layout_box = paint_box.layout_box();
  445. if (layout_box.is_positioned() && !paint_box.stacking_context()) {
  446. if (auto candidate = paint_box.hit_test(transformed_position, type); candidate.has_value()) {
  447. result = move(candidate);
  448. return TraversalDecision::Break;
  449. }
  450. }
  451. return TraversalDecision::Continue;
  452. });
  453. if (result.has_value() && result->paintable->visible_for_hit_testing())
  454. return result;
  455. // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  456. if (m_box.children_are_inline() && is<Layout::BlockContainer>(m_box)) {
  457. auto result = paintable().hit_test(transformed_position, type);
  458. if (result.has_value() && result->paintable->visible_for_hit_testing())
  459. return result;
  460. }
  461. // 4. the non-positioned floats.
  462. for_each_in_subtree_of_type_within_same_stacking_context_in_reverse<PaintableBox>(paintable(), [&](auto const& paint_box) {
  463. // FIXME: Support more overflow variations.
  464. if (paint_box.computed_values().overflow_x() == CSS::Overflow::Hidden && paint_box.computed_values().overflow_y() == CSS::Overflow::Hidden) {
  465. if (!paint_box.absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  466. return TraversalDecision::SkipChildrenAndContinue;
  467. }
  468. auto& layout_box = paint_box.layout_box();
  469. if (layout_box.is_floating()) {
  470. if (auto candidate = paint_box.hit_test(transformed_position, type); candidate.has_value()) {
  471. result = move(candidate);
  472. return TraversalDecision::Break;
  473. }
  474. }
  475. return TraversalDecision::Continue;
  476. });
  477. if (result.has_value() && result->paintable->visible_for_hit_testing())
  478. return result;
  479. // 3. the in-flow, non-inline-level, non-positioned descendants.
  480. if (!m_box.children_are_inline()) {
  481. for_each_in_subtree_of_type_within_same_stacking_context_in_reverse<PaintableBox>(paintable(), [&](auto const& paint_box) {
  482. // FIXME: Support more overflow variations.
  483. if (paint_box.computed_values().overflow_x() == CSS::Overflow::Hidden && paint_box.computed_values().overflow_y() == CSS::Overflow::Hidden) {
  484. if (!paint_box.absolute_border_box_rect().contains(transformed_position.x(), transformed_position.y()))
  485. return TraversalDecision::SkipChildrenAndContinue;
  486. }
  487. auto& layout_box = paint_box.layout_box();
  488. if (!layout_box.is_absolutely_positioned() && !layout_box.is_floating()) {
  489. if (auto candidate = paint_box.hit_test(transformed_position, type); candidate.has_value()) {
  490. result = move(candidate);
  491. return TraversalDecision::Break;
  492. }
  493. }
  494. return TraversalDecision::Continue;
  495. });
  496. if (result.has_value() && result->paintable->visible_for_hit_testing())
  497. return result;
  498. }
  499. // 2. the child stacking contexts with negative stack levels (most negative first).
  500. // NOTE: Hit testing follows reverse painting order, that's why the conditions here are reversed.
  501. for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
  502. auto const& child = *m_children[i];
  503. if (child.m_box.computed_values().z_index().value_or(0) >= 0)
  504. break;
  505. auto result = child.hit_test(transformed_position, type);
  506. if (result.has_value() && result->paintable->visible_for_hit_testing())
  507. return result;
  508. }
  509. // 1. the background and borders of the element forming the stacking context.
  510. if (paintable().absolute_border_box_rect().contains(transformed_position)) {
  511. return HitTestResult {
  512. .paintable = paintable(),
  513. };
  514. }
  515. return {};
  516. }
  517. void StackingContext::dump(int indent) const
  518. {
  519. StringBuilder builder;
  520. for (int i = 0; i < indent; ++i)
  521. builder.append(' ');
  522. builder.appendff("SC for {} {} [children: {}] (z-index: ", m_box.debug_description(), paintable().absolute_rect(), m_children.size());
  523. if (m_box.computed_values().z_index().has_value())
  524. builder.appendff("{}", m_box.computed_values().z_index().value());
  525. else
  526. builder.append("auto"sv);
  527. builder.append(')');
  528. auto affine_transform = affine_transform_matrix();
  529. if (!affine_transform.is_identity()) {
  530. builder.appendff(", transform: {}", affine_transform);
  531. }
  532. dbgln("{}", builder.string_view());
  533. for (auto& child : m_children)
  534. child->dump(indent + 1);
  535. }
  536. }