test: add canvas test

LeuisKen · LeuisKen · commit 557344d0f8ce · 2025-03-15T11:21:47.000+01:00
diff --git a/bridge/rusty_webf_sys/src/dom/character_data.rs b/bridge/rusty_webf_sys/src/dom/character_data.rs
@@ -52,4 +52,8 @@ impl EventTargetMethods for CharacterData {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.node.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.node.as_event_target()
+  }
 }
diff --git a/bridge/rusty_webf_sys/src/dom/comment.rs b/bridge/rusty_webf_sys/src/dom/comment.rs
@@ -53,4 +53,8 @@ impl EventTargetMethods for Comment {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.character_data.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.character_data.as_event_target()
+  }
 }
diff --git a/bridge/rusty_webf_sys/src/dom/container_node.rs b/bridge/rusty_webf_sys/src/dom/container_node.rs
@@ -72,6 +72,10 @@ impl EventTargetMethods for ContainerNode {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.node.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.node.as_event_target()
+  }
 }
 
 impl ContainerNodeMethods for ContainerNode {}
diff --git a/bridge/rusty_webf_sys/src/dom/document.rs b/bridge/rusty_webf_sys/src/dom/document.rs
@@ -349,6 +349,10 @@ impl EventTargetMethods for Document {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.container_node.node.event_target.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.container_node.node.event_target.as_event_target()
+  }
 }
 
 impl ContainerNodeMethods for Document {}
diff --git a/bridge/rusty_webf_sys/src/dom/document_fragment.rs b/bridge/rusty_webf_sys/src/dom/document_fragment.rs
@@ -76,6 +76,10 @@ impl EventTargetMethods for DocumentFragment {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.container_node.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.container_node.as_event_target()
+  }
 }
 
 impl DocumentFragmentMethods for DocumentFragment {}
diff --git a/bridge/rusty_webf_sys/src/dom/element.rs b/bridge/rusty_webf_sys/src/dom/element.rs
@@ -111,6 +111,7 @@ pub trait ElementMethods: ContainerNodeMethods {
   fn style(&self) -> CSSStyleDeclaration;
   fn to_blob(&self, exception_state: &ExceptionState) -> WebFNativeFuture<Vec<u8>>;
   fn to_blob_with_device_pixel_ratio(&self, device_pixel_ratio: f64, exception_state: &ExceptionState) -> WebFNativeFuture<Vec<u8>>;
+  fn as_element(&self) -> &Element;
 }
 
 impl ContainerNodeMethods for Element {}
@@ -166,6 +167,10 @@ impl EventTargetMethods for Element {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.container_node.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.container_node.as_event_target()
+  }
 }
 
 impl ElementMethods for Element {
@@ -178,4 +183,7 @@ impl ElementMethods for Element {
   fn to_blob_with_device_pixel_ratio(&self, device_pixel_ratio: f64, exception_state: &ExceptionState) -> WebFNativeFuture<Vec<u8>> {
     self.to_blob_with_device_pixel_ratio(device_pixel_ratio, exception_state)
   }
+  fn as_element(&self) -> &Element {
+    self
+  }
 }
diff --git a/bridge/rusty_webf_sys/src/dom/events/event_target.rs b/bridge/rusty_webf_sys/src/dom/events/event_target.rs
@@ -49,7 +49,6 @@ pub struct EventTargetRustMethods {
 
 impl RustMethods for EventTargetRustMethods {}
 
-
 pub struct EventTarget {
   pub ptr: *const OpaquePtr,
   status: *const RustValueStatus,
@@ -233,6 +232,8 @@ pub trait EventTargetMethods {
     exception_state: &ExceptionState) -> Result<(), String>;
 
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool;
+
+  fn as_event_target(&self) -> &EventTarget;
 }
 
 impl Drop for EventTarget {
@@ -281,4 +282,8 @@ impl EventTargetMethods for EventTarget {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self
+  }
 }
diff --git a/bridge/rusty_webf_sys/src/dom/node.rs b/bridge/rusty_webf_sys/src/dom/node.rs
@@ -120,6 +120,10 @@ impl EventTargetMethods for Node {
                     exception_state: &ExceptionState) -> bool{
     self.event_target.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    &self.event_target
+  }
 }
 
 impl NodeMethods for Node {
diff --git a/bridge/rusty_webf_sys/src/dom/text.rs b/bridge/rusty_webf_sys/src/dom/text.rs
@@ -69,4 +69,8 @@ impl EventTargetMethods for Text {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.character_data.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.character_data.as_event_target()
+  }
 }
diff --git a/bridge/rusty_webf_sys/src/frame/window.rs b/bridge/rusty_webf_sys/src/frame/window.rs
@@ -108,4 +108,8 @@ impl EventTargetMethods for Window {
                     exception_state: &ExceptionState) -> bool{
     self.event_target.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    &self.event_target
+  }
 }
