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

@@ -41,6 +41,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;
@@ -1225,6 +1229,32 @@ impl BaseDocument {
         );
         chain
     }
+
+    /// 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

@@ -1,8 +1,7 @@
 use std::collections::HashSet;
 
-use crate::net::{CssHandler, ImageHandler};
+use crate::net::CssHandler;
 use crate::node::NodeSpecificData;
-use crate::util::ImageType;
 use crate::{Attribute, BaseDocument, ElementNodeData, NodeData, QualName, local_name, ns};
 use blitz_traits::net::Request;
 use style::invalidation::element::restyle_hints::RestyleHint;
@@ -84,6 +83,7 @@ impl DocumentMutator<'_> {
         let child_ids = std::mem::take(&mut self.doc.nodes[old_parent_id].children);
         self.maybe_push_style_node(old_parent_id);
         self.append_children(new_parent_id, &child_ids);
+        self.maybe_load_image(&child_ids);
     }
 
     pub fn append_children(&mut self, parent_id: usize, child_ids: &[usize]) {
@@ -99,6 +99,7 @@ impl DocumentMutator<'_> {
         }
 
         self.maybe_push_style_node(parent_id);
+        self.maybe_load_image(child_ids);
     }
 
     pub fn replace_node_with(&mut self, anchor_node_id: usize, new_node_ids: &[usize]) {
@@ -137,11 +138,13 @@ impl DocumentMutator<'_> {
         }
 
         self.maybe_push_parent_style_node(anchor_node_id);
+        self.maybe_load_image(new_node_ids);
     }
 
     pub fn insert_nodes_before(&mut self, anchor_node_id: usize, new_node_ids: &[usize]) {
         self.doc.insert_before(anchor_node_id, new_node_ids);
         self.maybe_push_parent_style_node(anchor_node_id);
+        self.maybe_load_image(new_node_ids);
     }
 
     pub fn remove_node_if_unparented(&mut self, node_id: usize) {
@@ -210,7 +213,7 @@ impl DocumentMutator<'_> {
         let tag = node.element_data().unwrap().name.local.as_ref();
         match tag {
             "link" => self.load_linked_stylesheet(id),
-            "img" => self.load_image(id),
+            // "img" => self.doc.load_image(id),
             "style" => {
                 self.style_nodes.insert(id);
             }
@@ -255,7 +258,8 @@ impl DocumentMutator<'_> {
         };
 
         let attr = name.local.as_ref();
-        let load_image = element.name.local == local_name!("img") && attr == "src";
+        let load_image =
+            element.name.local == local_name!("img") && (attr == "src" || attr == "srcset");
 
         if element.name.local == local_name!("input") && attr == "checked" {
             set_input_checked_state(element, value.to_string());
@@ -284,7 +288,7 @@ impl DocumentMutator<'_> {
         }
 
         if load_image {
-            self.load_image(node_id);
+            self.doc.load_image(node_id);
         }
     }
 
@@ -377,16 +381,16 @@ impl<'doc> DocumentMutator<'doc> {
         );
     }
 
-    fn load_image(&mut self, target_id: usize) {
-        let node = &self.doc.nodes[target_id];
-        if let Some(raw_src) = node.attr(local_name!("src")) {
-            if !raw_src.is_empty() {
-                let src = self.doc.resolve_url(raw_src);
-                self.doc.net_provider.fetch(
-                    self.doc.id(),
-                    Request::get(src),
-                    Box::new(ImageHandler::new(target_id, ImageType::Image)),
-                );
+    fn is_img_node(&self, node_id: usize) -> bool {
+        self.doc.nodes[node_id]
+            .data
+            .is_element_with_tag_name(&local_name!("img"))
+    }
+
+    fn maybe_load_image(&self, node_ids: &[usize]) {
+        for id in node_ids.iter() {
+            if self.is_img_node(*id) {
+                self.doc.load_image(*id);
             }
         }
     }

packages/blitz-dom/src/mutator.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,