feat: Support for the picture element

Author: lizidev

Cargo.lock

@@ -30,6 +30,8 @@ style_traits = { version = "0.3", package = "stylo_traits" }
 style_config = { version = "0.3", package = "stylo_config" }
 style_dom = { version = "0.3", package = "stylo_dom" }
 selectors = { version = "0.28", package = "selectors" }
+cssparser = "0.35"
+mime = "0.3"
 
 markup5ever = "0.16.1" # needs to match stylo web_atoms version
 html5ever = "0.31" # needs to match stylo web_atoms version

Cargo.toml

@@ -40,6 +40,8 @@ atomic_refcell = { workspace = true, features = ["serde"] }
 string_cache = { workspace = true }
 markup5ever = { workspace = true }
 smallvec = { workspace = true }
+cssparser = { workspace = true }
+mime = { workspace = true }
 
 # DioxusLabs dependencies
 taffy = { workspace = true }

packages/blitz-dom/Cargo.toml

@@ -21,6 +21,7 @@ use style::properties::ComputedValues;
 use style::properties::style_structs::Font;
 use style::values::GenericAtomIdent;
 use style::values::computed::Overflow;
+use style_traits::ParsingMode;
 // use quadtree_rs::Quadtree;
 use crate::net::{Resource, StylesheetLoader};
 use selectors::{Element, matching::QuirksMode};
@@ -38,9 +39,12 @@ use style::servo_arc::Arc as ServoArc;
 use style::{
     dom::{TDocument, TNode},
     media_queries::{Device, MediaList},
+    parser::ParserContext,
     selector_parser::SnapshotMap,
     shared_lock::{SharedRwLock, StylesheetGuards},
-    stylesheets::{AllowImportRules, DocumentStyleSheet, Origin, Stylesheet, UrlExtraData},
+    stylesheets::{
+        AllowImportRules, CssRuleType, DocumentStyleSheet, Origin, Stylesheet, UrlExtraData,
+    },
     stylist::Stylist,
 };
 use taffy::AvailableSpace;
@@ -1221,6 +1225,46 @@ impl BaseDocument {
         );
         chain
     }
+
+    pub fn maybe_load_node_resource(&self, target_id: usize) {
+        let Some(node) = self.get_node(target_id) else {
+            return;
+        };
+
+        let NodeData::Element(el) = &node.data else {
+            return;
+        };
+
+        if el.name.local.as_ref() == "img" {
+            self.load_image(target_id);
+        }
+    }
+
+    /// https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
+    pub fn match_media(&self, media_query_string: &str) -> bool {
+        let mut input = cssparser::ParserInput::new(media_query_string);
+        let mut parser = cssparser::Parser::new(&mut input);
+
+        let url_data = UrlExtraData::from(
+            self.base_url
+                .clone()
+                .unwrap_or_else(|| "about:blank".parse::<Url>().unwrap()),
+        );
+        let quirks_mode = self.stylist.quirks_mode();
+        let context = ParserContext::new(
+            Origin::Author,
+            &url_data,
+            Some(CssRuleType::Style),
+            ParsingMode::all(),
+            quirks_mode,
+            Default::default(),
+            None,
+            None,
+        );
+
+        let media_list = MediaList::parse(&context, &mut parser);
+        media_list.evaluate(self.stylist.device(), quirks_mode)
+    }
 }
 
 impl AsRef<BaseDocument> for BaseDocument {

packages/blitz-dom/src/document.rs

@@ -37,6 +37,8 @@ use url::Url;
 use crate::layout::table::TableContext;
 use blitz_traits::{BlitzMouseButtonEvent, DomEventData, HitResult};
 
+pub mod image;
+
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
 pub enum DisplayOuter {
     Block,