Account for box-sizing: border-box

Co-Authored-By: Liam Murphy <[email protected]>

src/platform_impl/web/event_loop/runner.rs

@@ -351,7 +351,8 @@ impl<T: 'static> Shared<T> {
             // `Resized` event will be sent by the `ResizeObserver`:
             if current_size != new_size {
                 let new_size = new_size.to_logical::<f64>(new_scale);
-                backend::set_canvas_size(canvas.borrow().raw(), new_size);
+                let canvas = canvas.borrow();
+                backend::set_canvas_size(canvas.window(), canvas.raw(), new_size);
             }
         }
 

src/platform_impl/web/web_sys/canvas.rs

@@ -76,7 +76,7 @@ impl Canvas {
 
         if let Some(size) = attr.inner_size {
             let size = size.to_logical(super::scale_factor(&window));
-            super::set_canvas_size(&canvas, size);
+            super::set_canvas_size(&window, &canvas, size);
         }
 
         Ok(Canvas {

src/platform_impl/web/web_sys/mod.rs

@@ -16,7 +16,7 @@ use crate::dpi::LogicalSize;
 use crate::platform::web::WindowExtWebSys;
 use crate::window::Window;
 use wasm_bindgen::closure::Closure;
-use web_sys::{Element, HtmlCanvasElement};
+use web_sys::{CssStyleDeclaration, Element, HtmlCanvasElement};
 
 pub fn throw(msg: &str) {
     wasm_bindgen::throw_str(msg);
@@ -57,7 +57,44 @@ pub fn scale_factor(window: &web_sys::Window) -> f64 {
     window.device_pixel_ratio()
 }
 
-pub fn set_canvas_size(raw: &HtmlCanvasElement, new_size: LogicalSize<f64>) {
+pub fn set_canvas_size(
+    window: &web_sys::Window,
+    raw: &HtmlCanvasElement,
+    mut new_size: LogicalSize<f64>,
+) {
+    let document = window.document().expect("Failed to obtain document");
+
+    if !document.contains(Some(raw)) {
+        return;
+    }
+
+    /// This function will panic if the element is not inserted in the DOM
+    /// or is not a CSS property that represents a size in pixel.
+    fn style_size_property(style: &CssStyleDeclaration, property: &str) -> f64 {
+        let prop = style
+            .get_property_value(property)
+            .expect("Found invalid property");
+        prop.strip_suffix("px")
+            .expect("Element was not inserted into the DOM or is not a size in pixel")
+            .parse()
+            .expect("CSS property is not a size in pixel")
+    }
+    let style = window
+        .get_computed_style(raw)
+        .expect("Failed to obtain computed style")
+        // this can't fail: we aren't using a pseudo-element
+        .expect("Invalid pseudo-element");
+    if style.get_property_value("box-sizing").unwrap() == "border-box" {
+        new_size.width += style_size_property(&style, "border-left-width")
+            + style_size_property(&style, "border-right-width")
+            + style_size_property(&style, "padding-left")
+            + style_size_property(&style, "padding-right");
+        new_size.height += style_size_property(&style, "border-top-width")
+            + style_size_property(&style, "border-bottom-width")
+            + style_size_property(&style, "padding-top")
+            + style_size_property(&style, "padding-bottom");
+    }
+
     set_canvas_style_property(raw, "width", &format!("{}px", new_size.width));
     set_canvas_style_property(raw, "height", &format!("{}px", new_size.height));
 }

src/platform_impl/web/web_sys/resize.rs

@@ -103,7 +103,7 @@ impl ResizeHandle {
             "lr" | "lr-tb" | "rl" => true,
             "tb" | "tb-lr" | "tb-rl" => false,
             _ => {
-                log::warn!("unrecognized `writing-mode`, assuming horizontal");
+                warn!("unrecognized `writing-mode`, assuming horizontal");
                 true
             }
         };

src/platform_impl/web/window.rs

@@ -151,7 +151,8 @@ impl Window {
     pub fn set_inner_size(&self, size: Size) {
         self.inner.dispatch(move |inner| {
             let size = size.to_logical(inner.scale_factor());
-            backend::set_canvas_size(inner.canvas.borrow().raw(), size);
+            let canvas = inner.canvas.borrow();
+            backend::set_canvas_size(canvas.window(), canvas.raw(), size);
         });
     }