StyleProperties.cpp 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021-2022, 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 <LibGfx/FontDatabase.h>
  10. #include <LibWeb/CSS/StyleProperties.h>
  11. #include <LibWeb/FontCache.h>
  12. #include <LibWeb/Layout/BlockContainer.h>
  13. #include <LibWeb/Layout/Node.h>
  14. namespace Web::CSS {
  15. StyleProperties::StyleProperties()
  16. {
  17. }
  18. StyleProperties::StyleProperties(const StyleProperties& other)
  19. : m_property_values(other.m_property_values)
  20. {
  21. if (other.m_font) {
  22. m_font = other.m_font->clone();
  23. } else {
  24. m_font = nullptr;
  25. }
  26. }
  27. NonnullRefPtr<StyleProperties> StyleProperties::clone() const
  28. {
  29. return adopt_ref(*new StyleProperties(*this));
  30. }
  31. void StyleProperties::set_property(CSS::PropertyID id, NonnullRefPtr<StyleValue> value)
  32. {
  33. m_property_values[to_underlying(id)] = move(value);
  34. }
  35. Optional<NonnullRefPtr<StyleValue>> StyleProperties::property(CSS::PropertyID property_id) const
  36. {
  37. auto value = m_property_values[to_underlying(property_id)];
  38. if (!value)
  39. return {};
  40. return value.release_nonnull();
  41. }
  42. Length StyleProperties::length_or_fallback(CSS::PropertyID id, Length const& fallback) const
  43. {
  44. auto maybe_value = property(id);
  45. if (!maybe_value.has_value())
  46. return fallback;
  47. auto& value = maybe_value.value();
  48. if (value->is_calculated())
  49. return Length::make_calculated(value->as_calculated());
  50. if (value->has_length())
  51. return value->to_length();
  52. return fallback;
  53. }
  54. LengthPercentage StyleProperties::length_percentage_or_fallback(CSS::PropertyID id, LengthPercentage const& fallback) const
  55. {
  56. return length_percentage(id).value_or(fallback);
  57. }
  58. Optional<LengthPercentage> StyleProperties::length_percentage(CSS::PropertyID id) const
  59. {
  60. auto maybe_value = property(id);
  61. if (!maybe_value.has_value())
  62. return {};
  63. auto& value = maybe_value.value();
  64. if (value->is_calculated())
  65. return LengthPercentage { value->as_calculated() };
  66. if (value->is_percentage())
  67. return value->as_percentage().percentage();
  68. if (value->has_length())
  69. return value->to_length();
  70. return {};
  71. }
  72. 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
  73. {
  74. LengthBox box;
  75. box.left = length_percentage_or_fallback(left_id, default_value);
  76. box.top = length_percentage_or_fallback(top_id, default_value);
  77. box.right = length_percentage_or_fallback(right_id, default_value);
  78. box.bottom = length_percentage_or_fallback(bottom_id, default_value);
  79. return box;
  80. }
  81. Color StyleProperties::color_or_fallback(CSS::PropertyID id, Layout::NodeWithStyle const& node, Color fallback) const
  82. {
  83. auto value = property(id);
  84. if (!value.has_value() || !value.value()->has_color())
  85. return fallback;
  86. return value.value()->to_color(node);
  87. }
  88. NonnullRefPtr<Gfx::Font> StyleProperties::font_fallback(bool monospace, bool bold)
  89. {
  90. if (monospace && bold)
  91. return Gfx::FontDatabase::default_fixed_width_font().bold_variant();
  92. if (monospace)
  93. return Gfx::FontDatabase::default_fixed_width_font();
  94. if (bold)
  95. return Gfx::FontDatabase::default_font().bold_variant();
  96. return Gfx::FontDatabase::default_font();
  97. }
  98. float StyleProperties::line_height(Layout::Node const& layout_node) const
  99. {
  100. constexpr float font_height_to_line_height_multiplier = 1.4f;
  101. if (auto maybe_line_height = property(CSS::PropertyID::LineHeight); maybe_line_height.has_value()) {
  102. auto line_height = maybe_line_height.release_value();
  103. if (line_height->is_identifier() && line_height->to_identifier() == ValueID::Normal)
  104. return Length(1, Length::Type::Em).to_px(layout_node) * font_height_to_line_height_multiplier;
  105. if (line_height->is_length()) {
  106. auto line_height_length = line_height->to_length();
  107. if (!line_height_length.is_auto())
  108. return line_height_length.to_px(layout_node);
  109. }
  110. if (line_height->is_numeric())
  111. return Length(line_height->to_number(), Length::Type::Em).to_px(layout_node);
  112. if (line_height->is_percentage()) {
  113. // Percentages are relative to 1em. https://www.w3.org/TR/css-inline-3/#valdef-line-height-percentage
  114. auto& percentage = line_height->as_percentage().percentage();
  115. return Length(percentage.as_fraction(), Length::Type::Em).to_px(layout_node);
  116. }
  117. }
  118. return Length(font_height_to_line_height_multiplier, Length::Type::Em).to_px(layout_node);
  119. }
  120. Optional<int> StyleProperties::z_index() const
  121. {
  122. auto maybe_value = property(CSS::PropertyID::ZIndex);
  123. if (!maybe_value.has_value())
  124. return {};
  125. auto& value = maybe_value.value();
  126. if (value->has_auto())
  127. return {};
  128. if (value->has_integer())
  129. return value->to_integer();
  130. return {};
  131. }
  132. float StyleProperties::opacity() const
  133. {
  134. auto maybe_value = property(CSS::PropertyID::Opacity);
  135. if (!maybe_value.has_value())
  136. return 1.0f;
  137. auto& value = maybe_value.value();
  138. float unclamped_opacity = 1.0f;
  139. if (value->has_number()) {
  140. unclamped_opacity = value->to_number();
  141. } else if (value->is_calculated()) {
  142. auto& calculated = value->as_calculated();
  143. if (calculated.resolved_type() == CalculatedStyleValue::ResolvedType::Percentage) {
  144. auto maybe_percentage = value->as_calculated().resolve_percentage();
  145. if (maybe_percentage.has_value())
  146. unclamped_opacity = maybe_percentage->as_fraction();
  147. else
  148. dbgln("Unable to resolve calc() as opacity (percentage): {}", value->to_string());
  149. } else {
  150. auto maybe_number = value->as_calculated().resolve_number();
  151. if (maybe_number.has_value())
  152. unclamped_opacity = maybe_number.value();
  153. else
  154. dbgln("Unable to resolve calc() as opacity (number): {}", value->to_string());
  155. }
  156. } else if (value->is_percentage()) {
  157. unclamped_opacity = value->as_percentage().percentage().as_fraction();
  158. }
  159. return clamp(unclamped_opacity, 0.0f, 1.0f);
  160. }
  161. Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
  162. {
  163. auto value = property(CSS::PropertyID::FlexDirection);
  164. if (!value.has_value())
  165. return {};
  166. switch (value.value()->to_identifier()) {
  167. case CSS::ValueID::Row:
  168. return CSS::FlexDirection::Row;
  169. case CSS::ValueID::RowReverse:
  170. return CSS::FlexDirection::RowReverse;
  171. case CSS::ValueID::Column:
  172. return CSS::FlexDirection::Column;
  173. case CSS::ValueID::ColumnReverse:
  174. return CSS::FlexDirection::ColumnReverse;
  175. default:
  176. return {};
  177. }
  178. }
  179. Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
  180. {
  181. auto value = property(CSS::PropertyID::FlexWrap);
  182. if (!value.has_value())
  183. return {};
  184. switch (value.value()->to_identifier()) {
  185. case CSS::ValueID::Wrap:
  186. return CSS::FlexWrap::Wrap;
  187. case CSS::ValueID::Nowrap:
  188. return CSS::FlexWrap::Nowrap;
  189. case CSS::ValueID::WrapReverse:
  190. return CSS::FlexWrap::WrapReverse;
  191. default:
  192. return {};
  193. }
  194. }
  195. Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
  196. {
  197. auto maybe_value = property(CSS::PropertyID::FlexBasis);
  198. if (!maybe_value.has_value())
  199. return {};
  200. auto& value = maybe_value.value();
  201. if (value->is_identifier() && value->to_identifier() == CSS::ValueID::Content)
  202. return { { CSS::FlexBasis::Content, {} } };
  203. if (value->has_auto())
  204. return { { CSS::FlexBasis::Auto, {} } };
  205. if (value->is_percentage())
  206. return { { CSS::FlexBasis::LengthPercentage, value->as_percentage().percentage() } };
  207. if (value->has_length())
  208. return { { CSS::FlexBasis::LengthPercentage, value->to_length() } };
  209. return {};
  210. }
  211. float StyleProperties::flex_grow() const
  212. {
  213. auto value = property(CSS::PropertyID::FlexGrow);
  214. if (!value.has_value() || !value.value()->has_number())
  215. return 0;
  216. return value.value()->to_number();
  217. }
  218. float StyleProperties::flex_shrink() const
  219. {
  220. auto value = property(CSS::PropertyID::FlexShrink);
  221. if (!value.has_value() || !value.value()->has_number())
  222. return 1;
  223. return value.value()->to_number();
  224. }
  225. Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
  226. {
  227. auto value = property(CSS::PropertyID::ImageRendering);
  228. if (!value.has_value())
  229. return {};
  230. switch (value.value()->to_identifier()) {
  231. case CSS::ValueID::Auto:
  232. return CSS::ImageRendering::Auto;
  233. case CSS::ValueID::CrispEdges:
  234. return CSS::ImageRendering::CrispEdges;
  235. case CSS::ValueID::HighQuality:
  236. return CSS::ImageRendering::HighQuality;
  237. case CSS::ValueID::Pixelated:
  238. return CSS::ImageRendering::Pixelated;
  239. case CSS::ValueID::Smooth:
  240. return CSS::ImageRendering::Smooth;
  241. default:
  242. return {};
  243. }
  244. }
  245. Optional<CSS::JustifyContent> StyleProperties::justify_content() const
  246. {
  247. auto value = property(CSS::PropertyID::JustifyContent);
  248. if (!value.has_value())
  249. return {};
  250. switch (value.value()->to_identifier()) {
  251. case CSS::ValueID::FlexStart:
  252. return CSS::JustifyContent::FlexStart;
  253. case CSS::ValueID::FlexEnd:
  254. return CSS::JustifyContent::FlexEnd;
  255. case CSS::ValueID::Center:
  256. return CSS::JustifyContent::Center;
  257. case CSS::ValueID::SpaceBetween:
  258. return CSS::JustifyContent::SpaceBetween;
  259. case CSS::ValueID::SpaceAround:
  260. return CSS::JustifyContent::SpaceAround;
  261. default:
  262. return {};
  263. }
  264. }
  265. Vector<CSS::Transformation> StyleProperties::transformations() const
  266. {
  267. auto value = property(CSS::PropertyID::Transform);
  268. if (!value.has_value())
  269. return {};
  270. if (value.value()->is_identifier() && value.value()->to_identifier() == CSS::ValueID::None)
  271. return {};
  272. if (!value.value()->is_value_list())
  273. return {};
  274. auto& list = value.value()->as_value_list();
  275. Vector<CSS::Transformation> transformations;
  276. for (auto& it : list.values()) {
  277. if (!it.is_transformation())
  278. return {};
  279. auto& transformation_style_value = it.as_transformation();
  280. CSS::Transformation transformation;
  281. transformation.function = transformation_style_value.transform_function();
  282. Vector<Variant<CSS::Length, float>> values;
  283. for (auto& transformation_value : transformation_style_value.values()) {
  284. if (transformation_value.is_length()) {
  285. values.append({ transformation_value.to_length() });
  286. } else if (transformation_value.is_numeric()) {
  287. values.append({ transformation_value.to_number() });
  288. } else {
  289. dbgln("FIXME: Unsupported value in transform!");
  290. }
  291. }
  292. transformation.values = move(values);
  293. transformations.append(move(transformation));
  294. }
  295. return transformations;
  296. }
  297. Optional<CSS::AlignItems> StyleProperties::align_items() const
  298. {
  299. auto value = property(CSS::PropertyID::AlignItems);
  300. if (!value.has_value())
  301. return {};
  302. switch (value.value()->to_identifier()) {
  303. case CSS::ValueID::FlexStart:
  304. return CSS::AlignItems::FlexStart;
  305. case CSS::ValueID::FlexEnd:
  306. return CSS::AlignItems::FlexEnd;
  307. case CSS::ValueID::Center:
  308. return CSS::AlignItems::Center;
  309. case CSS::ValueID::Baseline:
  310. return CSS::AlignItems::Baseline;
  311. case CSS::ValueID::Stretch:
  312. return CSS::AlignItems::Stretch;
  313. default:
  314. return {};
  315. }
  316. }
  317. Optional<CSS::Position> StyleProperties::position() const
  318. {
  319. auto value = property(CSS::PropertyID::Position);
  320. if (!value.has_value())
  321. return {};
  322. switch (value.value()->to_identifier()) {
  323. case CSS::ValueID::Static:
  324. return CSS::Position::Static;
  325. case CSS::ValueID::Relative:
  326. return CSS::Position::Relative;
  327. case CSS::ValueID::Absolute:
  328. return CSS::Position::Absolute;
  329. case CSS::ValueID::Fixed:
  330. return CSS::Position::Fixed;
  331. case CSS::ValueID::Sticky:
  332. return CSS::Position::Sticky;
  333. default:
  334. return {};
  335. }
  336. }
  337. bool StyleProperties::operator==(const StyleProperties& other) const
  338. {
  339. if (m_property_values.size() != other.m_property_values.size())
  340. return false;
  341. for (size_t i = 0; i < m_property_values.size(); ++i) {
  342. auto const& my_ptr = m_property_values[i];
  343. auto const& other_ptr = other.m_property_values[i];
  344. if (!my_ptr) {
  345. if (other_ptr)
  346. return false;
  347. continue;
  348. }
  349. if (!other_ptr)
  350. return false;
  351. auto const& my_value = *my_ptr;
  352. auto const& other_value = *other_ptr;
  353. if (my_value.type() != other_value.type())
  354. return false;
  355. if (my_value != other_value)
  356. return false;
  357. }
  358. return true;
  359. }
  360. Optional<CSS::TextAlign> StyleProperties::text_align() const
  361. {
  362. auto value = property(CSS::PropertyID::TextAlign);
  363. if (!value.has_value())
  364. return {};
  365. switch (value.value()->to_identifier()) {
  366. case CSS::ValueID::Left:
  367. return CSS::TextAlign::Left;
  368. case CSS::ValueID::Center:
  369. return CSS::TextAlign::Center;
  370. case CSS::ValueID::Right:
  371. return CSS::TextAlign::Right;
  372. case CSS::ValueID::Justify:
  373. return CSS::TextAlign::Justify;
  374. case CSS::ValueID::LibwebCenter:
  375. return CSS::TextAlign::LibwebCenter;
  376. default:
  377. return {};
  378. }
  379. }
  380. Optional<CSS::TextJustify> StyleProperties::text_justify() const
  381. {
  382. auto value = property(CSS::PropertyID::TextJustify);
  383. if (!value.has_value())
  384. return {};
  385. switch (value.value()->to_identifier()) {
  386. case CSS::ValueID::Auto:
  387. return CSS::TextJustify::Auto;
  388. case CSS::ValueID::None:
  389. return CSS::TextJustify::None;
  390. case CSS::ValueID::InterWord:
  391. return CSS::TextJustify::InterWord;
  392. case CSS::ValueID::Distribute:
  393. case CSS::ValueID::InterCharacter:
  394. return CSS::TextJustify::InterCharacter;
  395. default:
  396. return {};
  397. }
  398. }
  399. Optional<CSS::PointerEvents> StyleProperties::pointer_events() const
  400. {
  401. auto value = property(CSS::PropertyID::PointerEvents);
  402. if (!value.has_value())
  403. return {};
  404. switch (value.value()->to_identifier()) {
  405. case CSS::ValueID::Auto:
  406. return CSS::PointerEvents::Auto;
  407. case CSS::ValueID::All:
  408. return CSS::PointerEvents::All;
  409. case CSS::ValueID::None:
  410. return CSS::PointerEvents::None;
  411. default:
  412. return {};
  413. }
  414. }
  415. Optional<CSS::WhiteSpace> StyleProperties::white_space() const
  416. {
  417. auto value = property(CSS::PropertyID::WhiteSpace);
  418. if (!value.has_value())
  419. return {};
  420. switch (value.value()->to_identifier()) {
  421. case CSS::ValueID::Normal:
  422. return CSS::WhiteSpace::Normal;
  423. case CSS::ValueID::Nowrap:
  424. return CSS::WhiteSpace::Nowrap;
  425. case CSS::ValueID::Pre:
  426. return CSS::WhiteSpace::Pre;
  427. case CSS::ValueID::PreLine:
  428. return CSS::WhiteSpace::PreLine;
  429. case CSS::ValueID::PreWrap:
  430. return CSS::WhiteSpace::PreWrap;
  431. default:
  432. return {};
  433. }
  434. }
  435. Optional<CSS::LineStyle> StyleProperties::line_style(CSS::PropertyID property_id) const
  436. {
  437. auto value = property(property_id);
  438. if (!value.has_value())
  439. return {};
  440. switch (value.value()->to_identifier()) {
  441. case CSS::ValueID::None:
  442. return CSS::LineStyle::None;
  443. case CSS::ValueID::Hidden:
  444. return CSS::LineStyle::Hidden;
  445. case CSS::ValueID::Dotted:
  446. return CSS::LineStyle::Dotted;
  447. case CSS::ValueID::Dashed:
  448. return CSS::LineStyle::Dashed;
  449. case CSS::ValueID::Solid:
  450. return CSS::LineStyle::Solid;
  451. case CSS::ValueID::Double:
  452. return CSS::LineStyle::Double;
  453. case CSS::ValueID::Groove:
  454. return CSS::LineStyle::Groove;
  455. case CSS::ValueID::Ridge:
  456. return CSS::LineStyle::Ridge;
  457. case CSS::ValueID::Inset:
  458. return CSS::LineStyle::Inset;
  459. case CSS::ValueID::Outset:
  460. return CSS::LineStyle::Outset;
  461. default:
  462. return {};
  463. }
  464. }
  465. Optional<CSS::Float> StyleProperties::float_() const
  466. {
  467. auto value = property(CSS::PropertyID::Float);
  468. if (!value.has_value())
  469. return {};
  470. switch (value.value()->to_identifier()) {
  471. case CSS::ValueID::None:
  472. return CSS::Float::None;
  473. case CSS::ValueID::Left:
  474. return CSS::Float::Left;
  475. case CSS::ValueID::Right:
  476. return CSS::Float::Right;
  477. default:
  478. return {};
  479. }
  480. }
  481. Optional<CSS::Clear> StyleProperties::clear() const
  482. {
  483. auto value = property(CSS::PropertyID::Clear);
  484. if (!value.has_value())
  485. return {};
  486. switch (value.value()->to_identifier()) {
  487. case CSS::ValueID::None:
  488. return CSS::Clear::None;
  489. case CSS::ValueID::Left:
  490. return CSS::Clear::Left;
  491. case CSS::ValueID::Right:
  492. return CSS::Clear::Right;
  493. case CSS::ValueID::Both:
  494. return CSS::Clear::Both;
  495. default:
  496. return {};
  497. }
  498. }
  499. CSS::ContentData StyleProperties::content() const
  500. {
  501. auto maybe_value = property(CSS::PropertyID::Content);
  502. if (!maybe_value.has_value())
  503. return CSS::ContentData {};
  504. auto& value = maybe_value.value();
  505. if (value->is_content()) {
  506. auto& content_style_value = value->as_content();
  507. CSS::ContentData content_data;
  508. // FIXME: The content is a list of things: strings, identifiers or functions that return strings, and images.
  509. // So it can't always be represented as a single String, but may have to be multiple boxes.
  510. // For now, we'll just assume strings since that is easiest.
  511. StringBuilder builder;
  512. for (auto const& item : content_style_value.content().values()) {
  513. if (item.is_string()) {
  514. builder.append(item.to_string());
  515. } else {
  516. // TODO: Implement quotes, counters, images, and other things.
  517. }
  518. }
  519. content_data.type = ContentData::Type::String;
  520. content_data.data = builder.to_string();
  521. if (content_style_value.has_alt_text()) {
  522. StringBuilder alt_text_builder;
  523. for (auto const& item : content_style_value.alt_text()->values()) {
  524. if (item.is_string()) {
  525. alt_text_builder.append(item.to_string());
  526. } else {
  527. // TODO: Implement counters
  528. }
  529. }
  530. content_data.alt_text = alt_text_builder.to_string();
  531. }
  532. return content_data;
  533. }
  534. switch (value->to_identifier()) {
  535. case ValueID::None:
  536. return { ContentData::Type::None };
  537. case ValueID::Normal:
  538. return { ContentData::Type::Normal };
  539. default:
  540. break;
  541. }
  542. return CSS::ContentData {};
  543. }
  544. Optional<CSS::Cursor> StyleProperties::cursor() const
  545. {
  546. auto value = property(CSS::PropertyID::Cursor);
  547. if (!value.has_value())
  548. return {};
  549. switch (value.value()->to_identifier()) {
  550. case CSS::ValueID::Auto:
  551. return CSS::Cursor::Auto;
  552. case CSS::ValueID::Default:
  553. return CSS::Cursor::Default;
  554. case CSS::ValueID::None:
  555. return CSS::Cursor::None;
  556. case CSS::ValueID::ContextMenu:
  557. return CSS::Cursor::ContextMenu;
  558. case CSS::ValueID::Help:
  559. return CSS::Cursor::Help;
  560. case CSS::ValueID::Pointer:
  561. return CSS::Cursor::Pointer;
  562. case CSS::ValueID::Progress:
  563. return CSS::Cursor::Progress;
  564. case CSS::ValueID::Wait:
  565. return CSS::Cursor::Wait;
  566. case CSS::ValueID::Cell:
  567. return CSS::Cursor::Cell;
  568. case CSS::ValueID::Crosshair:
  569. return CSS::Cursor::Crosshair;
  570. case CSS::ValueID::Text:
  571. return CSS::Cursor::Text;
  572. case CSS::ValueID::VerticalText:
  573. return CSS::Cursor::VerticalText;
  574. case CSS::ValueID::Alias:
  575. return CSS::Cursor::Alias;
  576. case CSS::ValueID::Copy:
  577. return CSS::Cursor::Copy;
  578. case CSS::ValueID::Move:
  579. return CSS::Cursor::Move;
  580. case CSS::ValueID::NoDrop:
  581. return CSS::Cursor::NoDrop;
  582. case CSS::ValueID::NotAllowed:
  583. return CSS::Cursor::NotAllowed;
  584. case CSS::ValueID::Grab:
  585. return CSS::Cursor::Grab;
  586. case CSS::ValueID::Grabbing:
  587. return CSS::Cursor::Grabbing;
  588. case CSS::ValueID::EResize:
  589. return CSS::Cursor::EResize;
  590. case CSS::ValueID::NResize:
  591. return CSS::Cursor::NResize;
  592. case CSS::ValueID::NeResize:
  593. return CSS::Cursor::NeResize;
  594. case CSS::ValueID::NwResize:
  595. return CSS::Cursor::NwResize;
  596. case CSS::ValueID::SResize:
  597. return CSS::Cursor::SResize;
  598. case CSS::ValueID::SeResize:
  599. return CSS::Cursor::SeResize;
  600. case CSS::ValueID::SwResize:
  601. return CSS::Cursor::SwResize;
  602. case CSS::ValueID::WResize:
  603. return CSS::Cursor::WResize;
  604. case CSS::ValueID::EwResize:
  605. return CSS::Cursor::EwResize;
  606. case CSS::ValueID::NsResize:
  607. return CSS::Cursor::NsResize;
  608. case CSS::ValueID::NeswResize:
  609. return CSS::Cursor::NeswResize;
  610. case CSS::ValueID::NwseResize:
  611. return CSS::Cursor::NwseResize;
  612. case CSS::ValueID::ColResize:
  613. return CSS::Cursor::ColResize;
  614. case CSS::ValueID::RowResize:
  615. return CSS::Cursor::RowResize;
  616. case CSS::ValueID::AllScroll:
  617. return CSS::Cursor::AllScroll;
  618. case CSS::ValueID::ZoomIn:
  619. return CSS::Cursor::ZoomIn;
  620. case CSS::ValueID::ZoomOut:
  621. return CSS::Cursor::ZoomOut;
  622. default:
  623. return {};
  624. }
  625. }
  626. CSS::Display StyleProperties::display() const
  627. {
  628. auto value = property(CSS::PropertyID::Display);
  629. if (!value.has_value() || !value.value()->is_identifier())
  630. return CSS::Display::from_short(CSS::Display::Short::Inline);
  631. switch (value.value()->to_identifier()) {
  632. case CSS::ValueID::None:
  633. return CSS::Display::from_short(CSS::Display::Short::None);
  634. case CSS::ValueID::Block:
  635. return CSS::Display::from_short(CSS::Display::Short::Block);
  636. case CSS::ValueID::Inline:
  637. return CSS::Display::from_short(CSS::Display::Short::Inline);
  638. case CSS::ValueID::InlineBlock:
  639. return CSS::Display::from_short(CSS::Display::Short::InlineBlock);
  640. case CSS::ValueID::ListItem:
  641. return CSS::Display::from_short(CSS::Display::Short::ListItem);
  642. case CSS::ValueID::Table:
  643. return CSS::Display::from_short(CSS::Display::Short::Table);
  644. case CSS::ValueID::TableRow:
  645. return CSS::Display { CSS::Display::Internal::TableRow };
  646. case CSS::ValueID::TableCell:
  647. return CSS::Display { CSS::Display::Internal::TableCell };
  648. case CSS::ValueID::TableColumn:
  649. return CSS::Display { CSS::Display::Internal::TableColumn };
  650. case CSS::ValueID::TableColumnGroup:
  651. return CSS::Display { CSS::Display::Internal::TableColumnGroup };
  652. case CSS::ValueID::TableCaption:
  653. return CSS::Display { CSS::Display::Internal::TableCaption };
  654. case CSS::ValueID::TableRowGroup:
  655. return CSS::Display { CSS::Display::Internal::TableRowGroup };
  656. case CSS::ValueID::TableHeaderGroup:
  657. return CSS::Display { CSS::Display::Internal::TableHeaderGroup };
  658. case CSS::ValueID::TableFooterGroup:
  659. return CSS::Display { CSS::Display::Internal::TableFooterGroup };
  660. case CSS::ValueID::Flex:
  661. return CSS::Display::from_short(CSS::Display::Short::Flex);
  662. case CSS::ValueID::InlineFlex:
  663. return CSS::Display::from_short(CSS::Display::Short::InlineFlex);
  664. default:
  665. return CSS::Display::from_short(CSS::Display::Short::Block);
  666. }
  667. }
  668. Optional<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
  669. {
  670. auto value = property(CSS::PropertyID::TextDecorationLine);
  671. if (!value.has_value())
  672. return {};
  673. switch (value.value()->to_identifier()) {
  674. case CSS::ValueID::None:
  675. return CSS::TextDecorationLine::None;
  676. case CSS::ValueID::Underline:
  677. return CSS::TextDecorationLine::Underline;
  678. case CSS::ValueID::Overline:
  679. return CSS::TextDecorationLine::Overline;
  680. case CSS::ValueID::LineThrough:
  681. return CSS::TextDecorationLine::LineThrough;
  682. case CSS::ValueID::Blink:
  683. return CSS::TextDecorationLine::Blink;
  684. default:
  685. return {};
  686. }
  687. }
  688. Optional<CSS::TextDecorationStyle> StyleProperties::text_decoration_style() const
  689. {
  690. auto value = property(CSS::PropertyID::TextDecorationStyle);
  691. if (!value.has_value())
  692. return {};
  693. switch (value.value()->to_identifier()) {
  694. case CSS::ValueID::Solid:
  695. return CSS::TextDecorationStyle::Solid;
  696. case CSS::ValueID::Double:
  697. return CSS::TextDecorationStyle::Double;
  698. case CSS::ValueID::Dotted:
  699. return CSS::TextDecorationStyle::Dotted;
  700. case CSS::ValueID::Dashed:
  701. return CSS::TextDecorationStyle::Dashed;
  702. case CSS::ValueID::Wavy:
  703. return CSS::TextDecorationStyle::Wavy;
  704. default:
  705. return {};
  706. }
  707. }
  708. Optional<CSS::TextTransform> StyleProperties::text_transform() const
  709. {
  710. auto value = property(CSS::PropertyID::TextTransform);
  711. if (!value.has_value())
  712. return {};
  713. switch (value.value()->to_identifier()) {
  714. case CSS::ValueID::None:
  715. return CSS::TextTransform::None;
  716. case CSS::ValueID::Lowercase:
  717. return CSS::TextTransform::Lowercase;
  718. case CSS::ValueID::Uppercase:
  719. return CSS::TextTransform::Uppercase;
  720. case CSS::ValueID::Capitalize:
  721. return CSS::TextTransform::Capitalize;
  722. case CSS::ValueID::FullWidth:
  723. return CSS::TextTransform::FullWidth;
  724. case CSS::ValueID::FullSizeKana:
  725. return CSS::TextTransform::FullSizeKana;
  726. default:
  727. return {};
  728. }
  729. }
  730. Optional<CSS::ListStyleType> StyleProperties::list_style_type() const
  731. {
  732. auto value = property(CSS::PropertyID::ListStyleType);
  733. if (!value.has_value())
  734. return {};
  735. switch (value.value()->to_identifier()) {
  736. case CSS::ValueID::None:
  737. return CSS::ListStyleType::None;
  738. case CSS::ValueID::Disc:
  739. return CSS::ListStyleType::Disc;
  740. case CSS::ValueID::Circle:
  741. return CSS::ListStyleType::Circle;
  742. case CSS::ValueID::Square:
  743. return CSS::ListStyleType::Square;
  744. case CSS::ValueID::Decimal:
  745. return CSS::ListStyleType::Decimal;
  746. case CSS::ValueID::DecimalLeadingZero:
  747. return CSS::ListStyleType::DecimalLeadingZero;
  748. case CSS::ValueID::LowerAlpha:
  749. return CSS::ListStyleType::LowerAlpha;
  750. case CSS::ValueID::LowerLatin:
  751. return CSS::ListStyleType::LowerLatin;
  752. case CSS::ValueID::UpperAlpha:
  753. return CSS::ListStyleType::UpperAlpha;
  754. case CSS::ValueID::UpperLatin:
  755. return CSS::ListStyleType::UpperLatin;
  756. case CSS::ValueID::UpperRoman:
  757. return CSS::ListStyleType::UpperRoman;
  758. case CSS::ValueID::LowerRoman:
  759. return CSS::ListStyleType::LowerRoman;
  760. default:
  761. return {};
  762. }
  763. }
  764. Optional<CSS::Overflow> StyleProperties::overflow_x() const
  765. {
  766. return overflow(CSS::PropertyID::OverflowX);
  767. }
  768. Optional<CSS::Overflow> StyleProperties::overflow_y() const
  769. {
  770. return overflow(CSS::PropertyID::OverflowY);
  771. }
  772. Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) const
  773. {
  774. auto value = property(property_id);
  775. if (!value.has_value())
  776. return {};
  777. switch (value.value()->to_identifier()) {
  778. case CSS::ValueID::Auto:
  779. return CSS::Overflow::Auto;
  780. case CSS::ValueID::Visible:
  781. return CSS::Overflow::Visible;
  782. case CSS::ValueID::Hidden:
  783. return CSS::Overflow::Hidden;
  784. case CSS::ValueID::Clip:
  785. return CSS::Overflow::Clip;
  786. case CSS::ValueID::Scroll:
  787. return CSS::Overflow::Scroll;
  788. default:
  789. return {};
  790. }
  791. }
  792. Vector<BoxShadowData> StyleProperties::box_shadow() const
  793. {
  794. auto value_or_error = property(PropertyID::BoxShadow);
  795. if (!value_or_error.has_value())
  796. return {};
  797. auto value = value_or_error.value();
  798. auto make_box_shadow_data = [](BoxShadowStyleValue const& box) {
  799. return BoxShadowData { box.color(), box.offset_x(), box.offset_y(), box.blur_radius(), box.spread_distance(), box.placement() };
  800. };
  801. if (value->is_value_list()) {
  802. auto& value_list = value->as_value_list();
  803. Vector<BoxShadowData> box_shadow_data;
  804. box_shadow_data.ensure_capacity(value_list.size());
  805. for (auto const& layer_value : value_list.values())
  806. box_shadow_data.append(make_box_shadow_data(layer_value.as_box_shadow()));
  807. return box_shadow_data;
  808. }
  809. if (value->is_box_shadow()) {
  810. auto& box = value->as_box_shadow();
  811. return { make_box_shadow_data(box) };
  812. }
  813. return {};
  814. }
  815. CSS::BoxSizing StyleProperties::box_sizing() const
  816. {
  817. auto value = property(CSS::PropertyID::BoxSizing);
  818. if (!value.has_value())
  819. return {};
  820. switch (value.value()->to_identifier()) {
  821. case CSS::ValueID::BorderBox:
  822. return CSS::BoxSizing::BorderBox;
  823. case CSS::ValueID::ContentBox:
  824. return CSS::BoxSizing::ContentBox;
  825. default:
  826. return {};
  827. }
  828. }
  829. Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_align() const
  830. {
  831. auto value = property(CSS::PropertyID::VerticalAlign);
  832. if (!value.has_value())
  833. VERIFY_NOT_REACHED();
  834. if (value.value()->is_identifier()) {
  835. switch (value.value()->to_identifier()) {
  836. case CSS::ValueID::Baseline:
  837. return CSS::VerticalAlign::Baseline;
  838. case CSS::ValueID::Bottom:
  839. return CSS::VerticalAlign::Bottom;
  840. case CSS::ValueID::Middle:
  841. return CSS::VerticalAlign::Middle;
  842. case CSS::ValueID::Sub:
  843. return CSS::VerticalAlign::Sub;
  844. case CSS::ValueID::Super:
  845. return CSS::VerticalAlign::Super;
  846. case CSS::ValueID::TextBottom:
  847. return CSS::VerticalAlign::TextBottom;
  848. case CSS::ValueID::TextTop:
  849. return CSS::VerticalAlign::TextTop;
  850. case CSS::ValueID::Top:
  851. return CSS::VerticalAlign::Top;
  852. default:
  853. VERIFY_NOT_REACHED();
  854. }
  855. }
  856. if (value.value()->is_length())
  857. return CSS::LengthPercentage(value.value()->to_length());
  858. if (value.value()->is_percentage())
  859. return CSS::LengthPercentage(value.value()->as_percentage().percentage());
  860. VERIFY_NOT_REACHED();
  861. }
  862. }