chore(innate): add layout setup

kayle/tests/innate-playwright.spec.ts

@@ -11,14 +11,15 @@ test("kayle_innate, fast_htmlcs, fast_axecore, and ace audit drakeMock profiling
   if (process.env.LOG_ENABLED) {
     page.on("console", (msg) => console.log("PAGE LOG:", msg.text()));
   }
+
   const { html, css } = await innateBuilder({
     page,
     browser,
-    runners: ["htmlcs"],
     includeWarnings: true,
     origin: "https://www.drake.com",
     html: drakeMock,
   });
+
   const startTime = performance.now();
   // 8 - after building end engine optimized most likely will be at 12 ms
   await _audit_not_ready(html, css);

kayle_innate/Cargo.toml

@@ -12,7 +12,7 @@ crate-type = ["cdylib", "rlib"]
 
 [features]
 default = ["console_error_panic_hook", "accessibility"]
-accessibility = ["cssparser"]
+accessibility = ["cssparser", "taffy"]
 
 [dependencies]
 wasm-bindgen = "0.2.63"
@@ -24,6 +24,7 @@ case_insensitive_string = "0.1.0"
 scraper = { version = "0.17.1" }
 getrandom = { version = "0.2", features = ["js"] }
 cssparser = { version = "0.33.0", optional = true }
+taffy = { version = "0.3.13", optional = true }
 
 [dev-dependencies]
 wasm-bindgen-test = "0.3.37"

kayle_innate/src/engine/rules/wcag.rs

@@ -66,8 +66,8 @@ impl WCAG3AA {
         // allow tree mutation until threads or setup the tree with initial elements.
         mut tree: std::collections::BTreeMap<String, Vec<scraper::node::Element>>,
         _css: cssparser::Parser<'_, '_>,
+        // todo: get configs like viewport
     ) -> Vec<Issue> {
-
         // pre populate must have keys
         if !tree.contains_key("title") {
             tree.insert("title".into(), Default::default());

kayle_innate/src/lib.rs

@@ -150,9 +150,56 @@ pub fn get_document_links(res: &str, domain: &str) -> Box<[JsValue]> {
 /// try to fix all possible issues using a spec against the tree.
 pub fn parse_accessibility_tree(
     html: &str,
+    // todo: return the nodes with a tuple of the layout node and the element node
 ) -> std::collections::BTreeMap<String, Vec<scraper::node::Element>> {
+    use taffy::prelude::*;
+
     console_log!("Starting accessibility tree parsing. This is incomplete and should not be used in production.");
 
+    // todo: use optional variable for clips or layout creation
+    let mut taffy = Taffy::new();
+
+    let header_node = taffy
+        .new_leaf(Style {
+            size: Size {
+                width: points(800.0),
+                height: points(100.0),
+            },
+            ..Default::default()
+        })
+        .unwrap();
+
+    let body_node = taffy
+        .new_leaf(Style {
+            size: Size {
+                width: points(800.0),
+                height: auto(),
+            },
+            flex_grow: 1.0,
+            ..Default::default()
+        })
+        .unwrap();
+
+    let root_node = taffy
+        .new_with_children(
+            Style {
+                flex_direction: FlexDirection::Column,
+                size: Size {
+                    width: points(800.0),
+                    height: points(600.0),
+                },
+                ..Default::default()
+            },
+            &[header_node, body_node],
+        )
+        .unwrap();
+
+    // Call compute_layout on the root of your tree to run the layout algorithm
+    taffy.compute_layout(root_node, Size::MAX_CONTENT).unwrap();
+
+    // We can get the x,y, and height, width of the element on proper tree insert
+    console_log!("Header Layout {:?}", taffy.layout(header_node).unwrap());
+
     let t = now();
     // parse doc will start from html downwards
     let h = scraper::Html::parse_document(html);

package.json

@@ -16,6 +16,7 @@
     "build:test:fast_htmlcs": "yarn build:fast_htmlcs && yarn test:playwright:htmlcs",
     "build:test:axe": "yarn build:fast_axecore && yarn test:axe",
     "build:test:playwright:axe": "yarn build:fast_axecore && yarn test:playwright:axe",
+    "build:innate": "cd kayle_innate && wasm-pack build --target nodejs",
     "pub:fast_htmlcs": "yarn build:fast_htmlcs && yarn npm publish",
     "pub:fast_axecore": "yarn build:fast_axecore && yarn npm publish",
     "pub:kayle": "yarn build:kayle && yarn npm publish",