StyleValue.cpp 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
  4. * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <AK/ByteBuffer.h>
  9. #include <LibGfx/Palette.h>
  10. #include <LibWeb/CSS/Serialize.h>
  11. #include <LibWeb/CSS/StyleValue.h>
  12. #include <LibWeb/DOM/Document.h>
  13. #include <LibWeb/HTML/BrowsingContext.h>
  14. #include <LibWeb/Loader/LoadRequest.h>
  15. #include <LibWeb/Loader/ResourceLoader.h>
  16. #include <LibWeb/Page/Page.h>
  17. namespace Web::CSS {
  18. StyleValue::StyleValue(Type type)
  19. : m_type(type)
  20. {
  21. }
  22. StyleValue::~StyleValue()
  23. {
  24. }
  25. BackgroundStyleValue const& StyleValue::as_background() const
  26. {
  27. VERIFY(is_background());
  28. return static_cast<BackgroundStyleValue const&>(*this);
  29. }
  30. BackgroundRepeatStyleValue const& StyleValue::as_background_repeat() const
  31. {
  32. VERIFY(is_background_repeat());
  33. return static_cast<BackgroundRepeatStyleValue const&>(*this);
  34. }
  35. BackgroundSizeStyleValue const& StyleValue::as_background_size() const
  36. {
  37. VERIFY(is_background_size());
  38. return static_cast<BackgroundSizeStyleValue const&>(*this);
  39. }
  40. BorderStyleValue const& StyleValue::as_border() const
  41. {
  42. VERIFY(is_border());
  43. return static_cast<BorderStyleValue const&>(*this);
  44. }
  45. BorderRadiusStyleValue const& StyleValue::as_border_radius() const
  46. {
  47. VERIFY(is_border_radius());
  48. return static_cast<BorderRadiusStyleValue const&>(*this);
  49. }
  50. BoxShadowStyleValue const& StyleValue::as_box_shadow() const
  51. {
  52. VERIFY(is_box_shadow());
  53. return static_cast<BoxShadowStyleValue const&>(*this);
  54. }
  55. CalculatedStyleValue const& StyleValue::as_calculated() const
  56. {
  57. VERIFY(is_calculated());
  58. return static_cast<CalculatedStyleValue const&>(*this);
  59. }
  60. ColorStyleValue const& StyleValue::as_color() const
  61. {
  62. VERIFY(is_color());
  63. return static_cast<ColorStyleValue const&>(*this);
  64. }
  65. FlexStyleValue const& StyleValue::as_flex() const
  66. {
  67. VERIFY(is_flex());
  68. return static_cast<FlexStyleValue const&>(*this);
  69. }
  70. FlexFlowStyleValue const& StyleValue::as_flex_flow() const
  71. {
  72. VERIFY(is_flex_flow());
  73. return static_cast<FlexFlowStyleValue const&>(*this);
  74. }
  75. FontStyleValue const& StyleValue::as_font() const
  76. {
  77. VERIFY(is_font());
  78. return static_cast<FontStyleValue const&>(*this);
  79. }
  80. IdentifierStyleValue const& StyleValue::as_identifier() const
  81. {
  82. VERIFY(is_identifier());
  83. return static_cast<IdentifierStyleValue const&>(*this);
  84. }
  85. ImageStyleValue const& StyleValue::as_image() const
  86. {
  87. VERIFY(is_image());
  88. return static_cast<ImageStyleValue const&>(*this);
  89. }
  90. InheritStyleValue const& StyleValue::as_inherit() const
  91. {
  92. VERIFY(is_inherit());
  93. return static_cast<InheritStyleValue const&>(*this);
  94. }
  95. InitialStyleValue const& StyleValue::as_initial() const
  96. {
  97. VERIFY(is_initial());
  98. return static_cast<InitialStyleValue const&>(*this);
  99. }
  100. LengthStyleValue const& StyleValue::as_length() const
  101. {
  102. VERIFY(is_length());
  103. return static_cast<LengthStyleValue const&>(*this);
  104. }
  105. ListStyleStyleValue const& StyleValue::as_list_style() const
  106. {
  107. VERIFY(is_list_style());
  108. return static_cast<ListStyleStyleValue const&>(*this);
  109. }
  110. NumericStyleValue const& StyleValue::as_numeric() const
  111. {
  112. VERIFY(is_numeric());
  113. return static_cast<NumericStyleValue const&>(*this);
  114. }
  115. OverflowStyleValue const& StyleValue::as_overflow() const
  116. {
  117. VERIFY(is_overflow());
  118. return static_cast<OverflowStyleValue const&>(*this);
  119. }
  120. PercentageStyleValue const& StyleValue::as_percentage() const
  121. {
  122. VERIFY(is_percentage());
  123. return static_cast<PercentageStyleValue const&>(*this);
  124. }
  125. PositionStyleValue const& StyleValue::as_position() const
  126. {
  127. VERIFY(is_position());
  128. return static_cast<PositionStyleValue const&>(*this);
  129. }
  130. StringStyleValue const& StyleValue::as_string() const
  131. {
  132. VERIFY(is_string());
  133. return static_cast<StringStyleValue const&>(*this);
  134. }
  135. TextDecorationStyleValue const& StyleValue::as_text_decoration() const
  136. {
  137. VERIFY(is_text_decoration());
  138. return static_cast<TextDecorationStyleValue const&>(*this);
  139. }
  140. TransformationStyleValue const& StyleValue::as_transformation() const
  141. {
  142. VERIFY(is_transformation());
  143. return static_cast<TransformationStyleValue const&>(*this);
  144. }
  145. UnresolvedStyleValue const& StyleValue::as_unresolved() const
  146. {
  147. VERIFY(is_unresolved());
  148. return static_cast<UnresolvedStyleValue const&>(*this);
  149. }
  150. UnsetStyleValue const& StyleValue::as_unset() const
  151. {
  152. VERIFY(is_unset());
  153. return static_cast<UnsetStyleValue const&>(*this);
  154. }
  155. StyleValueList const& StyleValue::as_value_list() const
  156. {
  157. VERIFY(is_value_list());
  158. return static_cast<StyleValueList const&>(*this);
  159. }
  160. BackgroundStyleValue::BackgroundStyleValue(
  161. NonnullRefPtr<StyleValue> color,
  162. NonnullRefPtr<StyleValue> image,
  163. NonnullRefPtr<StyleValue> position,
  164. NonnullRefPtr<StyleValue> size,
  165. NonnullRefPtr<StyleValue> repeat,
  166. NonnullRefPtr<StyleValue> attachment,
  167. NonnullRefPtr<StyleValue> origin,
  168. NonnullRefPtr<StyleValue> clip)
  169. : StyleValue(Type::Background)
  170. , m_color(color)
  171. , m_image(image)
  172. , m_position(position)
  173. , m_size(size)
  174. , m_repeat(repeat)
  175. , m_attachment(attachment)
  176. , m_origin(origin)
  177. , m_clip(clip)
  178. {
  179. auto layer_count = [](auto style_value) -> size_t {
  180. if (style_value->is_value_list())
  181. return style_value->as_value_list().size();
  182. else
  183. return 1;
  184. };
  185. m_layer_count = max(layer_count(m_image), layer_count(m_position));
  186. m_layer_count = max(m_layer_count, layer_count(m_size));
  187. m_layer_count = max(m_layer_count, layer_count(m_repeat));
  188. m_layer_count = max(m_layer_count, layer_count(m_attachment));
  189. m_layer_count = max(m_layer_count, layer_count(m_origin));
  190. m_layer_count = max(m_layer_count, layer_count(m_clip));
  191. VERIFY(!m_color->is_value_list());
  192. }
  193. String BackgroundStyleValue::to_string() const
  194. {
  195. if (m_layer_count == 1) {
  196. return String::formatted("{} {} {} {} {} {} {} {}", m_color->to_string(), m_image->to_string(), m_position->to_string(), m_size->to_string(), m_repeat->to_string(), m_attachment->to_string(), m_origin->to_string(), m_clip->to_string());
  197. }
  198. auto get_layer_value_string = [](NonnullRefPtr<StyleValue> const& style_value, size_t index) {
  199. if (style_value->is_value_list())
  200. return style_value->as_value_list().value_at(index, true)->to_string();
  201. return style_value->to_string();
  202. };
  203. StringBuilder builder;
  204. for (size_t i = 0; i < m_layer_count; i++) {
  205. if (i)
  206. builder.append(", ");
  207. if (i == m_layer_count - 1)
  208. builder.appendff("{} ", m_color->to_string());
  209. builder.appendff("{} {} {} {} {} {} {}", get_layer_value_string(m_image, i), get_layer_value_string(m_position, i), get_layer_value_string(m_size, i), get_layer_value_string(m_repeat, i), get_layer_value_string(m_attachment, i), get_layer_value_string(m_origin, i), get_layer_value_string(m_clip, i));
  210. }
  211. return builder.to_string();
  212. }
  213. <<<<<<< HEAD
  214. String BackgroundRepeatStyleValue::to_string() const
  215. {
  216. return String::formatted("{} {}", CSS::to_string(m_repeat_x), CSS::to_string(m_repeat_y));
  217. }
  218. String BackgroundSizeStyleValue::to_string() const
  219. {
  220. return String::formatted("{} {}", m_size_x.to_string(), m_size_y.to_string());
  221. }
  222. String BorderStyleValue::to_string() const
  223. {
  224. return String::formatted("{} {} {}", m_border_width->to_string(), m_border_style->to_string(), m_border_color->to_string());
  225. }
  226. String BorderRadiusStyleValue::to_string() const
  227. {
  228. return String::formatted("{} / {}", m_horizontal_radius.to_string(), m_vertical_radius.to_string());
  229. }
  230. String BoxShadowStyleValue::to_string() const
  231. {
  232. return String::formatted("{} {} {} {}", m_offset_x.to_string(), m_offset_y.to_string(), m_blur_radius.to_string(), m_color.to_string());
  233. =======
  234. void CalculatedStyleValue::CalculationResult::add(CalculationResult const& other, Layout::Node const* layout_node, Length const& percentage_basis)
  235. {
  236. add_or_subtract_internal(SumOperation::Add, other, layout_node, percentage_basis);
  237. }
  238. void CalculatedStyleValue::CalculationResult::subtract(CalculationResult const& other, Layout::Node const* layout_node, Length const& percentage_basis)
  239. {
  240. add_or_subtract_internal(SumOperation::Subtract, other, layout_node, percentage_basis);
  241. }
  242. void CalculatedStyleValue::CalculationResult::add_or_subtract_internal(SumOperation op, CalculationResult const& other, Layout::Node const* layout_node, Length const& percentage_basis)
  243. {
  244. // We know from validation when resolving the type, that "both sides have the same type, or that one side is a <number> and the other is an <integer>".
  245. // Though, having the same type may mean that one side is a <dimension> and the other a <percentage>.
  246. // Note: This is almost identical to ::add()
  247. m_value.visit(
  248. [&](float f) {
  249. if (op == SumOperation::Add)
  250. m_value = f + other.m_value.get<float>();
  251. else
  252. m_value = f - other.m_value.get<float>();
  253. },
  254. [&](Length const& length) {
  255. auto this_px = length.to_px(*layout_node);
  256. if (other.m_value.has<Length>()) {
  257. auto other_px = other.m_value.get<Length>().to_px(*layout_node);
  258. if (op == SumOperation::Add)
  259. m_value = Length::make_px(this_px + other_px);
  260. else
  261. m_value = Length::make_px(this_px - other_px);
  262. } else {
  263. VERIFY(!percentage_basis.is_undefined());
  264. auto other_px = percentage_basis.percentage_of(other.m_value.get<Percentage>()).to_px(*layout_node);
  265. if (op == SumOperation::Add)
  266. m_value = Length::make_px(this_px + other_px);
  267. else
  268. m_value = Length::make_px(this_px - other_px);
  269. }
  270. },
  271. [&](Percentage const& percentage) {
  272. if (other.m_value.has<Percentage>()) {
  273. if (op == SumOperation::Add)
  274. m_value = Percentage { percentage.value() + other.m_value.get<Percentage>().value() };
  275. else
  276. m_value = Percentage { percentage.value() - other.m_value.get<Percentage>().value() };
  277. return;
  278. }
  279. // Other side isn't a percentage, so the easiest way to handle it without duplicating all the logic, is just to swap `this` and `other`.
  280. CalculationResult new_value = other;
  281. if (op == SumOperation::Add)
  282. new_value.add(*this, layout_node, percentage_basis);
  283. else
  284. new_value.subtract(*this, layout_node, percentage_basis);
  285. *this = new_value;
  286. });
  287. }
  288. void CalculatedStyleValue::CalculationResult::multiply_by(CalculationResult const& other, Layout::Node const* layout_node)
  289. {
  290. // We know from validation when resolving the type, that at least one side must be a <number> or <integer>.
  291. // Both of these are represented as a float.
  292. VERIFY(m_value.has<float>() || other.m_value.has<float>());
  293. bool other_is_number = other.m_value.has<float>();
  294. m_value.visit(
  295. [&](float f) {
  296. if (other_is_number) {
  297. m_value = f * other.m_value.get<float>();
  298. } else {
  299. // Avoid duplicating all the logic by swapping `this` and `other`.
  300. CalculationResult new_value = other;
  301. new_value.multiply_by(*this, layout_node);
  302. *this = new_value;
  303. }
  304. },
  305. [&](Length const& length) {
  306. m_value = Length::make_px(length.to_px(*layout_node) * other.m_value.get<float>());
  307. },
  308. [&](Percentage const& percentage) {
  309. m_value = Percentage { percentage.value() * other.m_value.get<float>() };
  310. });
  311. }
  312. void CalculatedStyleValue::CalculationResult::divide_by(CalculationResult const& other, Layout::Node const* layout_node)
  313. {
  314. // We know from validation when resolving the type, that `other` must be a <number> or <integer>.
  315. // Both of these are represented as a float.
  316. float denominator = other.m_value.get<float>();
  317. // FIXME: Dividing by 0 is invalid, and should be caught during parsing.
  318. VERIFY(denominator != 0.0f);
  319. m_value.visit(
  320. [&](float f) {
  321. m_value = f / denominator;
  322. },
  323. [&](Length const& length) {
  324. m_value = Length::make_px(length.to_px(*layout_node) / denominator);
  325. },
  326. [&](Percentage const& percentage) {
  327. m_value = Percentage { percentage.value() / denominator };
  328. });
  329. >>>>>>> d91d120251 (LibWeb: Implement CalculationResult type for calc() results)
  330. }
  331. static float resolve_calc_value(CalculatedStyleValue::CalcValue const& calc_value, Layout::Node const& layout_node);
  332. static float resolve_calc_number_value(CalculatedStyleValue::CalcNumberValue const&);
  333. static float resolve_calc_product(NonnullOwnPtr<CalculatedStyleValue::CalcProduct> const& calc_product, Layout::Node const& layout_node);
  334. static float resolve_calc_sum(NonnullOwnPtr<CalculatedStyleValue::CalcSum> const& calc_sum, Layout::Node const& layout_node);
  335. static float resolve_calc_number_sum(NonnullOwnPtr<CalculatedStyleValue::CalcNumberSum> const&);
  336. static float resolve_calc_number_product(NonnullOwnPtr<CalculatedStyleValue::CalcNumberProduct> const&);
  337. Optional<Length> CalculatedStyleValue::resolve_length(Layout::Node const& layout_node) const
  338. {
  339. auto length = resolve_calc_sum(m_expression, layout_node);
  340. return Length::make_px(length);
  341. }
  342. static float resolve_calc_value(CalculatedStyleValue::CalcValue const& calc_value, Layout::Node const& layout_node)
  343. {
  344. return calc_value.value.visit(
  345. [](float value) { return value; },
  346. [&](Length const& length) {
  347. return length.resolved_or_zero(layout_node).to_px(layout_node);
  348. },
  349. [&](NonnullOwnPtr<CalculatedStyleValue::CalcSum> const& calc_sum) {
  350. return resolve_calc_sum(calc_sum, layout_node);
  351. },
  352. [](auto&) {
  353. VERIFY_NOT_REACHED();
  354. return 0.0f;
  355. });
  356. }
  357. static float resolve_calc_number_product(NonnullOwnPtr<CalculatedStyleValue::CalcNumberProduct> const& calc_number_product)
  358. {
  359. auto value = resolve_calc_number_value(calc_number_product->first_calc_number_value);
  360. for (auto& additional_number_value : calc_number_product->zero_or_more_additional_calc_number_values) {
  361. auto additional_value = resolve_calc_number_value(additional_number_value.value);
  362. if (additional_number_value.op == CalculatedStyleValue::ProductOperation::Multiply)
  363. value *= additional_value;
  364. else if (additional_number_value.op == CalculatedStyleValue::ProductOperation::Divide)
  365. value /= additional_value;
  366. else
  367. VERIFY_NOT_REACHED();
  368. }
  369. return value;
  370. }
  371. static float resolve_calc_number_sum(NonnullOwnPtr<CalculatedStyleValue::CalcNumberSum> const& calc_number_sum)
  372. {
  373. auto value = resolve_calc_number_product(calc_number_sum->first_calc_number_product);
  374. for (auto& additional_product : calc_number_sum->zero_or_more_additional_calc_number_products) {
  375. auto additional_value = resolve_calc_number_product(additional_product.value);
  376. if (additional_product.op == CSS::CalculatedStyleValue::SumOperation::Add)
  377. value += additional_value;
  378. else if (additional_product.op == CSS::CalculatedStyleValue::SumOperation::Subtract)
  379. value -= additional_value;
  380. else
  381. VERIFY_NOT_REACHED();
  382. }
  383. return value;
  384. }
  385. static float resolve_calc_number_value(CalculatedStyleValue::CalcNumberValue const& number_value)
  386. {
  387. return number_value.value.visit(
  388. [](float number) { return number; },
  389. [](NonnullOwnPtr<CalculatedStyleValue::CalcNumberSum> const& calc_number_sum) {
  390. return resolve_calc_number_sum(calc_number_sum);
  391. });
  392. }
  393. static float resolve_calc_product(NonnullOwnPtr<CalculatedStyleValue::CalcProduct> const& calc_product, Layout::Node const& layout_node)
  394. {
  395. auto value = resolve_calc_value(calc_product->first_calc_value, layout_node);
  396. for (auto& additional_value : calc_product->zero_or_more_additional_calc_values) {
  397. additional_value.value.visit(
  398. [&](CalculatedStyleValue::CalcValue const& calc_value) {
  399. if (additional_value.op != CalculatedStyleValue::ProductOperation::Multiply)
  400. VERIFY_NOT_REACHED();
  401. auto resolved_value = resolve_calc_value(calc_value, layout_node);
  402. value *= resolved_value;
  403. },
  404. [&](CalculatedStyleValue::CalcNumberValue const& calc_number_value) {
  405. if (additional_value.op != CalculatedStyleValue::ProductOperation::Divide)
  406. VERIFY_NOT_REACHED();
  407. auto resolved_calc_number_value = resolve_calc_number_value(calc_number_value);
  408. value /= resolved_calc_number_value;
  409. });
  410. }
  411. return value;
  412. }
  413. static float resolve_calc_sum(NonnullOwnPtr<CalculatedStyleValue::CalcSum> const& calc_sum, Layout::Node const& layout_node)
  414. {
  415. auto value = resolve_calc_product(calc_sum->first_calc_product, layout_node);
  416. for (auto& additional_product : calc_sum->zero_or_more_additional_calc_products) {
  417. auto additional_value = resolve_calc_product(additional_product.value, layout_node);
  418. if (additional_product.op == CalculatedStyleValue::SumOperation::Add)
  419. value += additional_value;
  420. else if (additional_product.op == CalculatedStyleValue::SumOperation::Subtract)
  421. value -= additional_value;
  422. else
  423. VERIFY_NOT_REACHED();
  424. }
  425. return value;
  426. }
  427. static bool is_number(CalculatedStyleValue::ResolvedType type)
  428. {
  429. return type == CalculatedStyleValue::ResolvedType::Number || type == CalculatedStyleValue::ResolvedType::Integer;
  430. }
  431. static bool is_dimension(CalculatedStyleValue::ResolvedType type)
  432. {
  433. return type != CalculatedStyleValue::ResolvedType::Number
  434. && type != CalculatedStyleValue::ResolvedType::Integer
  435. && type != CalculatedStyleValue::ResolvedType::Percentage;
  436. }
  437. template<typename SumWithOperator>
  438. static Optional<CalculatedStyleValue::ResolvedType> resolve_sum_type(CalculatedStyleValue::ResolvedType first_type, NonnullOwnPtrVector<SumWithOperator> const& zero_or_more_additional_products)
  439. {
  440. auto type = first_type;
  441. for (auto const& product : zero_or_more_additional_products) {
  442. auto maybe_product_type = product.resolved_type();
  443. if (!maybe_product_type.has_value())
  444. return {};
  445. auto product_type = maybe_product_type.value();
  446. // At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>.
  447. // If both sides are the same type, resolve to that type.
  448. if (product_type == type)
  449. continue;
  450. // If one side is a <number> and the other is an <integer>, resolve to <number>.
  451. if (is_number(type) && is_number(product_type)) {
  452. type = CalculatedStyleValue::ResolvedType::Number;
  453. continue;
  454. }
  455. // FIXME: calc() handles <percentage> by allowing them to pretend to be whatever <dimension> type is allowed at this location.
  456. // Since we can't easily check what that type is, we just allow <percentage> to combine with any other <dimension> type.
  457. if (type == CalculatedStyleValue::ResolvedType::Percentage && is_dimension(product_type)) {
  458. type = product_type;
  459. continue;
  460. }
  461. if (is_dimension(type) && product_type == CalculatedStyleValue::ResolvedType::Percentage)
  462. continue;
  463. return {};
  464. }
  465. return type;
  466. }
  467. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcSum::resolved_type() const
  468. {
  469. auto maybe_type = first_calc_product->resolved_type();
  470. if (!maybe_type.has_value())
  471. return {};
  472. auto type = maybe_type.value();
  473. return resolve_sum_type(type, zero_or_more_additional_calc_products);
  474. }
  475. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberSum::resolved_type() const
  476. {
  477. auto maybe_type = first_calc_number_product->resolved_type();
  478. if (!maybe_type.has_value())
  479. return {};
  480. auto type = maybe_type.value();
  481. return resolve_sum_type(type, zero_or_more_additional_calc_number_products);
  482. }
  483. template<typename ProductWithOperator>
  484. static Optional<CalculatedStyleValue::ResolvedType> resolve_product_type(CalculatedStyleValue::ResolvedType first_type, NonnullOwnPtrVector<ProductWithOperator> const& zero_or_more_additional_values)
  485. {
  486. auto type = first_type;
  487. for (auto const& value : zero_or_more_additional_values) {
  488. auto maybe_value_type = value.resolved_type();
  489. if (!maybe_value_type.has_value())
  490. return {};
  491. auto value_type = maybe_value_type.value();
  492. if (value.op == CalculatedStyleValue::ProductOperation::Multiply) {
  493. // At *, check that at least one side is <number>.
  494. if (!(is_number(type) || is_number(value_type)))
  495. return {};
  496. // If both sides are <integer>, resolve to <integer>.
  497. if (type == CalculatedStyleValue::ResolvedType::Integer && value_type == CalculatedStyleValue::ResolvedType::Integer) {
  498. type = CalculatedStyleValue::ResolvedType::Integer;
  499. } else {
  500. // Otherwise, resolve to the type of the other side.
  501. if (is_number(type))
  502. type = value_type;
  503. }
  504. continue;
  505. } else {
  506. VERIFY(value.op == CalculatedStyleValue::ProductOperation::Divide);
  507. // At /, check that the right side is <number>.
  508. if (!is_number(value_type))
  509. return {};
  510. // If the left side is <integer>, resolve to <number>.
  511. if (type == CalculatedStyleValue::ResolvedType::Integer) {
  512. type = CalculatedStyleValue::ResolvedType::Number;
  513. } else {
  514. // Otherwise, resolve to the type of the left side.
  515. }
  516. // FIXME: Division by zero makes the whole calc() expression invalid.
  517. }
  518. }
  519. return type;
  520. }
  521. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcProduct::resolved_type() const
  522. {
  523. auto maybe_type = first_calc_value.resolved_type();
  524. if (!maybe_type.has_value())
  525. return {};
  526. auto type = maybe_type.value();
  527. return resolve_product_type(type, zero_or_more_additional_calc_values);
  528. }
  529. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcSumPartWithOperator::resolved_type() const
  530. {
  531. return value->resolved_type();
  532. }
  533. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberProduct::resolved_type() const
  534. {
  535. auto maybe_type = first_calc_number_value.resolved_type();
  536. if (!maybe_type.has_value())
  537. return {};
  538. auto type = maybe_type.value();
  539. return resolve_product_type(type, zero_or_more_additional_calc_number_values);
  540. }
  541. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberProductPartWithOperator::resolved_type() const
  542. {
  543. return value.resolved_type();
  544. }
  545. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberSumPartWithOperator::resolved_type() const
  546. {
  547. return value->resolved_type();
  548. }
  549. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcProductPartWithOperator::resolved_type() const
  550. {
  551. return value.visit(
  552. [](CalcValue const& calc_value) {
  553. return calc_value.resolved_type();
  554. },
  555. [](CalcNumberValue const& calc_number_value) {
  556. return calc_number_value.resolved_type();
  557. });
  558. }
  559. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcValue::resolved_type() const
  560. {
  561. return value.visit(
  562. [](float) -> Optional<CalculatedStyleValue::ResolvedType> { return { ResolvedType::Number }; },
  563. [](Length const&) -> Optional<CalculatedStyleValue::ResolvedType> { return { ResolvedType::Length }; },
  564. [](NonnullOwnPtr<CalcSum> const& sum) { return sum->resolved_type(); });
  565. }
  566. Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberValue::resolved_type() const
  567. {
  568. return value.visit(
  569. [](float) -> Optional<CalculatedStyleValue::ResolvedType> { return { ResolvedType::Number }; },
  570. [](NonnullOwnPtr<CalcNumberSum> const& sum) { return sum->resolved_type(); });
  571. }
  572. // https://www.w3.org/TR/css-color-4/#serializing-sRGB-values
  573. String ColorStyleValue::to_string() const
  574. {
  575. if (m_color.alpha() == 1)
  576. return String::formatted("rgb({}, {}, {})", m_color.red(), m_color.green(), m_color.blue());
  577. return String::formatted("rgba({}, {}, {}, {})", m_color.red(), m_color.green(), m_color.blue(), (float)(m_color.alpha()) / 255.0f);
  578. }
  579. String CombinedBorderRadiusStyleValue::to_string() const
  580. {
  581. return String::formatted("{} {} {} {} / {} {} {} {}", m_top_left->horizontal_radius().to_string(), m_top_right->horizontal_radius().to_string(), m_bottom_right->horizontal_radius().to_string(), m_bottom_left->horizontal_radius().to_string(), m_top_left->vertical_radius().to_string(), m_top_right->vertical_radius().to_string(), m_bottom_right->vertical_radius().to_string(), m_bottom_left->vertical_radius().to_string());
  582. }
  583. String FlexStyleValue::to_string() const
  584. {
  585. return String::formatted("{} {} {}", m_grow->to_string(), m_shrink->to_string(), m_basis->to_string());
  586. }
  587. String FlexFlowStyleValue::to_string() const
  588. {
  589. return String::formatted("{} {}", m_flex_direction->to_string(), m_flex_wrap->to_string());
  590. }
  591. String FontStyleValue::to_string() const
  592. {
  593. return String::formatted("{} {} {} / {} {}", m_font_style->to_string(), m_font_weight->to_string(), m_font_size->to_string(), m_line_height->to_string(), m_font_families->to_string());
  594. }
  595. String IdentifierStyleValue::to_string() const
  596. {
  597. return CSS::string_from_value_id(m_id);
  598. }
  599. bool IdentifierStyleValue::has_color() const
  600. {
  601. switch (m_id) {
  602. case ValueID::Currentcolor:
  603. case ValueID::LibwebLink:
  604. case ValueID::LibwebPaletteActiveLink:
  605. case ValueID::LibwebPaletteActiveWindowBorder1:
  606. case ValueID::LibwebPaletteActiveWindowBorder2:
  607. case ValueID::LibwebPaletteActiveWindowTitle:
  608. case ValueID::LibwebPaletteBase:
  609. case ValueID::LibwebPaletteBaseText:
  610. case ValueID::LibwebPaletteButton:
  611. case ValueID::LibwebPaletteButtonText:
  612. case ValueID::LibwebPaletteDesktopBackground:
  613. case ValueID::LibwebPaletteFocusOutline:
  614. case ValueID::LibwebPaletteHighlightWindowBorder1:
  615. case ValueID::LibwebPaletteHighlightWindowBorder2:
  616. case ValueID::LibwebPaletteHighlightWindowTitle:
  617. case ValueID::LibwebPaletteHoverHighlight:
  618. case ValueID::LibwebPaletteInactiveSelection:
  619. case ValueID::LibwebPaletteInactiveSelectionText:
  620. case ValueID::LibwebPaletteInactiveWindowBorder1:
  621. case ValueID::LibwebPaletteInactiveWindowBorder2:
  622. case ValueID::LibwebPaletteInactiveWindowTitle:
  623. case ValueID::LibwebPaletteLink:
  624. case ValueID::LibwebPaletteMenuBase:
  625. case ValueID::LibwebPaletteMenuBaseText:
  626. case ValueID::LibwebPaletteMenuSelection:
  627. case ValueID::LibwebPaletteMenuSelectionText:
  628. case ValueID::LibwebPaletteMenuStripe:
  629. case ValueID::LibwebPaletteMovingWindowBorder1:
  630. case ValueID::LibwebPaletteMovingWindowBorder2:
  631. case ValueID::LibwebPaletteMovingWindowTitle:
  632. case ValueID::LibwebPaletteRubberBandBorder:
  633. case ValueID::LibwebPaletteRubberBandFill:
  634. case ValueID::LibwebPaletteRuler:
  635. case ValueID::LibwebPaletteRulerActiveText:
  636. case ValueID::LibwebPaletteRulerBorder:
  637. case ValueID::LibwebPaletteRulerInactiveText:
  638. case ValueID::LibwebPaletteSelection:
  639. case ValueID::LibwebPaletteSelectionText:
  640. case ValueID::LibwebPaletteSyntaxComment:
  641. case ValueID::LibwebPaletteSyntaxControlKeyword:
  642. case ValueID::LibwebPaletteSyntaxIdentifier:
  643. case ValueID::LibwebPaletteSyntaxKeyword:
  644. case ValueID::LibwebPaletteSyntaxNumber:
  645. case ValueID::LibwebPaletteSyntaxOperator:
  646. case ValueID::LibwebPaletteSyntaxPreprocessorStatement:
  647. case ValueID::LibwebPaletteSyntaxPreprocessorValue:
  648. case ValueID::LibwebPaletteSyntaxPunctuation:
  649. case ValueID::LibwebPaletteSyntaxString:
  650. case ValueID::LibwebPaletteSyntaxType:
  651. case ValueID::LibwebPaletteTextCursor:
  652. case ValueID::LibwebPaletteThreedHighlight:
  653. case ValueID::LibwebPaletteThreedShadow1:
  654. case ValueID::LibwebPaletteThreedShadow2:
  655. case ValueID::LibwebPaletteVisitedLink:
  656. case ValueID::LibwebPaletteWindow:
  657. case ValueID::LibwebPaletteWindowText:
  658. return true;
  659. default:
  660. return false;
  661. }
  662. }
  663. Color IdentifierStyleValue::to_color(Layout::NodeWithStyle const& node) const
  664. {
  665. if (id() == CSS::ValueID::Currentcolor) {
  666. if (!node.has_style())
  667. return Color::Black;
  668. return node.computed_values().color();
  669. }
  670. auto& document = node.document();
  671. if (id() == CSS::ValueID::LibwebLink)
  672. return document.link_color();
  673. VERIFY(document.page());
  674. auto palette = document.page()->palette();
  675. switch (id()) {
  676. case CSS::ValueID::LibwebPaletteDesktopBackground:
  677. return palette.color(ColorRole::DesktopBackground);
  678. case CSS::ValueID::LibwebPaletteActiveWindowBorder1:
  679. return palette.color(ColorRole::ActiveWindowBorder1);
  680. case CSS::ValueID::LibwebPaletteActiveWindowBorder2:
  681. return palette.color(ColorRole::ActiveWindowBorder2);
  682. case CSS::ValueID::LibwebPaletteActiveWindowTitle:
  683. return palette.color(ColorRole::ActiveWindowTitle);
  684. case CSS::ValueID::LibwebPaletteInactiveWindowBorder1:
  685. return palette.color(ColorRole::InactiveWindowBorder1);
  686. case CSS::ValueID::LibwebPaletteInactiveWindowBorder2:
  687. return palette.color(ColorRole::InactiveWindowBorder2);
  688. case CSS::ValueID::LibwebPaletteInactiveWindowTitle:
  689. return palette.color(ColorRole::InactiveWindowTitle);
  690. case CSS::ValueID::LibwebPaletteMovingWindowBorder1:
  691. return palette.color(ColorRole::MovingWindowBorder1);
  692. case CSS::ValueID::LibwebPaletteMovingWindowBorder2:
  693. return palette.color(ColorRole::MovingWindowBorder2);
  694. case CSS::ValueID::LibwebPaletteMovingWindowTitle:
  695. return palette.color(ColorRole::MovingWindowTitle);
  696. case CSS::ValueID::LibwebPaletteHighlightWindowBorder1:
  697. return palette.color(ColorRole::HighlightWindowBorder1);
  698. case CSS::ValueID::LibwebPaletteHighlightWindowBorder2:
  699. return palette.color(ColorRole::HighlightWindowBorder2);
  700. case CSS::ValueID::LibwebPaletteHighlightWindowTitle:
  701. return palette.color(ColorRole::HighlightWindowTitle);
  702. case CSS::ValueID::LibwebPaletteMenuStripe:
  703. return palette.color(ColorRole::MenuStripe);
  704. case CSS::ValueID::LibwebPaletteMenuBase:
  705. return palette.color(ColorRole::MenuBase);
  706. case CSS::ValueID::LibwebPaletteMenuBaseText:
  707. return palette.color(ColorRole::MenuBaseText);
  708. case CSS::ValueID::LibwebPaletteMenuSelection:
  709. return palette.color(ColorRole::MenuSelection);
  710. case CSS::ValueID::LibwebPaletteMenuSelectionText:
  711. return palette.color(ColorRole::MenuSelectionText);
  712. case CSS::ValueID::LibwebPaletteWindow:
  713. return palette.color(ColorRole::Window);
  714. case CSS::ValueID::LibwebPaletteWindowText:
  715. return palette.color(ColorRole::WindowText);
  716. case CSS::ValueID::LibwebPaletteButton:
  717. return palette.color(ColorRole::Button);
  718. case CSS::ValueID::LibwebPaletteButtonText:
  719. return palette.color(ColorRole::ButtonText);
  720. case CSS::ValueID::LibwebPaletteBase:
  721. return palette.color(ColorRole::Base);
  722. case CSS::ValueID::LibwebPaletteBaseText:
  723. return palette.color(ColorRole::BaseText);
  724. case CSS::ValueID::LibwebPaletteThreedHighlight:
  725. return palette.color(ColorRole::ThreedHighlight);
  726. case CSS::ValueID::LibwebPaletteThreedShadow1:
  727. return palette.color(ColorRole::ThreedShadow1);
  728. case CSS::ValueID::LibwebPaletteThreedShadow2:
  729. return palette.color(ColorRole::ThreedShadow2);
  730. case CSS::ValueID::LibwebPaletteHoverHighlight:
  731. return palette.color(ColorRole::HoverHighlight);
  732. case CSS::ValueID::LibwebPaletteSelection:
  733. return palette.color(ColorRole::Selection);
  734. case CSS::ValueID::LibwebPaletteSelectionText:
  735. return palette.color(ColorRole::SelectionText);
  736. case CSS::ValueID::LibwebPaletteInactiveSelection:
  737. return palette.color(ColorRole::InactiveSelection);
  738. case CSS::ValueID::LibwebPaletteInactiveSelectionText:
  739. return palette.color(ColorRole::InactiveSelectionText);
  740. case CSS::ValueID::LibwebPaletteRubberBandFill:
  741. return palette.color(ColorRole::RubberBandFill);
  742. case CSS::ValueID::LibwebPaletteRubberBandBorder:
  743. return palette.color(ColorRole::RubberBandBorder);
  744. case CSS::ValueID::LibwebPaletteLink:
  745. return palette.color(ColorRole::Link);
  746. case CSS::ValueID::LibwebPaletteActiveLink:
  747. return palette.color(ColorRole::ActiveLink);
  748. case CSS::ValueID::LibwebPaletteVisitedLink:
  749. return palette.color(ColorRole::VisitedLink);
  750. case CSS::ValueID::LibwebPaletteRuler:
  751. return palette.color(ColorRole::Ruler);
  752. case CSS::ValueID::LibwebPaletteRulerBorder:
  753. return palette.color(ColorRole::RulerBorder);
  754. case CSS::ValueID::LibwebPaletteRulerActiveText:
  755. return palette.color(ColorRole::RulerActiveText);
  756. case CSS::ValueID::LibwebPaletteRulerInactiveText:
  757. return palette.color(ColorRole::RulerInactiveText);
  758. case CSS::ValueID::LibwebPaletteTextCursor:
  759. return palette.color(ColorRole::TextCursor);
  760. case CSS::ValueID::LibwebPaletteFocusOutline:
  761. return palette.color(ColorRole::FocusOutline);
  762. case CSS::ValueID::LibwebPaletteSyntaxComment:
  763. return palette.color(ColorRole::SyntaxComment);
  764. case CSS::ValueID::LibwebPaletteSyntaxNumber:
  765. return palette.color(ColorRole::SyntaxNumber);
  766. case CSS::ValueID::LibwebPaletteSyntaxString:
  767. return palette.color(ColorRole::SyntaxString);
  768. case CSS::ValueID::LibwebPaletteSyntaxType:
  769. return palette.color(ColorRole::SyntaxType);
  770. case CSS::ValueID::LibwebPaletteSyntaxPunctuation:
  771. return palette.color(ColorRole::SyntaxPunctuation);
  772. case CSS::ValueID::LibwebPaletteSyntaxOperator:
  773. return palette.color(ColorRole::SyntaxOperator);
  774. case CSS::ValueID::LibwebPaletteSyntaxKeyword:
  775. return palette.color(ColorRole::SyntaxKeyword);
  776. case CSS::ValueID::LibwebPaletteSyntaxControlKeyword:
  777. return palette.color(ColorRole::SyntaxControlKeyword);
  778. case CSS::ValueID::LibwebPaletteSyntaxIdentifier:
  779. return palette.color(ColorRole::SyntaxIdentifier);
  780. case CSS::ValueID::LibwebPaletteSyntaxPreprocessorStatement:
  781. return palette.color(ColorRole::SyntaxPreprocessorStatement);
  782. case CSS::ValueID::LibwebPaletteSyntaxPreprocessorValue:
  783. return palette.color(ColorRole::SyntaxPreprocessorValue);
  784. default:
  785. return {};
  786. }
  787. }
  788. ImageStyleValue::ImageStyleValue(AK::URL const& url)
  789. : StyleValue(Type::Image)
  790. , m_url(url)
  791. {
  792. }
  793. void ImageStyleValue::load_bitmap(DOM::Document& document)
  794. {
  795. if (m_bitmap)
  796. return;
  797. m_document = &document;
  798. auto request = LoadRequest::create_for_url_on_page(m_url, document.page());
  799. set_resource(ResourceLoader::the().load_resource(Resource::Type::Image, request));
  800. }
  801. void ImageStyleValue::resource_did_load()
  802. {
  803. if (!m_document)
  804. return;
  805. m_bitmap = resource()->bitmap();
  806. // FIXME: Do less than a full repaint if possible?
  807. if (m_document && m_document->browsing_context())
  808. m_document->browsing_context()->set_needs_display({});
  809. }
  810. String ImageStyleValue::to_string() const
  811. {
  812. return serialize_a_url(m_url.to_string());
  813. }
  814. String ListStyleStyleValue::to_string() const
  815. {
  816. return String::formatted("{} {} {}", m_position->to_string(), m_image->to_string(), m_style_type->to_string());
  817. }
  818. String NumericStyleValue::to_string() const
  819. {
  820. return m_value.visit(
  821. [](float value) {
  822. return String::formatted("{}", value);
  823. },
  824. [](i64 value) {
  825. return String::formatted("{}", value);
  826. });
  827. }
  828. String OverflowStyleValue::to_string() const
  829. {
  830. return String::formatted("{} {}", m_overflow_x->to_string(), m_overflow_y->to_string());
  831. }
  832. String PercentageStyleValue::to_string() const
  833. {
  834. return m_percentage.to_string();
  835. }
  836. String PositionStyleValue::to_string() const
  837. {
  838. auto to_string = [](PositionEdge edge) {
  839. switch (edge) {
  840. case PositionEdge::Left:
  841. return "left";
  842. case PositionEdge::Right:
  843. return "right";
  844. case PositionEdge::Top:
  845. return "top";
  846. case PositionEdge::Bottom:
  847. return "bottom";
  848. }
  849. VERIFY_NOT_REACHED();
  850. };
  851. return String::formatted("{} {} {} {}", to_string(m_edge_x), m_offset_x.to_string(), to_string(m_edge_y), m_offset_y.to_string());
  852. }
  853. String TextDecorationStyleValue::to_string() const
  854. {
  855. return String::formatted("{} {} {}", m_line->to_string(), m_style->to_string(), m_color->to_string());
  856. }
  857. String TransformationStyleValue::to_string() const
  858. {
  859. StringBuilder builder;
  860. switch (m_transform_function) {
  861. case TransformFunction::TranslateY:
  862. builder.append("translateY");
  863. break;
  864. default:
  865. VERIFY_NOT_REACHED();
  866. }
  867. builder.append('(');
  868. builder.join(", ", m_values);
  869. builder.append(')');
  870. return builder.to_string();
  871. }
  872. String UnresolvedStyleValue::to_string() const
  873. {
  874. StringBuilder builder;
  875. for (auto& value : m_values)
  876. builder.append(value.to_string());
  877. return builder.to_string();
  878. }
  879. String StyleValueList::to_string() const
  880. {
  881. String separator = "";
  882. switch (m_separator) {
  883. case Separator::Space:
  884. separator = " ";
  885. break;
  886. case Separator::Comma:
  887. separator = ", ";
  888. break;
  889. default:
  890. VERIFY_NOT_REACHED();
  891. }
  892. return String::join(separator, m_values);
  893. }
  894. }