StackingContext.cpp 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. /*
  2. * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <AK/QuickSort.h>
  7. #include <AK/StringBuilder.h>
  8. #include <LibGfx/Painter.h>
  9. #include <LibWeb/Layout/Box.h>
  10. #include <LibWeb/Layout/InitialContainingBlock.h>
  11. #include <LibWeb/Layout/ReplacedBox.h>
  12. #include <LibWeb/Painting/PaintableBox.h>
  13. #include <LibWeb/Painting/StackingContext.h>
  14. namespace Web::Painting {
  15. static void paint_node(Layout::Node const& layout_node, PaintContext& context, PaintPhase phase)
  16. {
  17. if (auto const* paintable = layout_node.paintable())
  18. paintable->paint(context, phase);
  19. }
  20. StackingContext::StackingContext(Layout::Box& box, StackingContext* parent)
  21. : m_box(box)
  22. , m_parent(parent)
  23. {
  24. VERIFY(m_parent != this);
  25. if (m_parent)
  26. m_parent->m_children.append(this);
  27. }
  28. void StackingContext::sort()
  29. {
  30. quick_sort(m_children, [](auto& a, auto& b) {
  31. auto a_z_index = a->m_box.computed_values().z_index().value_or(0);
  32. auto b_z_index = b->m_box.computed_values().z_index().value_or(0);
  33. if (a_z_index == b_z_index)
  34. return a->m_box.is_before(b->m_box);
  35. return a_z_index < b_z_index;
  36. });
  37. for (auto* child : m_children)
  38. child->sort();
  39. }
  40. void StackingContext::paint_descendants(PaintContext& context, Layout::Node& box, StackingContextPaintPhase phase) const
  41. {
  42. if (phase == StackingContextPaintPhase::Foreground) {
  43. if (auto* paintable = box.paintable())
  44. paintable->before_children_paint(context, PaintPhase::Foreground);
  45. }
  46. box.for_each_child([&](auto& child) {
  47. // If `child` establishes its own stacking context, skip over it.
  48. if (is<Layout::Box>(child) && child.paintable() && static_cast<Layout::Box const&>(child).paint_box()->stacking_context())
  49. return;
  50. bool child_is_inline_or_replaced = child.is_inline() || is<Layout::ReplacedBox>(child);
  51. switch (phase) {
  52. case StackingContextPaintPhase::BackgroundAndBorders:
  53. if (!child_is_inline_or_replaced && !child.is_floating() && !child.is_positioned()) {
  54. paint_node(child, context, PaintPhase::Background);
  55. paint_node(child, context, PaintPhase::Border);
  56. paint_descendants(context, child, phase);
  57. }
  58. break;
  59. case StackingContextPaintPhase::Floats:
  60. if (!child.is_positioned()) {
  61. if (child.is_floating()) {
  62. paint_node(child, context, PaintPhase::Background);
  63. paint_node(child, context, PaintPhase::Border);
  64. paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
  65. }
  66. paint_descendants(context, child, phase);
  67. }
  68. break;
  69. case StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
  70. if (!child.is_positioned()) {
  71. if (child_is_inline_or_replaced) {
  72. paint_node(child, context, PaintPhase::Background);
  73. paint_node(child, context, PaintPhase::Border);
  74. paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
  75. }
  76. paint_descendants(context, child, phase);
  77. }
  78. break;
  79. case StackingContextPaintPhase::Foreground:
  80. if (!child.is_positioned()) {
  81. paint_node(child, context, PaintPhase::Foreground);
  82. paint_descendants(context, child, phase);
  83. }
  84. break;
  85. case StackingContextPaintPhase::FocusAndOverlay:
  86. if (context.has_focus()) {
  87. paint_node(child, context, PaintPhase::FocusOutline);
  88. }
  89. paint_node(child, context, PaintPhase::Overlay);
  90. paint_descendants(context, child, phase);
  91. break;
  92. }
  93. });
  94. if (phase == StackingContextPaintPhase::Foreground) {
  95. if (auto* paintable = box.paintable())
  96. paintable->after_children_paint(context, PaintPhase::Foreground);
  97. }
  98. }
  99. void StackingContext::paint_internal(PaintContext& context) const
  100. {
  101. // For a more elaborate description of the algorithm, see CSS 2.1 Appendix E
  102. // Draw the background and borders for the context root (steps 1, 2)
  103. paint_node(m_box, context, PaintPhase::Background);
  104. paint_node(m_box, context, PaintPhase::Border);
  105. // Draw positioned descendants with negative z-indices (step 3)
  106. for (auto* child : m_children) {
  107. if (child->m_box.computed_values().z_index().has_value() && child->m_box.computed_values().z_index().value() < 0)
  108. child->paint(context);
  109. }
  110. // Draw the background and borders for block-level children (step 4)
  111. paint_descendants(context, m_box, StackingContextPaintPhase::BackgroundAndBorders);
  112. // Draw the non-positioned floats (step 5)
  113. paint_descendants(context, m_box, StackingContextPaintPhase::Floats);
  114. // Draw inline content, replaced content, etc. (steps 6, 7)
  115. paint_descendants(context, m_box, StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
  116. paint_node(m_box, context, PaintPhase::Foreground);
  117. paint_descendants(context, m_box, StackingContextPaintPhase::Foreground);
  118. // Draw other positioned descendants (steps 8, 9)
  119. for (auto* child : m_children) {
  120. if (child->m_box.computed_values().z_index().has_value() && child->m_box.computed_values().z_index().value() < 0)
  121. continue;
  122. child->paint(context);
  123. }
  124. paint_node(m_box, context, PaintPhase::FocusOutline);
  125. paint_node(m_box, context, PaintPhase::Overlay);
  126. paint_descendants(context, m_box, StackingContextPaintPhase::FocusAndOverlay);
  127. }
  128. void StackingContext::paint(PaintContext& context) const
  129. {
  130. Gfx::PainterStateSaver saver(context.painter());
  131. if (m_box.is_fixed_position()) {
  132. context.painter().translate(context.scroll_offset());
  133. }
  134. auto opacity = m_box.computed_values().opacity();
  135. if (opacity == 0.0f)
  136. return;
  137. if (opacity < 1.0f) {
  138. auto bitmap_or_error = Gfx::Bitmap::try_create(Gfx::BitmapFormat::BGRA8888, context.painter().target()->size());
  139. if (bitmap_or_error.is_error())
  140. return;
  141. auto bitmap = bitmap_or_error.release_value_but_fixme_should_propagate_errors();
  142. Gfx::Painter painter(bitmap);
  143. PaintContext paint_context(painter, context.palette(), context.scroll_offset());
  144. paint_internal(paint_context);
  145. context.painter().blit(Gfx::IntPoint(m_box.paint_box()->absolute_position()), bitmap, Gfx::IntRect(m_box.paint_box()->absolute_rect()), opacity);
  146. } else {
  147. paint_internal(context);
  148. }
  149. }
  150. HitTestResult StackingContext::hit_test(Gfx::IntPoint const& position, HitTestType type) const
  151. {
  152. // NOTE: Hit testing basically happens in reverse painting order.
  153. // https://www.w3.org/TR/CSS22/visuren.html#z-index
  154. // 7. the child stacking contexts with positive stack levels (least positive first).
  155. for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
  156. auto const& child = *m_children[i];
  157. if (child.m_box.computed_values().z_index().value_or(0) < 0)
  158. break;
  159. auto result = child.hit_test(position, type);
  160. if (result.paintable)
  161. return result;
  162. }
  163. HitTestResult result;
  164. // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
  165. m_box.for_each_in_subtree_of_type<Layout::Box>([&](Layout::Box const& box) {
  166. if (box.is_positioned() && !box.paint_box()->stacking_context()) {
  167. result = box.paint_box()->hit_test(position, type);
  168. if (result.paintable)
  169. return IterationDecision::Break;
  170. }
  171. return IterationDecision::Continue;
  172. });
  173. if (result.paintable)
  174. return result;
  175. // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
  176. if (m_box.children_are_inline() && is<Layout::BlockContainer>(m_box)) {
  177. auto result = m_box.paint_box()->hit_test(position, type);
  178. if (result.paintable)
  179. return result;
  180. }
  181. // 4. the non-positioned floats.
  182. m_box.for_each_in_subtree_of_type<Layout::Box>([&](Layout::Box const& box) {
  183. if (box.is_floating()) {
  184. result = box.paint_box()->hit_test(position, type);
  185. if (result.paintable)
  186. return IterationDecision::Break;
  187. }
  188. return IterationDecision::Continue;
  189. });
  190. // 3. the in-flow, non-inline-level, non-positioned descendants.
  191. if (!m_box.children_are_inline()) {
  192. m_box.for_each_in_subtree_of_type<Layout::Box>([&](Layout::Box const& box) {
  193. if (!box.is_absolutely_positioned() && !box.is_floating()) {
  194. result = box.paint_box()->hit_test(position, type);
  195. if (result.paintable)
  196. return IterationDecision::Break;
  197. }
  198. return IterationDecision::Continue;
  199. });
  200. if (result.paintable)
  201. return result;
  202. }
  203. // 2. the child stacking contexts with negative stack levels (most negative first).
  204. for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
  205. auto const& child = *m_children[i];
  206. if (child.m_box.computed_values().z_index().value_or(0) < 0)
  207. break;
  208. auto result = child.hit_test(position, type);
  209. if (result.paintable)
  210. return result;
  211. }
  212. // 1. the background and borders of the element forming the stacking context.
  213. if (m_box.paint_box()->absolute_border_box_rect().contains(position.to_type<float>())) {
  214. return HitTestResult {
  215. .paintable = m_box.paintable(),
  216. };
  217. }
  218. return {};
  219. }
  220. void StackingContext::dump(int indent) const
  221. {
  222. StringBuilder builder;
  223. for (int i = 0; i < indent; ++i)
  224. builder.append(' ');
  225. builder.appendff("SC for {} {} [children: {}] (z-index: ", m_box.debug_description(), m_box.paint_box()->absolute_rect(), m_children.size());
  226. if (m_box.computed_values().z_index().has_value())
  227. builder.appendff("{}", m_box.computed_values().z_index().value());
  228. else
  229. builder.append("auto");
  230. builder.append(')');
  231. dbgln("{}", builder.string_view());
  232. for (auto& child : m_children)
  233. child->dump(indent + 1);
  234. }
  235. }