/src/serenity/Userland/Libraries/LibWeb/CSS/MediaQuery.cpp
Line | Count | Source (jump to first uncovered line) |
1 | | /* |
2 | | * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org> |
3 | | * |
4 | | * SPDX-License-Identifier: BSD-2-Clause |
5 | | */ |
6 | | |
7 | | #include <LibWeb/CSS/MediaQuery.h> |
8 | | #include <LibWeb/CSS/Serialize.h> |
9 | | #include <LibWeb/CSS/StyleComputer.h> |
10 | | #include <LibWeb/DOM/Document.h> |
11 | | #include <LibWeb/HTML/Window.h> |
12 | | #include <LibWeb/Page/Page.h> |
13 | | |
14 | | namespace Web::CSS { |
15 | | |
16 | | NonnullRefPtr<MediaQuery> MediaQuery::create_not_all() |
17 | 0 | { |
18 | 0 | auto media_query = new MediaQuery; |
19 | 0 | media_query->m_negated = true; |
20 | 0 | media_query->m_media_type = MediaType::All; |
21 | |
|
22 | 0 | return adopt_ref(*media_query); |
23 | 0 | } |
24 | | |
25 | | String MediaFeatureValue::to_string() const |
26 | 0 | { |
27 | 0 | return m_value.visit( |
28 | 0 | [](Keyword const& ident) { return MUST(String::from_utf8(string_from_keyword(ident))); }, |
29 | 0 | [](Length const& length) { return length.to_string(); }, |
30 | 0 | [](Ratio const& ratio) { return ratio.to_string(); }, |
31 | 0 | [](Resolution const& resolution) { return resolution.to_string(); }, |
32 | 0 | [](float number) { return String::number(number); }); |
33 | 0 | } |
34 | | |
35 | | bool MediaFeatureValue::is_same_type(MediaFeatureValue const& other) const |
36 | 0 | { |
37 | 0 | return m_value.visit( |
38 | 0 | [&](Keyword const&) { return other.is_ident(); }, |
39 | 0 | [&](Length const&) { return other.is_length(); }, |
40 | 0 | [&](Ratio const&) { return other.is_ratio(); }, |
41 | 0 | [&](Resolution const&) { return other.is_resolution(); }, |
42 | 0 | [&](float) { return other.is_number(); }); |
43 | 0 | } |
44 | | |
45 | | String MediaFeature::to_string() const |
46 | 0 | { |
47 | 0 | auto comparison_string = [](Comparison comparison) -> StringView { |
48 | 0 | switch (comparison) { |
49 | 0 | case Comparison::Equal: |
50 | 0 | return "="sv; |
51 | 0 | case Comparison::LessThan: |
52 | 0 | return "<"sv; |
53 | 0 | case Comparison::LessThanOrEqual: |
54 | 0 | return "<="sv; |
55 | 0 | case Comparison::GreaterThan: |
56 | 0 | return ">"sv; |
57 | 0 | case Comparison::GreaterThanOrEqual: |
58 | 0 | return ">="sv; |
59 | 0 | } |
60 | 0 | VERIFY_NOT_REACHED(); |
61 | 0 | }; |
62 | |
|
63 | 0 | switch (m_type) { |
64 | 0 | case Type::IsTrue: |
65 | 0 | return MUST(String::from_utf8(string_from_media_feature_id(m_id))); |
66 | 0 | case Type::ExactValue: |
67 | 0 | return MUST(String::formatted("{}: {}", string_from_media_feature_id(m_id), m_value->to_string())); |
68 | 0 | case Type::MinValue: |
69 | 0 | return MUST(String::formatted("min-{}: {}", string_from_media_feature_id(m_id), m_value->to_string())); |
70 | 0 | case Type::MaxValue: |
71 | 0 | return MUST(String::formatted("max-{}: {}", string_from_media_feature_id(m_id), m_value->to_string())); |
72 | 0 | case Type::Range: |
73 | 0 | if (!m_range->right_comparison.has_value()) |
74 | 0 | return MUST(String::formatted("{} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), string_from_media_feature_id(m_id))); |
75 | | |
76 | 0 | return MUST(String::formatted("{} {} {} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), string_from_media_feature_id(m_id), comparison_string(*m_range->right_comparison), m_range->right_value->to_string())); |
77 | 0 | } |
78 | | |
79 | 0 | VERIFY_NOT_REACHED(); |
80 | 0 | } |
81 | | |
82 | | bool MediaFeature::evaluate(HTML::Window const& window) const |
83 | 0 | { |
84 | 0 | auto maybe_queried_value = window.query_media_feature(m_id); |
85 | 0 | if (!maybe_queried_value.has_value()) |
86 | 0 | return false; |
87 | 0 | auto queried_value = maybe_queried_value.release_value(); |
88 | |
|
89 | 0 | switch (m_type) { |
90 | 0 | case Type::IsTrue: |
91 | 0 | if (queried_value.is_number()) |
92 | 0 | return queried_value.number() != 0; |
93 | 0 | if (queried_value.is_length()) |
94 | 0 | return queried_value.length().raw_value() != 0; |
95 | | // FIXME: I couldn't figure out from the spec how ratios should be evaluated in a boolean context. |
96 | 0 | if (queried_value.is_ratio()) |
97 | 0 | return !queried_value.ratio().is_degenerate(); |
98 | 0 | if (queried_value.is_resolution()) |
99 | 0 | return queried_value.resolution().to_dots_per_pixel() != 0; |
100 | 0 | if (queried_value.is_ident()) { |
101 | | // NOTE: It is not technically correct to always treat `no-preference` as false, but every |
102 | | // media-feature that accepts it as a value treats it as false, so good enough. :^) |
103 | | // If other features gain this property for other keywords in the future, we can |
104 | | // add more robust handling for them then. |
105 | 0 | return queried_value.ident() != Keyword::None |
106 | 0 | && queried_value.ident() != Keyword::NoPreference; |
107 | 0 | } |
108 | 0 | return false; |
109 | | |
110 | 0 | case Type::ExactValue: |
111 | 0 | return compare(window, *m_value, Comparison::Equal, queried_value); |
112 | | |
113 | 0 | case Type::MinValue: |
114 | 0 | return compare(window, queried_value, Comparison::GreaterThanOrEqual, *m_value); |
115 | | |
116 | 0 | case Type::MaxValue: |
117 | 0 | return compare(window, queried_value, Comparison::LessThanOrEqual, *m_value); |
118 | | |
119 | 0 | case Type::Range: |
120 | 0 | if (!compare(window, m_range->left_value, m_range->left_comparison, queried_value)) |
121 | 0 | return false; |
122 | | |
123 | 0 | if (m_range->right_comparison.has_value()) |
124 | 0 | if (!compare(window, queried_value, *m_range->right_comparison, *m_range->right_value)) |
125 | 0 | return false; |
126 | | |
127 | 0 | return true; |
128 | 0 | } |
129 | | |
130 | 0 | VERIFY_NOT_REACHED(); |
131 | 0 | } |
132 | | |
133 | | bool MediaFeature::compare(HTML::Window const& window, MediaFeatureValue left, Comparison comparison, MediaFeatureValue right) |
134 | 0 | { |
135 | 0 | if (!left.is_same_type(right)) |
136 | 0 | return false; |
137 | | |
138 | 0 | if (left.is_ident()) { |
139 | 0 | if (comparison == Comparison::Equal) |
140 | 0 | return left.ident() == right.ident(); |
141 | 0 | return false; |
142 | 0 | } |
143 | | |
144 | 0 | if (left.is_number()) { |
145 | 0 | switch (comparison) { |
146 | 0 | case Comparison::Equal: |
147 | 0 | return left.number() == right.number(); |
148 | 0 | case Comparison::LessThan: |
149 | 0 | return left.number() < right.number(); |
150 | 0 | case Comparison::LessThanOrEqual: |
151 | 0 | return left.number() <= right.number(); |
152 | 0 | case Comparison::GreaterThan: |
153 | 0 | return left.number() > right.number(); |
154 | 0 | case Comparison::GreaterThanOrEqual: |
155 | 0 | return left.number() >= right.number(); |
156 | 0 | } |
157 | 0 | VERIFY_NOT_REACHED(); |
158 | 0 | } |
159 | | |
160 | 0 | if (left.is_length()) { |
161 | 0 | CSSPixels left_px; |
162 | 0 | CSSPixels right_px; |
163 | | // Save ourselves some work if neither side is a relative length. |
164 | 0 | if (left.length().is_absolute() && right.length().is_absolute()) { |
165 | 0 | left_px = left.length().absolute_length_to_px(); |
166 | 0 | right_px = right.length().absolute_length_to_px(); |
167 | 0 | } else { |
168 | 0 | auto viewport_rect = window.page().web_exposed_screen_area(); |
169 | |
|
170 | 0 | auto const& initial_font = window.associated_document().style_computer().initial_font(); |
171 | 0 | Gfx::FontPixelMetrics const& initial_font_metrics = initial_font.pixel_metrics(); |
172 | 0 | Length::FontMetrics font_metrics { initial_font.presentation_size(), initial_font_metrics }; |
173 | |
|
174 | 0 | left_px = left.length().to_px(viewport_rect, font_metrics, font_metrics); |
175 | 0 | right_px = right.length().to_px(viewport_rect, font_metrics, font_metrics); |
176 | 0 | } |
177 | |
|
178 | 0 | switch (comparison) { |
179 | 0 | case Comparison::Equal: |
180 | 0 | return left_px == right_px; |
181 | 0 | case Comparison::LessThan: |
182 | 0 | return left_px < right_px; |
183 | 0 | case Comparison::LessThanOrEqual: |
184 | 0 | return left_px <= right_px; |
185 | 0 | case Comparison::GreaterThan: |
186 | 0 | return left_px > right_px; |
187 | 0 | case Comparison::GreaterThanOrEqual: |
188 | 0 | return left_px >= right_px; |
189 | 0 | } |
190 | | |
191 | 0 | VERIFY_NOT_REACHED(); |
192 | 0 | } |
193 | | |
194 | 0 | if (left.is_ratio()) { |
195 | 0 | auto left_decimal = left.ratio().value(); |
196 | 0 | auto right_decimal = right.ratio().value(); |
197 | |
|
198 | 0 | switch (comparison) { |
199 | 0 | case Comparison::Equal: |
200 | 0 | return left_decimal == right_decimal; |
201 | 0 | case Comparison::LessThan: |
202 | 0 | return left_decimal < right_decimal; |
203 | 0 | case Comparison::LessThanOrEqual: |
204 | 0 | return left_decimal <= right_decimal; |
205 | 0 | case Comparison::GreaterThan: |
206 | 0 | return left_decimal > right_decimal; |
207 | 0 | case Comparison::GreaterThanOrEqual: |
208 | 0 | return left_decimal >= right_decimal; |
209 | 0 | } |
210 | 0 | VERIFY_NOT_REACHED(); |
211 | 0 | } |
212 | | |
213 | 0 | if (left.is_resolution()) { |
214 | 0 | auto left_dppx = left.resolution().to_dots_per_pixel(); |
215 | 0 | auto right_dppx = right.resolution().to_dots_per_pixel(); |
216 | |
|
217 | 0 | switch (comparison) { |
218 | 0 | case Comparison::Equal: |
219 | 0 | return left_dppx == right_dppx; |
220 | 0 | case Comparison::LessThan: |
221 | 0 | return left_dppx < right_dppx; |
222 | 0 | case Comparison::LessThanOrEqual: |
223 | 0 | return left_dppx <= right_dppx; |
224 | 0 | case Comparison::GreaterThan: |
225 | 0 | return left_dppx > right_dppx; |
226 | 0 | case Comparison::GreaterThanOrEqual: |
227 | 0 | return left_dppx >= right_dppx; |
228 | 0 | } |
229 | 0 | VERIFY_NOT_REACHED(); |
230 | 0 | } |
231 | | |
232 | 0 | VERIFY_NOT_REACHED(); |
233 | 0 | } |
234 | | |
235 | | NonnullOwnPtr<MediaCondition> MediaCondition::from_general_enclosed(GeneralEnclosed&& general_enclosed) |
236 | 0 | { |
237 | 0 | auto result = new MediaCondition; |
238 | 0 | result->type = Type::GeneralEnclosed; |
239 | 0 | result->general_enclosed = move(general_enclosed); |
240 | |
|
241 | 0 | return adopt_own(*result); |
242 | 0 | } |
243 | | |
244 | | NonnullOwnPtr<MediaCondition> MediaCondition::from_feature(MediaFeature&& feature) |
245 | 0 | { |
246 | 0 | auto result = new MediaCondition; |
247 | 0 | result->type = Type::Single; |
248 | 0 | result->feature = move(feature); |
249 | |
|
250 | 0 | return adopt_own(*result); |
251 | 0 | } |
252 | | |
253 | | NonnullOwnPtr<MediaCondition> MediaCondition::from_not(NonnullOwnPtr<MediaCondition>&& condition) |
254 | 0 | { |
255 | 0 | auto result = new MediaCondition; |
256 | 0 | result->type = Type::Not; |
257 | 0 | result->conditions.append(move(condition)); |
258 | |
|
259 | 0 | return adopt_own(*result); |
260 | 0 | } |
261 | | |
262 | | NonnullOwnPtr<MediaCondition> MediaCondition::from_and_list(Vector<NonnullOwnPtr<MediaCondition>>&& conditions) |
263 | 0 | { |
264 | 0 | auto result = new MediaCondition; |
265 | 0 | result->type = Type::And; |
266 | 0 | result->conditions = move(conditions); |
267 | |
|
268 | 0 | return adopt_own(*result); |
269 | 0 | } |
270 | | |
271 | | NonnullOwnPtr<MediaCondition> MediaCondition::from_or_list(Vector<NonnullOwnPtr<MediaCondition>>&& conditions) |
272 | 0 | { |
273 | 0 | auto result = new MediaCondition; |
274 | 0 | result->type = Type::Or; |
275 | 0 | result->conditions = move(conditions); |
276 | |
|
277 | 0 | return adopt_own(*result); |
278 | 0 | } |
279 | | |
280 | | String MediaCondition::to_string() const |
281 | 0 | { |
282 | 0 | StringBuilder builder; |
283 | 0 | builder.append('('); |
284 | 0 | switch (type) { |
285 | 0 | case Type::Single: |
286 | 0 | builder.append(feature->to_string()); |
287 | 0 | break; |
288 | 0 | case Type::Not: |
289 | 0 | builder.append("not "sv); |
290 | 0 | builder.append(conditions.first()->to_string()); |
291 | 0 | break; |
292 | 0 | case Type::And: |
293 | 0 | builder.join(" and "sv, conditions); |
294 | 0 | break; |
295 | 0 | case Type::Or: |
296 | 0 | builder.join(" or "sv, conditions); |
297 | 0 | break; |
298 | 0 | case Type::GeneralEnclosed: |
299 | 0 | builder.append(general_enclosed->to_string()); |
300 | 0 | break; |
301 | 0 | } |
302 | 0 | builder.append(')'); |
303 | 0 | return MUST(builder.to_string()); |
304 | 0 | } |
305 | | |
306 | | MatchResult MediaCondition::evaluate(HTML::Window const& window) const |
307 | 0 | { |
308 | 0 | switch (type) { |
309 | 0 | case Type::Single: |
310 | 0 | return as_match_result(feature->evaluate(window)); |
311 | 0 | case Type::Not: |
312 | 0 | return negate(conditions.first()->evaluate(window)); |
313 | 0 | case Type::And: |
314 | 0 | return evaluate_and(conditions, [&](auto& child) { return child->evaluate(window); }); |
315 | 0 | case Type::Or: |
316 | 0 | return evaluate_or(conditions, [&](auto& child) { return child->evaluate(window); }); |
317 | 0 | case Type::GeneralEnclosed: |
318 | 0 | return general_enclosed->evaluate(); |
319 | 0 | } |
320 | 0 | VERIFY_NOT_REACHED(); |
321 | 0 | } |
322 | | |
323 | | String MediaQuery::to_string() const |
324 | 0 | { |
325 | 0 | StringBuilder builder; |
326 | |
|
327 | 0 | if (m_negated) |
328 | 0 | builder.append("not "sv); |
329 | |
|
330 | 0 | if (m_negated || m_media_type != MediaType::All || !m_media_condition) { |
331 | 0 | builder.append(CSS::to_string(m_media_type)); |
332 | 0 | if (m_media_condition) |
333 | 0 | builder.append(" and "sv); |
334 | 0 | } |
335 | |
|
336 | 0 | if (m_media_condition) { |
337 | 0 | builder.append(m_media_condition->to_string()); |
338 | 0 | } |
339 | |
|
340 | 0 | return MUST(builder.to_string()); |
341 | 0 | } |
342 | | |
343 | | bool MediaQuery::evaluate(HTML::Window const& window) |
344 | 0 | { |
345 | 0 | auto matches_media = [](MediaType media) -> MatchResult { |
346 | 0 | switch (media) { |
347 | 0 | case MediaType::All: |
348 | 0 | return MatchResult::True; |
349 | 0 | case MediaType::Print: |
350 | | // FIXME: Enable for printing, when we have printing! |
351 | 0 | return MatchResult::False; |
352 | 0 | case MediaType::Screen: |
353 | | // FIXME: Disable for printing, when we have printing! |
354 | 0 | return MatchResult::True; |
355 | 0 | case MediaType::Unknown: |
356 | 0 | return MatchResult::False; |
357 | | // Deprecated, must never match: |
358 | 0 | case MediaType::TTY: |
359 | 0 | case MediaType::TV: |
360 | 0 | case MediaType::Projection: |
361 | 0 | case MediaType::Handheld: |
362 | 0 | case MediaType::Braille: |
363 | 0 | case MediaType::Embossed: |
364 | 0 | case MediaType::Aural: |
365 | 0 | case MediaType::Speech: |
366 | 0 | return MatchResult::False; |
367 | 0 | } |
368 | 0 | VERIFY_NOT_REACHED(); |
369 | 0 | }; |
370 | |
|
371 | 0 | MatchResult result = matches_media(m_media_type); |
372 | |
|
373 | 0 | if ((result == MatchResult::True) && m_media_condition) |
374 | 0 | result = m_media_condition->evaluate(window); |
375 | |
|
376 | 0 | if (m_negated) |
377 | 0 | result = negate(result); |
378 | |
|
379 | 0 | m_matches = result == MatchResult::True; |
380 | 0 | return m_matches; |
381 | 0 | } |
382 | | |
383 | | // https://www.w3.org/TR/cssom-1/#serialize-a-media-query-list |
384 | | String serialize_a_media_query_list(Vector<NonnullRefPtr<MediaQuery>> const& media_queries) |
385 | 0 | { |
386 | | // 1. If the media query list is empty, then return the empty string. |
387 | 0 | if (media_queries.is_empty()) |
388 | 0 | return String {}; |
389 | | |
390 | | // 2. Serialize each media query in the list of media queries, in the same order as they |
391 | | // appear in the media query list, and then serialize the list. |
392 | 0 | return MUST(String::join(", "sv, media_queries)); |
393 | 0 | } |
394 | | |
395 | | MediaQuery::MediaType media_type_from_string(StringView name) |
396 | 0 | { |
397 | 0 | if (name.equals_ignoring_ascii_case("all"sv)) |
398 | 0 | return MediaQuery::MediaType::All; |
399 | 0 | if (name.equals_ignoring_ascii_case("aural"sv)) |
400 | 0 | return MediaQuery::MediaType::Aural; |
401 | 0 | if (name.equals_ignoring_ascii_case("braille"sv)) |
402 | 0 | return MediaQuery::MediaType::Braille; |
403 | 0 | if (name.equals_ignoring_ascii_case("embossed"sv)) |
404 | 0 | return MediaQuery::MediaType::Embossed; |
405 | 0 | if (name.equals_ignoring_ascii_case("handheld"sv)) |
406 | 0 | return MediaQuery::MediaType::Handheld; |
407 | 0 | if (name.equals_ignoring_ascii_case("print"sv)) |
408 | 0 | return MediaQuery::MediaType::Print; |
409 | 0 | if (name.equals_ignoring_ascii_case("projection"sv)) |
410 | 0 | return MediaQuery::MediaType::Projection; |
411 | 0 | if (name.equals_ignoring_ascii_case("screen"sv)) |
412 | 0 | return MediaQuery::MediaType::Screen; |
413 | 0 | if (name.equals_ignoring_ascii_case("speech"sv)) |
414 | 0 | return MediaQuery::MediaType::Speech; |
415 | 0 | if (name.equals_ignoring_ascii_case("tty"sv)) |
416 | 0 | return MediaQuery::MediaType::TTY; |
417 | 0 | if (name.equals_ignoring_ascii_case("tv"sv)) |
418 | 0 | return MediaQuery::MediaType::TV; |
419 | 0 | return MediaQuery::MediaType::Unknown; |
420 | 0 | } |
421 | | |
422 | | StringView to_string(MediaQuery::MediaType media_type) |
423 | 0 | { |
424 | 0 | switch (media_type) { |
425 | 0 | case MediaQuery::MediaType::All: |
426 | 0 | return "all"sv; |
427 | 0 | case MediaQuery::MediaType::Aural: |
428 | 0 | return "aural"sv; |
429 | 0 | case MediaQuery::MediaType::Braille: |
430 | 0 | return "braille"sv; |
431 | 0 | case MediaQuery::MediaType::Embossed: |
432 | 0 | return "embossed"sv; |
433 | 0 | case MediaQuery::MediaType::Handheld: |
434 | 0 | return "handheld"sv; |
435 | 0 | case MediaQuery::MediaType::Print: |
436 | 0 | return "print"sv; |
437 | 0 | case MediaQuery::MediaType::Projection: |
438 | 0 | return "projection"sv; |
439 | 0 | case MediaQuery::MediaType::Screen: |
440 | 0 | return "screen"sv; |
441 | 0 | case MediaQuery::MediaType::Speech: |
442 | 0 | return "speech"sv; |
443 | 0 | case MediaQuery::MediaType::TTY: |
444 | 0 | return "tty"sv; |
445 | 0 | case MediaQuery::MediaType::TV: |
446 | 0 | return "tv"sv; |
447 | 0 | case MediaQuery::MediaType::Unknown: |
448 | 0 | return "unknown"sv; |
449 | 0 | } |
450 | 0 | VERIFY_NOT_REACHED(); |
451 | 0 | } |
452 | | |
453 | | } |