diff --git a/bridge/rusty_webf_sys/src/html/html_element.rs b/bridge/rusty_webf_sys/src/html/html_element.rs
@@ -32,6 +32,10 @@ impl ElementMethods for HTMLElement {
   fn to_blob_with_device_pixel_ratio(&self, device_pixel_ratio: f64, exception_state: &ExceptionState) -> WebFNativeFuture<Vec<u8>> {
     self.element.to_blob_with_device_pixel_ratio(device_pixel_ratio, exception_state)
   }
+
+  fn as_element(&self) -> &Element {
+    &self.element
+  }
 }
 
 impl ContainerNodeMethods for HTMLElement {}
@@ -87,6 +91,10 @@ impl EventTargetMethods for HTMLElement {
   fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {
     self.element.dispatch_event(event, exception_state)
   }
+
+  fn as_event_target(&self) -> &EventTarget {
+    self.element.as_event_target()
+  }
 }
 
 impl HTMLElementMethods for HTMLElement {
diff --git a/integration_tests/rust_builder/rust/src/dom/elements/canvas/canvas.rs b/integration_tests/rust_builder/rust/src/dom/elements/canvas/canvas.rs
@@ -0,0 +1,39 @@
+use webf_sys::{ExecutingContext, NodeMethods};
+use webf_test_macros::webf_test_async;
+use webf_test_utils::{dom_utils::{create_element_with_style, create_element_with_style_and_child}, snapshot::snapshot_with_target_and_filename};
+
+#[webf_test_async]
+pub async fn test_set_background_color(context: ExecutingContext) {
+  let style = serde_json::json!({
+    "width": "200px",
+    "height": "200px",
+    "background-color": "blue",
+  });
+  let canvas = create_element_with_style(&context, "canvas", &style);
+  let document = context.document();
+  document.body().append_child(&canvas.as_node(), &context.create_exception_state()).unwrap();
+  snapshot_with_target_and_filename(context, &canvas, "snapshots/dom/elements/canvas/canvas.rs.c6bff5e41").await.unwrap();
+}
+
+#[webf_test_async]
+pub async fn test_behavior_like_inline_element(context: ExecutingContext) {
+  let wrapper_style = serde_json::json!({
+    "width": "200px",
+    "height": "200px",
+  });
+  let wrapper = create_element_with_style(&context, "div", &wrapper_style);
+  let canvas_style = serde_json::json!({
+    "width": "100px",
+    "height": "100px",
+    "background-color": "blue",
+  });
+  let canvas = create_element_with_style(&context, "canvas", &canvas_style);
+  let exception_state = context.create_exception_state();
+  let text_node = context.document().create_text_node("12345", &exception_state).unwrap();
+  let text = create_element_with_style_and_child(&context, "span", &serde_json::json!({}), text_node.as_node());
+  wrapper.append_child(&canvas.as_node(), &exception_state).unwrap();
+  wrapper.append_child(&text.as_node(), &exception_state).unwrap();
+  let document = context.document();
+  document.body().append_child(&wrapper.as_node(), &exception_state).unwrap();
+  snapshot_with_target_and_filename(context, &wrapper, "snapshots/dom/elements/canvas/canvas.rs.58e528bc1").await.unwrap();
+}
diff --git a/integration_tests/rust_builder/rust/src/dom/elements/canvas/mod.rs b/integration_tests/rust_builder/rust/src/dom/elements/canvas/mod.rs
@@ -0,0 +1 @@
+pub mod canvas;
diff --git a/integration_tests/rust_builder/rust/src/dom/elements/mod.rs b/integration_tests/rust_builder/rust/src/dom/elements/mod.rs
@@ -1 +1,2 @@
+pub mod canvas;
 pub mod p;
diff --git a/integration_tests/rust_builder/rust/webf_test_utils/Cargo.toml b/integration_tests/rust_builder/rust/webf_test_utils/Cargo.toml
@@ -5,6 +5,7 @@ edition = "2021"
 
 [dependencies]
 webf-sys = "0.16.0"
+serde_json = "1.0"
 
 [patch.crates-io]
 webf-sys = { path = "../../../../bridge/rusty_webf_sys" }
diff --git a/integration_tests/rust_builder/rust/webf_test_utils/src/dom_utils.rs b/integration_tests/rust_builder/rust/webf_test_utils/src/dom_utils.rs
@@ -0,0 +1,59 @@
+use webf_sys::{Element, ExceptionState, ExecutingContext, NativeValue, Node, NodeMethods};
+use serde_json::Value;
+
+pub fn set_element_style(element: &Element, style: &Value, exception_state: &ExceptionState) {
+  if let Some(obj) = style.as_object() {
+    let element_style = element.style();
+    for (key, value) in obj {
+      let value_str: String = match value {
+        Value::String(s) => s.clone(),
+        Value::Number(n) => n.to_string(),
+        _ => continue, // Skip values that aren't strings or numbers
+      };
+      element_style.set_property(key, NativeValue::new_string(&value_str), exception_state).unwrap();
+    }
+  }
+}
+
+pub fn create_element_with_style(
+  context: &ExecutingContext,
+  tag_name: &str,
+  style: &Value,
+) -> Element{
+  let document = context.document();
+  let exception_state = context.create_exception_state();
+
+  let element = document.create_element(tag_name, &exception_state).unwrap();
+  set_element_style(&element, style, &exception_state);
+
+  element
+}
+
+pub fn create_element_with_style_and_child(
+  context: &ExecutingContext,
+  tag_name: &str,
+  style: &Value,
+  child: &Node,
+) -> Element {
+  let exception_state = context.create_exception_state();
+  let element = create_element_with_style(context, tag_name, style);
+  element.append_child(child, &exception_state).unwrap();
+
+  element
+}
+
+pub fn create_element_with_style_and_children(
+  context: &ExecutingContext,
+  tag_name: &str,
+  style: &Value,
+  children: &[Node],
+) -> Element {
+  let exception_state = context.create_exception_state();
+
+  let element = create_element_with_style(context, tag_name, style);
+  for child in children {
+    element.append_child(child, &exception_state).unwrap();
+  }
+
+  element
+}
diff --git a/integration_tests/rust_builder/rust/webf_test_utils/src/lib.rs b/integration_tests/rust_builder/rust/webf_test_utils/src/lib.rs
@@ -1,5 +1,6 @@
 pub mod async_runner;
 pub mod callback_runner;
 pub mod common;
+pub mod dom_utils;
 pub mod snapshot;
 pub mod sync_runner;
diff --git a/integration_tests/rust_builder/rust/webf_test_utils/src/snapshot.rs b/integration_tests/rust_builder/rust/webf_test_utils/src/snapshot.rs
@@ -1,24 +1,24 @@
-use webf_sys::{ElementMethods, ExecutingContext, WebFNativeFuture};
+use webf_sys::{Element, ElementMethods, EventTargetMethods, ExecutingContext, WebFNativeFuture};
 
-pub fn snapshot_with_filename(context: ExecutingContext, filename: &'static str) -> WebFNativeFuture<()> {
+pub fn snapshot_with_target_and_filename(context: ExecutingContext, target: &Element, filename: &'static str) -> WebFNativeFuture<()> {
   context.__webf_sync_buffer__();
 
   let window = context.window();
   let exception_state = context.create_exception_state();
 
   let snapshot_future = WebFNativeFuture::<()>::new();
   let snapshot_future_in_callback = snapshot_future.clone();
+  let target = target.as_event_target().as_element().unwrap();
 
   let context_for_callback = context.clone();
   let animation_frame_callback = Box::new(move |_time_stamp| {
     let context_for_future = context_for_callback.clone();
     let snapshot_future_in_callback = snapshot_future_in_callback.clone();
+    let target = target.as_event_target().as_element().unwrap();
     webf_sys::webf_future::spawn(context_for_callback.clone(), async move {
-      let document = context_for_future.document();
-      let html = document.document_element();
       let exception_state = context_for_future.create_exception_state();
 
-      let html_blob = html.to_blob_with_device_pixel_ratio(1.0, &exception_state).await.unwrap().unwrap();
+      let html_blob = target.to_blob_with_device_pixel_ratio(1.0, &exception_state).await.unwrap().unwrap();
 
       let match_result = context_for_future.__webf_match_image_snapshot__(html_blob, filename, &exception_state).await.unwrap().unwrap();
       assert_eq!(match_result, true);
@@ -31,3 +31,10 @@ pub fn snapshot_with_filename(context: ExecutingContext, filename: &'static str)
 
   snapshot_future
 }
+
+pub fn snapshot_with_filename(context: ExecutingContext, filename: &'static str) -> WebFNativeFuture<()> {
+  let document = context.document();
+  let html = document.document_element();
+
+  snapshot_with_target_and_filename(context, html.as_element(), filename)
+}
diff --git a/integration_tests/snapshots/dom/elements/canvas/canvas.rs.58e528bc1.png b/integration_tests/snapshots/dom/elements/canvas/canvas.rs.58e528bc1.png
diff --git a/integration_tests/snapshots/dom/elements/canvas/canvas.rs.c6bff5e41.png b/integration_tests/snapshots/dom/elements/canvas/canvas.rs.c6bff5e41.png

Original file line number	Diff line number	Diff line change
`@@ -52,4 +52,8 @@ impl EventTargetMethods for CharacterData {`
`52`	`52`	`fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {`
`53`	`53`	`self.node.dispatch_event(event, exception_state)`
`54`	`54`	`}`
	`55`	`+`
	`56`	`+ fn as_event_target(&self) -> &EventTarget {`
	`57`	`+ self.node.as_event_target()`
	`58`	`+ }`
`55`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -53,4 +53,8 @@ impl EventTargetMethods for Comment {`
`53`	`53`	`fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {`
`54`	`54`	`self.character_data.dispatch_event(event, exception_state)`
`55`	`55`	`}`
	`56`	`+`
	`57`	`+ fn as_event_target(&self) -> &EventTarget {`
	`58`	`+ self.character_data.as_event_target()`
	`59`	`+ }`
`56`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,10 @@ impl EventTargetMethods for ContainerNode {`
`72`	`72`	`fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {`
`73`	`73`	`self.node.dispatch_event(event, exception_state)`
`74`	`74`	`}`
	`75`	`+`
	`76`	`+ fn as_event_target(&self) -> &EventTarget {`
	`77`	`+ self.node.as_event_target()`
	`78`	`+ }`
`75`	`79`	`}`
`76`	`80`
`77`	`81`	`impl ContainerNodeMethods for ContainerNode {}`
Original file line number	Diff line number	Diff line change
`@@ -349,6 +349,10 @@ impl EventTargetMethods for Document {`
`349`	`349`	`fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {`
`350`	`350`	`self.container_node.node.event_target.dispatch_event(event, exception_state)`
`351`	`351`	`}`
	`352`	`+`
	`353`	`+ fn as_event_target(&self) -> &EventTarget {`
	`354`	`+ self.container_node.node.event_target.as_event_target()`
	`355`	`+ }`
`352`	`356`	`}`
`353`	`357`
`354`	`358`	`impl ContainerNodeMethods for Document {}`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,10 @@ impl EventTargetMethods for DocumentFragment {`
`76`	`76`	`fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {`
`77`	`77`	`self.container_node.dispatch_event(event, exception_state)`
`78`	`78`	`}`
	`79`	`+`
	`80`	`+ fn as_event_target(&self) -> &EventTarget {`
	`81`	`+ self.container_node.as_event_target()`
	`82`	`+ }`
`79`	`83`	`}`
`80`	`84`
`81`	`85`	`impl DocumentFragmentMethods for DocumentFragment {}`
Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,7 @@ pub trait ElementMethods: ContainerNodeMethods {`
`111`	`111`	`fn style(&self) -> CSSStyleDeclaration;`
`112`	`112`	`fn to_blob(&self, exception_state: &ExceptionState) -> WebFNativeFuture<Vec<u8>>;`
`113`	`113`	`fn to_blob_with_device_pixel_ratio(&self, device_pixel_ratio: f64, exception_state: &ExceptionState) -> WebFNativeFuture<Vec<u8>>;`
	`114`	`+ fn as_element(&self) -> &Element;`
`114`	`115`	`}`
`115`	`116`
`116`	`117`	`impl ContainerNodeMethods for Element {}`
`@@ -166,6 +167,10 @@ impl EventTargetMethods for Element {`
`166`	`167`	`fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {`
`167`	`168`	`self.container_node.dispatch_event(event, exception_state)`
`168`	`169`	`}`
	`170`	`+`
	`171`	`+ fn as_event_target(&self) -> &EventTarget {`
	`172`	`+ self.container_node.as_event_target()`
	`173`	`+ }`
`169`	`174`	`}`
`170`	`175`
`171`	`176`	`impl ElementMethods for Element {`
`@@ -178,4 +183,7 @@ impl ElementMethods for Element {`
`178`	`183`	`fn to_blob_with_device_pixel_ratio(&self, device_pixel_ratio: f64, exception_state: &ExceptionState) -> WebFNativeFuture<Vec<u8>> {`
`179`	`184`	`self.to_blob_with_device_pixel_ratio(device_pixel_ratio, exception_state)`
`180`	`185`	`}`
	`186`	`+ fn as_element(&self) -> &Element {`
	`187`	`+ self`
	`188`	`+ }`
`181`	`189`	`}`
Original file line number	Diff line number	Diff line change
`@@ -120,6 +120,10 @@ impl EventTargetMethods for Node {`
`120`	`120`	`exception_state: &ExceptionState) -> bool{`
`121`	`121`	`self.event_target.dispatch_event(event, exception_state)`
`122`	`122`	`}`
	`123`	`+`
	`124`	`+ fn as_event_target(&self) -> &EventTarget {`
	`125`	`+ &self.event_target`
	`126`	`+ }`
`123`	`127`	`}`
`124`	`128`
`125`	`129`	`impl NodeMethods for Node {`
Original file line number	Diff line number	Diff line change
`@@ -69,4 +69,8 @@ impl EventTargetMethods for Text {`
`69`	`69`	`fn dispatch_event(&self, event: &Event, exception_state: &ExceptionState) -> bool {`
`70`	`70`	`self.character_data.dispatch_event(event, exception_state)`
`71`	`71`	`}`
	`72`	`+`
	`73`	`+ fn as_event_target(&self) -> &EventTarget {`
	`74`	`+ self.character_data.as_event_target()`
	`75`	`+ }`
`72`	`76`	`}`
Original file line number	Diff line number	Diff line change
`@@ -108,4 +108,8 @@ impl EventTargetMethods for Window {`
`108`	`108`	`exception_state: &ExceptionState) -> bool{`
`109`	`109`	`self.event_target.dispatch_event(event, exception_state)`
`110`	`110`	`}`
	`111`	`+`
	`112`	`+ fn as_event_target(&self) -> &EventTarget {`
	`113`	`+ &self.event_target`
	`114`	`+ }`
`111`	`115`	`}`