MediaQuery.cpp 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. /*
  2. * Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/CSS/MediaQuery.h>
  7. #include <LibWeb/CSS/Serialize.h>
  8. #include <LibWeb/DOM/Document.h>
  9. #include <LibWeb/DOM/Window.h>
  10. namespace Web::CSS {
  11. NonnullRefPtr<MediaQuery> MediaQuery::create_not_all()
  12. {
  13. auto media_query = new MediaQuery;
  14. media_query->m_negated = true;
  15. media_query->m_media_type = MediaType::All;
  16. return adopt_ref(*media_query);
  17. }
  18. String MediaFeatureValue::to_string() const
  19. {
  20. return m_value.visit(
  21. [](String const& ident) { return serialize_an_identifier(ident); },
  22. [](Length const& length) { return length.to_string(); },
  23. [](double number) { return String::number(number); });
  24. }
  25. bool MediaFeatureValue::is_same_type(MediaFeatureValue const& other) const
  26. {
  27. return m_value.visit(
  28. [&](String const&) { return other.is_ident(); },
  29. [&](Length const&) { return other.is_length(); },
  30. [&](double) { return other.is_number(); });
  31. }
  32. bool MediaFeatureValue::equals(MediaFeatureValue const& other) const
  33. {
  34. if (!is_same_type(other))
  35. return false;
  36. if (is_ident() && other.is_ident())
  37. return m_value.get<String>().equals_ignoring_case(other.m_value.get<String>());
  38. if (is_length() && other.is_length()) {
  39. // FIXME: Handle relative lengths. https://www.w3.org/TR/mediaqueries-4/#ref-for-relative-length
  40. auto& my_length = m_value.get<Length>();
  41. auto& other_length = other.m_value.get<Length>();
  42. if (!my_length.is_absolute() || !other_length.is_absolute()) {
  43. dbgln("TODO: Support relative lengths in media queries!");
  44. return false;
  45. }
  46. return my_length.absolute_length_to_px() == other_length.absolute_length_to_px();
  47. }
  48. if (is_number() && other.is_number())
  49. return m_value.get<double>() == other.m_value.get<double>();
  50. VERIFY_NOT_REACHED();
  51. }
  52. String MediaFeature::to_string() const
  53. {
  54. auto comparison_string = [](Comparison comparison) -> StringView {
  55. switch (comparison) {
  56. case Comparison::Equal:
  57. return "="sv;
  58. case Comparison::LessThan:
  59. return "<"sv;
  60. case Comparison::LessThanOrEqual:
  61. return "<="sv;
  62. case Comparison::GreaterThan:
  63. return ">"sv;
  64. case Comparison::GreaterThanOrEqual:
  65. return ">="sv;
  66. }
  67. VERIFY_NOT_REACHED();
  68. };
  69. switch (m_type) {
  70. case Type::IsTrue:
  71. return serialize_an_identifier(m_name);
  72. case Type::ExactValue:
  73. return String::formatted("{}:{}", serialize_an_identifier(m_name), m_value->to_string());
  74. case Type::MinValue:
  75. return String::formatted("min-{}:{}", serialize_an_identifier(m_name), m_value->to_string());
  76. case Type::MaxValue:
  77. return String::formatted("max-{}:{}", serialize_an_identifier(m_name), m_value->to_string());
  78. case Type::Range:
  79. if (!m_range->right_comparison.has_value())
  80. return String::formatted("{} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), serialize_an_identifier(m_name));
  81. return String::formatted("{} {} {} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), serialize_an_identifier(m_name), comparison_string(*m_range->right_comparison), m_range->right_value->to_string());
  82. }
  83. VERIFY_NOT_REACHED();
  84. }
  85. bool MediaFeature::evaluate(DOM::Window const& window) const
  86. {
  87. auto maybe_queried_value = window.query_media_feature(m_name);
  88. if (!maybe_queried_value.has_value())
  89. return false;
  90. auto queried_value = maybe_queried_value.release_value();
  91. switch (m_type) {
  92. case Type::IsTrue:
  93. if (queried_value.is_number())
  94. return queried_value.number() != 0;
  95. if (queried_value.is_length())
  96. return queried_value.length().raw_value() != 0;
  97. if (queried_value.is_ident())
  98. return queried_value.ident() != "none";
  99. return false;
  100. case Type::ExactValue:
  101. return compare(*m_value, Comparison::Equal, queried_value);
  102. case Type::MinValue:
  103. return compare(queried_value, Comparison::GreaterThanOrEqual, *m_value);
  104. case Type::MaxValue:
  105. return compare(queried_value, Comparison::LessThanOrEqual, *m_value);
  106. case Type::Range:
  107. if (!compare(m_range->left_value, m_range->left_comparison, queried_value))
  108. return false;
  109. if (m_range->right_comparison.has_value())
  110. if (!compare(queried_value, *m_range->right_comparison, *m_range->right_value))
  111. return false;
  112. return true;
  113. }
  114. VERIFY_NOT_REACHED();
  115. }
  116. bool MediaFeature::compare(MediaFeatureValue left, Comparison comparison, MediaFeatureValue right)
  117. {
  118. if (!left.is_same_type(right))
  119. return false;
  120. if (left.is_ident()) {
  121. if (comparison == Comparison::Equal)
  122. return left.ident().equals_ignoring_case(right.ident());
  123. return false;
  124. }
  125. if (left.is_number()) {
  126. switch (comparison) {
  127. case Comparison::Equal:
  128. return left.number() == right.number();
  129. case Comparison::LessThan:
  130. return left.number() < right.number();
  131. case Comparison::LessThanOrEqual:
  132. return left.number() <= right.number();
  133. case Comparison::GreaterThan:
  134. return left.number() > right.number();
  135. case Comparison::GreaterThanOrEqual:
  136. return left.number() >= right.number();
  137. }
  138. VERIFY_NOT_REACHED();
  139. }
  140. if (left.is_length()) {
  141. // FIXME: Handle relative lengths. https://www.w3.org/TR/mediaqueries-4/#ref-for-relative-length
  142. if (!left.length().is_absolute() || !right.length().is_absolute()) {
  143. dbgln("TODO: Support relative lengths in media queries!");
  144. return false;
  145. }
  146. auto left_px = left.length().absolute_length_to_px();
  147. auto right_px = right.length().absolute_length_to_px();
  148. switch (comparison) {
  149. case Comparison::Equal:
  150. return left_px == right_px;
  151. case Comparison::LessThan:
  152. return left_px < right_px;
  153. case Comparison::LessThanOrEqual:
  154. return left_px <= right_px;
  155. case Comparison::GreaterThan:
  156. return left_px > right_px;
  157. case Comparison::GreaterThanOrEqual:
  158. return left_px >= right_px;
  159. }
  160. VERIFY_NOT_REACHED();
  161. }
  162. VERIFY_NOT_REACHED();
  163. }
  164. NonnullOwnPtr<MediaCondition> MediaCondition::from_general_enclosed(GeneralEnclosed&& general_enclosed)
  165. {
  166. auto result = new MediaCondition;
  167. result->type = Type::GeneralEnclosed;
  168. result->general_enclosed = move(general_enclosed);
  169. return adopt_own(*result);
  170. }
  171. NonnullOwnPtr<MediaCondition> MediaCondition::from_feature(MediaFeature&& feature)
  172. {
  173. auto result = new MediaCondition;
  174. result->type = Type::Single;
  175. result->feature = move(feature);
  176. return adopt_own(*result);
  177. }
  178. NonnullOwnPtr<MediaCondition> MediaCondition::from_not(NonnullOwnPtr<MediaCondition>&& condition)
  179. {
  180. auto result = new MediaCondition;
  181. result->type = Type::Not;
  182. result->conditions.append(move(condition));
  183. return adopt_own(*result);
  184. }
  185. NonnullOwnPtr<MediaCondition> MediaCondition::from_and_list(NonnullOwnPtrVector<MediaCondition>&& conditions)
  186. {
  187. auto result = new MediaCondition;
  188. result->type = Type::And;
  189. result->conditions = move(conditions);
  190. return adopt_own(*result);
  191. }
  192. NonnullOwnPtr<MediaCondition> MediaCondition::from_or_list(NonnullOwnPtrVector<MediaCondition>&& conditions)
  193. {
  194. auto result = new MediaCondition;
  195. result->type = Type::Or;
  196. result->conditions = move(conditions);
  197. return adopt_own(*result);
  198. }
  199. String MediaCondition::to_string() const
  200. {
  201. StringBuilder builder;
  202. builder.append('(');
  203. switch (type) {
  204. case Type::Single:
  205. builder.append(feature->to_string());
  206. break;
  207. case Type::Not:
  208. builder.append("not ");
  209. builder.append(conditions.first().to_string());
  210. break;
  211. case Type::And:
  212. builder.join(" and ", conditions);
  213. break;
  214. case Type::Or:
  215. builder.join(" or ", conditions);
  216. break;
  217. case Type::GeneralEnclosed:
  218. builder.append(general_enclosed->to_string());
  219. break;
  220. }
  221. builder.append(')');
  222. return builder.to_string();
  223. }
  224. MatchResult MediaCondition::evaluate(DOM::Window const& window) const
  225. {
  226. switch (type) {
  227. case Type::Single:
  228. return as_match_result(feature->evaluate(window));
  229. case Type::Not:
  230. return negate(conditions.first().evaluate(window));
  231. case Type::And:
  232. return evaluate_and(conditions, [&](auto& child) { return child.evaluate(window); });
  233. case Type::Or:
  234. return evaluate_or(conditions, [&](auto& child) { return child.evaluate(window); });
  235. case Type::GeneralEnclosed:
  236. return general_enclosed->evaluate();
  237. }
  238. VERIFY_NOT_REACHED();
  239. }
  240. String MediaQuery::to_string() const
  241. {
  242. StringBuilder builder;
  243. if (m_negated)
  244. builder.append("not ");
  245. if (m_negated || m_media_type != MediaType::All || !m_media_condition) {
  246. switch (m_media_type) {
  247. case MediaType::All:
  248. builder.append("all");
  249. break;
  250. case MediaType::Aural:
  251. builder.append("aural");
  252. break;
  253. case MediaType::Braille:
  254. builder.append("braille");
  255. break;
  256. case MediaType::Embossed:
  257. builder.append("embossed");
  258. break;
  259. case MediaType::Handheld:
  260. builder.append("handheld");
  261. break;
  262. case MediaType::Print:
  263. builder.append("print");
  264. break;
  265. case MediaType::Projection:
  266. builder.append("projection");
  267. break;
  268. case MediaType::Screen:
  269. builder.append("screen");
  270. break;
  271. case MediaType::Speech:
  272. builder.append("speech");
  273. break;
  274. case MediaType::TTY:
  275. builder.append("tty");
  276. break;
  277. case MediaType::TV:
  278. builder.append("tv");
  279. break;
  280. }
  281. if (m_media_condition)
  282. builder.append(" and ");
  283. }
  284. if (m_media_condition) {
  285. builder.append(m_media_condition->to_string());
  286. }
  287. return builder.to_string();
  288. }
  289. bool MediaQuery::evaluate(DOM::Window const& window)
  290. {
  291. auto matches_media = [](MediaType media) -> MatchResult {
  292. switch (media) {
  293. case MediaType::All:
  294. return MatchResult::True;
  295. case MediaType::Print:
  296. // FIXME: Enable for printing, when we have printing!
  297. return MatchResult::False;
  298. case MediaType::Screen:
  299. // FIXME: Disable for printing, when we have printing!
  300. return MatchResult::True;
  301. // Deprecated, must never match:
  302. case MediaType::TTY:
  303. case MediaType::TV:
  304. case MediaType::Projection:
  305. case MediaType::Handheld:
  306. case MediaType::Braille:
  307. case MediaType::Embossed:
  308. case MediaType::Aural:
  309. case MediaType::Speech:
  310. return MatchResult::False;
  311. }
  312. VERIFY_NOT_REACHED();
  313. };
  314. MatchResult result = matches_media(m_media_type);
  315. if ((result == MatchResult::True) && m_media_condition)
  316. result = m_media_condition->evaluate(window);
  317. if (m_negated)
  318. result = negate(result);
  319. m_matches = result == MatchResult::True;
  320. return m_matches;
  321. }
  322. // https://www.w3.org/TR/cssom-1/#serialize-a-media-query-list
  323. String serialize_a_media_query_list(NonnullRefPtrVector<MediaQuery> const& media_queries)
  324. {
  325. // 1. If the media query list is empty, then return the empty string.
  326. if (media_queries.is_empty())
  327. return "";
  328. // 2. Serialize each media query in the list of media queries, in the same order as they
  329. // appear in the media query list, and then serialize the list.
  330. StringBuilder builder;
  331. builder.join(", ", media_queries);
  332. return builder.to_string();
  333. }
  334. bool is_media_feature_name(StringView name)
  335. {
  336. // MEDIAQUERIES-4 - https://www.w3.org/TR/mediaqueries-4/#media-descriptor-table
  337. if (name.equals_ignoring_case("any-hover"sv))
  338. return true;
  339. if (name.equals_ignoring_case("any-pointer"sv))
  340. return true;
  341. if (name.equals_ignoring_case("aspect-ratio"sv))
  342. return true;
  343. if (name.equals_ignoring_case("color"sv))
  344. return true;
  345. if (name.equals_ignoring_case("color-gamut"sv))
  346. return true;
  347. if (name.equals_ignoring_case("color-index"sv))
  348. return true;
  349. if (name.equals_ignoring_case("device-aspect-ratio"sv))
  350. return true;
  351. if (name.equals_ignoring_case("device-height"sv))
  352. return true;
  353. if (name.equals_ignoring_case("device-width"sv))
  354. return true;
  355. if (name.equals_ignoring_case("grid"sv))
  356. return true;
  357. if (name.equals_ignoring_case("height"sv))
  358. return true;
  359. if (name.equals_ignoring_case("hover"sv))
  360. return true;
  361. if (name.equals_ignoring_case("monochrome"sv))
  362. return true;
  363. if (name.equals_ignoring_case("orientation"sv))
  364. return true;
  365. if (name.equals_ignoring_case("overflow-block"sv))
  366. return true;
  367. if (name.equals_ignoring_case("overflow-inline"sv))
  368. return true;
  369. if (name.equals_ignoring_case("pointer"sv))
  370. return true;
  371. if (name.equals_ignoring_case("resolution"sv))
  372. return true;
  373. if (name.equals_ignoring_case("scan"sv))
  374. return true;
  375. if (name.equals_ignoring_case("update"sv))
  376. return true;
  377. if (name.equals_ignoring_case("width"sv))
  378. return true;
  379. // MEDIAQUERIES-5 - https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
  380. if (name.equals_ignoring_case("prefers-color-scheme"sv))
  381. return true;
  382. // FIXME: Add other level 5 feature names
  383. return false;
  384. }
  385. }