StyleProperties.cpp 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804
  1. /*
  2. * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/TypeCasts.h>
  8. #include <LibCore/DirIterator.h>
  9. #include <LibWeb/CSS/Clip.h>
  10. #include <LibWeb/CSS/StyleProperties.h>
  11. #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
  12. #include <LibWeb/CSS/StyleValues/ContentStyleValue.h>
  13. #include <LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.h>
  14. #include <LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.h>
  15. #include <LibWeb/CSS/StyleValues/GridTrackSizeStyleValue.h>
  16. #include <LibWeb/FontCache.h>
  17. #include <LibWeb/Layout/BlockContainer.h>
  18. #include <LibWeb/Layout/Node.h>
  19. #include <LibWeb/Platform/FontPlugin.h>
  20. namespace Web::CSS {
  21. StyleProperties::StyleProperties(StyleProperties const& other)
  22. : m_property_values(other.m_property_values)
  23. {
  24. if (other.m_font) {
  25. m_font = other.m_font->clone();
  26. } else {
  27. m_font = nullptr;
  28. }
  29. }
  30. NonnullRefPtr<StyleProperties> StyleProperties::clone() const
  31. {
  32. return adopt_ref(*new StyleProperties(*this));
  33. }
  34. void StyleProperties::set_property(CSS::PropertyID id, NonnullRefPtr<StyleValue const> value)
  35. {
  36. m_property_values[to_underlying(id)] = move(value);
  37. }
  38. NonnullRefPtr<StyleValue const> StyleProperties::property(CSS::PropertyID property_id) const
  39. {
  40. auto value = m_property_values[to_underlying(property_id)];
  41. // By the time we call this method, all properties have values assigned.
  42. VERIFY(!value.is_null());
  43. return value.release_nonnull();
  44. }
  45. RefPtr<StyleValue const> StyleProperties::maybe_null_property(CSS::PropertyID property_id) const
  46. {
  47. return m_property_values[to_underlying(property_id)];
  48. }
  49. CSS::Size StyleProperties::size_value(CSS::PropertyID id) const
  50. {
  51. auto value = property(id);
  52. if (value->is_identifier()) {
  53. switch (value->to_identifier()) {
  54. case ValueID::Auto:
  55. return CSS::Size::make_auto();
  56. case ValueID::MinContent:
  57. return CSS::Size::make_min_content();
  58. case ValueID::MaxContent:
  59. return CSS::Size::make_max_content();
  60. case ValueID::None:
  61. return CSS::Size::make_none();
  62. default:
  63. VERIFY_NOT_REACHED();
  64. }
  65. }
  66. if (value->is_calculated())
  67. return CSS::Size::make_length(CSS::Length::make_calculated(const_cast<CalculatedStyleValue&>(value->as_calculated())));
  68. if (value->is_percentage())
  69. return CSS::Size::make_percentage(value->as_percentage().percentage());
  70. if (value->has_length()) {
  71. auto length = value->to_length();
  72. if (length.is_auto())
  73. return CSS::Size::make_auto();
  74. return CSS::Size::make_length(value->to_length());
  75. }
  76. // FIXME: Support `fit-content(<length>)`
  77. dbgln("FIXME: Unsupported size value: `{}`, treating as `auto`", value->to_string());
  78. return CSS::Size::make_auto();
  79. }
  80. LengthPercentage StyleProperties::length_percentage_or_fallback(CSS::PropertyID id, LengthPercentage const& fallback) const
  81. {
  82. return length_percentage(id).value_or(fallback);
  83. }
  84. Optional<LengthPercentage> StyleProperties::length_percentage(CSS::PropertyID id) const
  85. {
  86. auto value = property(id);
  87. if (value->is_calculated())
  88. return LengthPercentage { const_cast<CalculatedStyleValue&>(value->as_calculated()) };
  89. if (value->is_percentage())
  90. return value->as_percentage().percentage();
  91. if (value->has_length())
  92. return value->to_length();
  93. return {};
  94. }
  95. LengthBox StyleProperties::length_box(CSS::PropertyID left_id, CSS::PropertyID top_id, CSS::PropertyID right_id, CSS::PropertyID bottom_id, const CSS::Length& default_value) const
  96. {
  97. LengthBox box;
  98. box.left() = length_percentage_or_fallback(left_id, default_value);
  99. box.top() = length_percentage_or_fallback(top_id, default_value);
  100. box.right() = length_percentage_or_fallback(right_id, default_value);
  101. box.bottom() = length_percentage_or_fallback(bottom_id, default_value);
  102. return box;
  103. }
  104. Color StyleProperties::color_or_fallback(CSS::PropertyID id, Layout::NodeWithStyle const& node, Color fallback) const
  105. {
  106. auto value = property(id);
  107. if (!value->has_color())
  108. return fallback;
  109. return value->to_color(node);
  110. }
  111. NonnullRefPtr<Gfx::Font const> StyleProperties::font_fallback(bool monospace, bool bold)
  112. {
  113. if (monospace && bold)
  114. return Platform::FontPlugin::the().default_fixed_width_font().bold_variant();
  115. if (monospace)
  116. return Platform::FontPlugin::the().default_fixed_width_font();
  117. if (bold)
  118. return Platform::FontPlugin::the().default_font().bold_variant();
  119. return Platform::FontPlugin::the().default_font();
  120. }
  121. // FIXME: This implementation is almost identical to line_height(Layout::Node) below. Maybe they can be combined somehow.
  122. CSSPixels StyleProperties::line_height(CSSPixelRect const& viewport_rect, Gfx::FontPixelMetrics const& font_metrics, CSSPixels font_size, CSSPixels root_font_size, CSSPixels parent_line_height, CSSPixels root_line_height) const
  123. {
  124. auto line_height = property(CSS::PropertyID::LineHeight);
  125. if (line_height->is_identifier() && line_height->to_identifier() == ValueID::Normal)
  126. return font_metrics.line_spacing();
  127. if (line_height->is_length()) {
  128. auto line_height_length = line_height->to_length();
  129. if (!line_height_length.is_auto())
  130. return line_height_length.to_px(viewport_rect, font_metrics, font_size, root_font_size, parent_line_height, root_line_height);
  131. }
  132. if (line_height->is_numeric())
  133. return Length(line_height->to_number(), Length::Type::Em).to_px(viewport_rect, font_metrics, font_size, root_font_size, parent_line_height, root_line_height);
  134. if (line_height->is_percentage()) {
  135. // Percentages are relative to 1em. https://www.w3.org/TR/css-inline-3/#valdef-line-height-percentage
  136. auto& percentage = line_height->as_percentage().percentage();
  137. return Length(percentage.as_fraction(), Length::Type::Em).to_px(viewport_rect, font_metrics, font_size, root_font_size, parent_line_height, root_line_height);
  138. }
  139. if (line_height->is_calculated()) {
  140. // FIXME: Handle `line-height: calc(...)` despite not having a LayoutNode here.
  141. return font_metrics.line_spacing();
  142. }
  143. return font_metrics.line_spacing();
  144. }
  145. CSSPixels StyleProperties::line_height(Layout::Node const& layout_node) const
  146. {
  147. auto line_height = property(CSS::PropertyID::LineHeight);
  148. if (line_height->is_identifier() && line_height->to_identifier() == ValueID::Normal)
  149. return layout_node.font().pixel_metrics().line_spacing();
  150. if (line_height->is_length()) {
  151. auto line_height_length = line_height->to_length();
  152. if (!line_height_length.is_auto())
  153. return line_height_length.to_px(layout_node);
  154. }
  155. if (line_height->is_numeric())
  156. return Length(line_height->to_number(), Length::Type::Em).to_px(layout_node);
  157. if (line_height->is_percentage()) {
  158. // Percentages are relative to 1em. https://www.w3.org/TR/css-inline-3/#valdef-line-height-percentage
  159. auto& percentage = line_height->as_percentage().percentage();
  160. return Length(percentage.as_fraction(), Length::Type::Em).to_px(layout_node);
  161. }
  162. if (line_height->is_calculated())
  163. return CSS::Length::make_calculated(const_cast<CalculatedStyleValue&>(line_height->as_calculated())).to_px(layout_node);
  164. return layout_node.font().pixel_metrics().line_spacing();
  165. }
  166. Optional<int> StyleProperties::z_index() const
  167. {
  168. auto value = property(CSS::PropertyID::ZIndex);
  169. if (value->has_auto())
  170. return {};
  171. if (value->has_integer())
  172. return value->to_integer();
  173. return {};
  174. }
  175. float StyleProperties::opacity() const
  176. {
  177. auto value = property(CSS::PropertyID::Opacity);
  178. float unclamped_opacity = 1.0f;
  179. if (value->has_number()) {
  180. unclamped_opacity = value->to_number();
  181. } else if (value->is_calculated()) {
  182. auto& calculated = value->as_calculated();
  183. if (calculated.resolved_type() == CalculatedStyleValue::ResolvedType::Percentage) {
  184. auto maybe_percentage = value->as_calculated().resolve_percentage();
  185. if (maybe_percentage.has_value())
  186. unclamped_opacity = maybe_percentage->as_fraction();
  187. else
  188. dbgln("Unable to resolve calc() as opacity (percentage): {}", value->to_string());
  189. } else {
  190. auto maybe_number = const_cast<CalculatedStyleValue&>(value->as_calculated()).resolve_number();
  191. if (maybe_number.has_value())
  192. unclamped_opacity = maybe_number.value();
  193. else
  194. dbgln("Unable to resolve calc() as opacity (number): {}", value->to_string());
  195. }
  196. } else if (value->is_percentage()) {
  197. unclamped_opacity = value->as_percentage().percentage().as_fraction();
  198. }
  199. return clamp(unclamped_opacity, 0.0f, 1.0f);
  200. }
  201. Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
  202. {
  203. auto value = property(CSS::PropertyID::FlexDirection);
  204. return value_id_to_flex_direction(value->to_identifier());
  205. }
  206. Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
  207. {
  208. auto value = property(CSS::PropertyID::FlexWrap);
  209. return value_id_to_flex_wrap(value->to_identifier());
  210. }
  211. Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
  212. {
  213. auto value = property(CSS::PropertyID::FlexBasis);
  214. if (value->is_identifier() && value->to_identifier() == CSS::ValueID::Content)
  215. return { { CSS::FlexBasis::Content, {} } };
  216. if (value->has_auto())
  217. return { { CSS::FlexBasis::Auto, {} } };
  218. if (value->is_percentage())
  219. return { { CSS::FlexBasis::LengthPercentage, value->as_percentage().percentage() } };
  220. if (value->has_length())
  221. return { { CSS::FlexBasis::LengthPercentage, value->to_length() } };
  222. return {};
  223. }
  224. float StyleProperties::flex_grow() const
  225. {
  226. auto value = property(CSS::PropertyID::FlexGrow);
  227. if (!value->has_number())
  228. return 0;
  229. return value->to_number();
  230. }
  231. float StyleProperties::flex_shrink() const
  232. {
  233. auto value = property(CSS::PropertyID::FlexShrink);
  234. if (!value->has_number())
  235. return 1;
  236. return value->to_number();
  237. }
  238. int StyleProperties::order() const
  239. {
  240. auto value = property(CSS::PropertyID::Order);
  241. if (!value->has_integer())
  242. return 0;
  243. return value->to_integer();
  244. }
  245. Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
  246. {
  247. auto value = property(CSS::PropertyID::ImageRendering);
  248. return value_id_to_image_rendering(value->to_identifier());
  249. }
  250. CSS::Clip StyleProperties::clip() const
  251. {
  252. auto value = property(CSS::PropertyID::Clip);
  253. if (!value->has_rect())
  254. return CSS::Clip::make_auto();
  255. return CSS::Clip(value->as_rect().rect());
  256. }
  257. Optional<CSS::JustifyContent> StyleProperties::justify_content() const
  258. {
  259. auto value = property(CSS::PropertyID::JustifyContent);
  260. return value_id_to_justify_content(value->to_identifier());
  261. }
  262. Vector<CSS::Transformation> StyleProperties::transformations() const
  263. {
  264. auto value = property(CSS::PropertyID::Transform);
  265. if (value->is_identifier() && value->to_identifier() == CSS::ValueID::None)
  266. return {};
  267. if (!value->is_value_list())
  268. return {};
  269. auto& list = value->as_value_list();
  270. Vector<CSS::Transformation> transformations;
  271. for (auto& it : list.values()) {
  272. if (!it->is_transformation())
  273. return {};
  274. auto& transformation_style_value = it->as_transformation();
  275. CSS::Transformation transformation;
  276. transformation.function = transformation_style_value.transform_function();
  277. Vector<TransformValue> values;
  278. for (auto& transformation_value : transformation_style_value.values()) {
  279. if (transformation_value->is_length()) {
  280. values.append({ transformation_value->to_length() });
  281. } else if (transformation_value->is_percentage()) {
  282. values.append({ transformation_value->as_percentage().percentage() });
  283. } else if (transformation_value->is_numeric()) {
  284. values.append({ transformation_value->to_number() });
  285. } else if (transformation_value->is_angle()) {
  286. values.append({ transformation_value->as_angle().angle() });
  287. } else {
  288. dbgln("FIXME: Unsupported value in transform!");
  289. }
  290. }
  291. transformation.values = move(values);
  292. transformations.append(move(transformation));
  293. }
  294. return transformations;
  295. }
  296. static Optional<LengthPercentage> length_percentage_for_style_value(StyleValue const& value)
  297. {
  298. if (value.is_length())
  299. return value.to_length();
  300. if (value.is_percentage())
  301. return value.as_percentage().percentage();
  302. return {};
  303. }
  304. CSS::TransformOrigin StyleProperties::transform_origin() const
  305. {
  306. auto value = property(CSS::PropertyID::TransformOrigin);
  307. if (!value->is_value_list() || value->as_value_list().size() != 2)
  308. return {};
  309. auto const& list = value->as_value_list();
  310. auto x_value = length_percentage_for_style_value(list.values()[0]);
  311. auto y_value = length_percentage_for_style_value(list.values()[1]);
  312. if (!x_value.has_value() || !y_value.has_value()) {
  313. return {};
  314. }
  315. return { x_value.value(), y_value.value() };
  316. }
  317. Optional<Color> StyleProperties::accent_color(Layout::NodeWithStyle const& node) const
  318. {
  319. auto value = property(CSS::PropertyID::AccentColor);
  320. if (value->has_color())
  321. return value->to_color(node);
  322. return {};
  323. }
  324. Optional<CSS::AlignContent> StyleProperties::align_content() const
  325. {
  326. auto value = property(CSS::PropertyID::AlignContent);
  327. return value_id_to_align_content(value->to_identifier());
  328. }
  329. Optional<CSS::AlignItems> StyleProperties::align_items() const
  330. {
  331. auto value = property(CSS::PropertyID::AlignItems);
  332. return value_id_to_align_items(value->to_identifier());
  333. }
  334. Optional<CSS::AlignSelf> StyleProperties::align_self() const
  335. {
  336. auto value = property(CSS::PropertyID::AlignSelf);
  337. return value_id_to_align_self(value->to_identifier());
  338. }
  339. Optional<CSS::Appearance> StyleProperties::appearance() const
  340. {
  341. auto value = property(CSS::PropertyID::Appearance);
  342. auto appearance = value_id_to_appearance(value->to_identifier());
  343. if (appearance.has_value()) {
  344. switch (*appearance) {
  345. // Note: All these compatibility values can be treated as 'auto'
  346. case CSS::Appearance::Textfield:
  347. case CSS::Appearance::MenulistButton:
  348. case CSS::Appearance::Searchfield:
  349. case CSS::Appearance::Textarea:
  350. case CSS::Appearance::PushButton:
  351. case CSS::Appearance::SliderHorizontal:
  352. case CSS::Appearance::Checkbox:
  353. case CSS::Appearance::Radio:
  354. case CSS::Appearance::SquareButton:
  355. case CSS::Appearance::Menulist:
  356. case CSS::Appearance::Listbox:
  357. case CSS::Appearance::Meter:
  358. case CSS::Appearance::ProgressBar:
  359. case CSS::Appearance::Button:
  360. appearance = CSS::Appearance::Auto;
  361. break;
  362. default:
  363. break;
  364. }
  365. }
  366. return appearance;
  367. }
  368. CSS::BackdropFilter StyleProperties::backdrop_filter() const
  369. {
  370. auto value = property(CSS::PropertyID::BackdropFilter);
  371. if (value->is_filter_value_list())
  372. return BackdropFilter(value->as_filter_value_list());
  373. return BackdropFilter::make_none();
  374. }
  375. Optional<CSS::Position> StyleProperties::position() const
  376. {
  377. auto value = property(CSS::PropertyID::Position);
  378. return value_id_to_position(value->to_identifier());
  379. }
  380. bool StyleProperties::operator==(StyleProperties const& other) const
  381. {
  382. if (m_property_values.size() != other.m_property_values.size())
  383. return false;
  384. for (size_t i = 0; i < m_property_values.size(); ++i) {
  385. auto const& my_ptr = m_property_values[i];
  386. auto const& other_ptr = other.m_property_values[i];
  387. if (!my_ptr) {
  388. if (other_ptr)
  389. return false;
  390. continue;
  391. }
  392. if (!other_ptr)
  393. return false;
  394. auto const& my_value = *my_ptr;
  395. auto const& other_value = *other_ptr;
  396. if (my_value.type() != other_value.type())
  397. return false;
  398. if (my_value != other_value)
  399. return false;
  400. }
  401. return true;
  402. }
  403. Optional<CSS::TextAlign> StyleProperties::text_align() const
  404. {
  405. auto value = property(CSS::PropertyID::TextAlign);
  406. return value_id_to_text_align(value->to_identifier());
  407. }
  408. Optional<CSS::TextJustify> StyleProperties::text_justify() const
  409. {
  410. auto value = property(CSS::PropertyID::TextJustify);
  411. return value_id_to_text_justify(value->to_identifier());
  412. }
  413. Optional<CSS::PointerEvents> StyleProperties::pointer_events() const
  414. {
  415. auto value = property(CSS::PropertyID::PointerEvents);
  416. return value_id_to_pointer_events(value->to_identifier());
  417. }
  418. Optional<CSS::WhiteSpace> StyleProperties::white_space() const
  419. {
  420. auto value = property(CSS::PropertyID::WhiteSpace);
  421. return value_id_to_white_space(value->to_identifier());
  422. }
  423. Optional<CSS::LineStyle> StyleProperties::line_style(CSS::PropertyID property_id) const
  424. {
  425. auto value = property(property_id);
  426. return value_id_to_line_style(value->to_identifier());
  427. }
  428. Optional<CSS::Float> StyleProperties::float_() const
  429. {
  430. auto value = property(CSS::PropertyID::Float);
  431. return value_id_to_float(value->to_identifier());
  432. }
  433. Optional<CSS::Clear> StyleProperties::clear() const
  434. {
  435. auto value = property(CSS::PropertyID::Clear);
  436. return value_id_to_clear(value->to_identifier());
  437. }
  438. CSS::ContentData StyleProperties::content() const
  439. {
  440. auto value = property(CSS::PropertyID::Content);
  441. if (value->is_content()) {
  442. auto& content_style_value = value->as_content();
  443. CSS::ContentData content_data;
  444. // FIXME: The content is a list of things: strings, identifiers or functions that return strings, and images.
  445. // So it can't always be represented as a single String, but may have to be multiple boxes.
  446. // For now, we'll just assume strings since that is easiest.
  447. StringBuilder builder;
  448. for (auto const& item : content_style_value.content().values()) {
  449. if (item->is_string()) {
  450. builder.append(item->to_string().release_value_but_fixme_should_propagate_errors());
  451. } else {
  452. // TODO: Implement quotes, counters, images, and other things.
  453. }
  454. }
  455. content_data.type = ContentData::Type::String;
  456. content_data.data = builder.to_string().release_value_but_fixme_should_propagate_errors();
  457. if (content_style_value.has_alt_text()) {
  458. StringBuilder alt_text_builder;
  459. for (auto const& item : content_style_value.alt_text()->values()) {
  460. if (item->is_string()) {
  461. alt_text_builder.append(item->to_string().release_value_but_fixme_should_propagate_errors());
  462. } else {
  463. // TODO: Implement counters
  464. }
  465. }
  466. content_data.alt_text = alt_text_builder.to_string().release_value_but_fixme_should_propagate_errors();
  467. }
  468. return content_data;
  469. }
  470. switch (value->to_identifier()) {
  471. case ValueID::None:
  472. return { ContentData::Type::None };
  473. case ValueID::Normal:
  474. return { ContentData::Type::Normal };
  475. default:
  476. break;
  477. }
  478. return CSS::ContentData {};
  479. }
  480. Optional<CSS::Cursor> StyleProperties::cursor() const
  481. {
  482. auto value = property(CSS::PropertyID::Cursor);
  483. return value_id_to_cursor(value->to_identifier());
  484. }
  485. Optional<CSS::Visibility> StyleProperties::visibility() const
  486. {
  487. auto value = property(CSS::PropertyID::Visibility);
  488. if (!value->is_identifier())
  489. return {};
  490. return value_id_to_visibility(value->to_identifier());
  491. }
  492. CSS::Display StyleProperties::display() const
  493. {
  494. auto value = property(CSS::PropertyID::Display);
  495. if (!value->is_identifier())
  496. return CSS::Display::from_short(CSS::Display::Short::Inline);
  497. switch (value->to_identifier()) {
  498. case CSS::ValueID::None:
  499. return CSS::Display::from_short(CSS::Display::Short::None);
  500. case CSS::ValueID::Block:
  501. return CSS::Display::from_short(CSS::Display::Short::Block);
  502. case CSS::ValueID::Inline:
  503. return CSS::Display::from_short(CSS::Display::Short::Inline);
  504. case CSS::ValueID::InlineBlock:
  505. return CSS::Display::from_short(CSS::Display::Short::InlineBlock);
  506. case CSS::ValueID::ListItem:
  507. return CSS::Display::from_short(CSS::Display::Short::ListItem);
  508. case CSS::ValueID::Table:
  509. return CSS::Display::from_short(CSS::Display::Short::Table);
  510. case CSS::ValueID::InlineTable:
  511. return CSS::Display::from_short(CSS::Display::Short::InlineTable);
  512. case CSS::ValueID::TableRow:
  513. return CSS::Display { CSS::Display::Internal::TableRow };
  514. case CSS::ValueID::TableCell:
  515. return CSS::Display { CSS::Display::Internal::TableCell };
  516. case CSS::ValueID::TableColumn:
  517. return CSS::Display { CSS::Display::Internal::TableColumn };
  518. case CSS::ValueID::TableColumnGroup:
  519. return CSS::Display { CSS::Display::Internal::TableColumnGroup };
  520. case CSS::ValueID::TableCaption:
  521. return CSS::Display { CSS::Display::Internal::TableCaption };
  522. case CSS::ValueID::TableRowGroup:
  523. return CSS::Display { CSS::Display::Internal::TableRowGroup };
  524. case CSS::ValueID::TableHeaderGroup:
  525. return CSS::Display { CSS::Display::Internal::TableHeaderGroup };
  526. case CSS::ValueID::TableFooterGroup:
  527. return CSS::Display { CSS::Display::Internal::TableFooterGroup };
  528. case CSS::ValueID::Flex:
  529. return CSS::Display::from_short(CSS::Display::Short::Flex);
  530. case CSS::ValueID::InlineFlex:
  531. return CSS::Display::from_short(CSS::Display::Short::InlineFlex);
  532. case CSS::ValueID::Grid:
  533. return CSS::Display::from_short(CSS::Display::Short::Grid);
  534. default:
  535. return CSS::Display::from_short(CSS::Display::Short::Block);
  536. }
  537. }
  538. Vector<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
  539. {
  540. auto value = property(CSS::PropertyID::TextDecorationLine);
  541. if (value->is_value_list()) {
  542. Vector<CSS::TextDecorationLine> lines;
  543. auto& values = value->as_value_list().values();
  544. for (auto const& item : values) {
  545. lines.append(value_id_to_text_decoration_line(item->to_identifier()).value());
  546. }
  547. return lines;
  548. }
  549. if (value->is_identifier() && value->to_identifier() == ValueID::None)
  550. return {};
  551. dbgln("FIXME: Unsupported value for text-decoration-line: {}", value->to_string());
  552. return {};
  553. }
  554. Optional<CSS::TextDecorationStyle> StyleProperties::text_decoration_style() const
  555. {
  556. auto value = property(CSS::PropertyID::TextDecorationStyle);
  557. return value_id_to_text_decoration_style(value->to_identifier());
  558. }
  559. Optional<CSS::TextTransform> StyleProperties::text_transform() const
  560. {
  561. auto value = property(CSS::PropertyID::TextTransform);
  562. return value_id_to_text_transform(value->to_identifier());
  563. }
  564. Optional<CSS::ListStyleType> StyleProperties::list_style_type() const
  565. {
  566. auto value = property(CSS::PropertyID::ListStyleType);
  567. return value_id_to_list_style_type(value->to_identifier());
  568. }
  569. Optional<CSS::Overflow> StyleProperties::overflow_x() const
  570. {
  571. return overflow(CSS::PropertyID::OverflowX);
  572. }
  573. Optional<CSS::Overflow> StyleProperties::overflow_y() const
  574. {
  575. return overflow(CSS::PropertyID::OverflowY);
  576. }
  577. Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) const
  578. {
  579. auto value = property(property_id);
  580. return value_id_to_overflow(value->to_identifier());
  581. }
  582. Vector<ShadowData> StyleProperties::shadow(PropertyID property_id) const
  583. {
  584. auto value = property(property_id);
  585. auto make_shadow_data = [](ShadowStyleValue const& value) {
  586. return ShadowData { value.color(), value.offset_x(), value.offset_y(), value.blur_radius(), value.spread_distance(), value.placement() };
  587. };
  588. if (value->is_value_list()) {
  589. auto& value_list = value->as_value_list();
  590. Vector<ShadowData> shadow_data;
  591. shadow_data.ensure_capacity(value_list.size());
  592. for (auto const& layer_value : value_list.values())
  593. shadow_data.append(make_shadow_data(layer_value->as_shadow()));
  594. return shadow_data;
  595. }
  596. if (value->is_shadow()) {
  597. auto& box = value->as_shadow();
  598. return { make_shadow_data(box) };
  599. }
  600. return {};
  601. }
  602. Vector<ShadowData> StyleProperties::box_shadow() const
  603. {
  604. return shadow(PropertyID::BoxShadow);
  605. }
  606. Vector<ShadowData> StyleProperties::text_shadow() const
  607. {
  608. return shadow(PropertyID::TextShadow);
  609. }
  610. Optional<CSS::BoxSizing> StyleProperties::box_sizing() const
  611. {
  612. auto value = property(CSS::PropertyID::BoxSizing);
  613. return value_id_to_box_sizing(value->to_identifier());
  614. }
  615. Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_align() const
  616. {
  617. auto value = property(CSS::PropertyID::VerticalAlign);
  618. if (value->is_identifier())
  619. return value_id_to_vertical_align(value->to_identifier()).release_value();
  620. if (value->is_length())
  621. return CSS::LengthPercentage(value->to_length());
  622. if (value->is_percentage())
  623. return CSS::LengthPercentage(value->as_percentage().percentage());
  624. VERIFY_NOT_REACHED();
  625. }
  626. Optional<CSS::FontVariant> StyleProperties::font_variant() const
  627. {
  628. auto value = property(CSS::PropertyID::FontVariant);
  629. return value_id_to_font_variant(value->to_identifier());
  630. }
  631. CSS::GridTrackSizeList StyleProperties::grid_template_columns() const
  632. {
  633. auto value = property(CSS::PropertyID::GridTemplateColumns);
  634. return value->as_grid_track_size_list().grid_track_size_list();
  635. }
  636. CSS::GridTrackSizeList StyleProperties::grid_template_rows() const
  637. {
  638. auto value = property(CSS::PropertyID::GridTemplateRows);
  639. return value->as_grid_track_size_list().grid_track_size_list();
  640. }
  641. CSS::GridTrackPlacement StyleProperties::grid_column_end() const
  642. {
  643. auto value = property(CSS::PropertyID::GridColumnEnd);
  644. return value->as_grid_track_placement().grid_track_placement();
  645. }
  646. CSS::GridTrackPlacement StyleProperties::grid_column_start() const
  647. {
  648. auto value = property(CSS::PropertyID::GridColumnStart);
  649. return value->as_grid_track_placement().grid_track_placement();
  650. }
  651. CSS::GridTrackPlacement StyleProperties::grid_row_end() const
  652. {
  653. auto value = property(CSS::PropertyID::GridRowEnd);
  654. return value->as_grid_track_placement().grid_track_placement();
  655. }
  656. CSS::GridTrackPlacement StyleProperties::grid_row_start() const
  657. {
  658. auto value = property(CSS::PropertyID::GridRowStart);
  659. return value->as_grid_track_placement().grid_track_placement();
  660. }
  661. Optional<CSS::BorderCollapse> StyleProperties::border_collapse() const
  662. {
  663. auto value = property(CSS::PropertyID::BorderCollapse);
  664. return value_id_to_border_collapse(value->to_identifier());
  665. }
  666. Vector<Vector<String>> StyleProperties::grid_template_areas() const
  667. {
  668. auto value = property(CSS::PropertyID::GridTemplateAreas);
  669. return value->as_grid_template_area().grid_template_area();
  670. }
  671. String StyleProperties::grid_area() const
  672. {
  673. auto value = property(CSS::PropertyID::GridArea);
  674. return value->as_string().to_string().release_value_but_fixme_should_propagate_errors();
  675. }
  676. }