web-api-cat 0.6.6

Bindings between boa-cat (JS engine) and the DOM (html-cat tree) plus fetch (net-cat). v0.6.6 adds `Element.cloneNode(deep)` -- shallow by default, recursive when `deep === true`. The clone owns fresh `__attributes`, `style`, `children`, and `classList` (with backref retargeted to the new element id) plus a freshly-installed `innerHTML` accessor, so mutating the clone never bleeds back into the original. Seventh sub-crate of a Servo-replacement webview runtime targeting Tauri.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

//! `Element.innerHTML` (v0.6.5): accessor getter that serialises
//! `this.children` to HTML, and accessor setter that parses an
//! HTML fragment and replaces `this.children` with the parse
//! result.

use boa_cat::env::Env;
use boa_cat::evaluate_program_with;
use boa_cat::fuel::Fuel;
use boa_cat::heap::Heap;
use boa_cat::value::Value;
use ecma_lex_cat::lex;
use ecma_parse_cat::parse_script;
use web_api_cat::Error;

fn run(html: &str, script: &str) -> Result<Value, Error> {
    let html_doc = html_cat::parse(html)?;
    let (env, heap) = web_api_cat::install(Env::empty(), Heap::new(), &html_doc);
    let tokens = lex(script).map_err(boa_cat::Error::from)?;
    let program = parse_script(&tokens).map_err(boa_cat::Error::from)?;
    let (value, _heap) =
        evaluate_program_with(&program, env, heap, Fuel::new(200_000)).map_err(Error::from)?;
    Ok(value)
}

fn fail(_msg: &'static str) -> Error {
    Error::Engine(boa_cat::Error::Unsupported { feature: "test" })
}

#[test]
fn inner_html_get_serializes_single_child() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'><span>hi</span></div></body></html>",
        "document.getElementById('host').innerHTML",
    )?;
    matches!(value, Value::String(ref s) if s == "<span>hi</span>")
        .then_some(())
        .ok_or_else(|| fail("expected innerHTML === '<span>hi</span>'"))
}

#[test]
fn inner_html_get_serializes_multiple_children_in_order() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'><a>x</a><b>y</b><c>z</c></div></body></html>",
        "document.getElementById('host').innerHTML",
    )?;
    matches!(value, Value::String(ref s) if s == "<a>x</a><b>y</b><c>z</c>")
        .then_some(())
        .ok_or_else(|| fail("expected innerHTML to serialise children in order"))
}

#[test]
fn inner_html_get_includes_attributes() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'><a href='/x' id='link'>go</a></div></body></html>",
        "document.getElementById('host').innerHTML",
    )?;
    let Value::String(ref s) = value else {
        return Err(fail("expected innerHTML to be a string"));
    };
    s.contains(" href=\"/x\"")
        .then_some(())
        .ok_or_else(|| fail("expected innerHTML to include href attribute"))
}

#[test]
fn inner_html_get_escapes_text_content() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'></div></body></html>",
        "const host = document.getElementById('host');
        host.textContent = '<script>x</script>';
        host.innerHTML",
    )?;
    matches!(value, Value::String(ref s) if s == "&lt;script&gt;x&lt;/script&gt;")
        .then_some(())
        .ok_or_else(|| fail("expected innerHTML to HTML-escape textContent"))
}

#[test]
fn inner_html_get_on_leaf_uses_text_content() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'>plain text</div></body></html>",
        "document.getElementById('host').innerHTML",
    )?;
    matches!(value, Value::String(ref s) if s == "plain text")
        .then_some(())
        .ok_or_else(|| fail("expected leaf innerHTML to be the (escaped) text content"))
}

#[test]
fn inner_html_set_replaces_children_with_parsed_fragment() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'><span>old</span></div></body></html>",
        "const host = document.getElementById('host');
        host.innerHTML = '<p>new</p>';
        host.children[0].tagName",
    )?;
    matches!(value, Value::String(ref s) if s == "p")
        .then_some(())
        .ok_or_else(|| fail("expected first child tagName to be 'p' after innerHTML set"))
}

#[test]
fn inner_html_set_updates_children_length() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'><span>old</span></div></body></html>",
        "const host = document.getElementById('host');
        host.innerHTML = '<a>1</a><b>2</b><c>3</c>';
        host.children.length",
    )?;
    matches!(value, Value::Number(n) if (n - 3.0).abs() < 1e-9)
        .then_some(())
        .ok_or_else(|| fail("expected children.length === 3 after innerHTML set"))
}

#[test]
fn inner_html_set_empty_string_clears_children() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'><span>a</span><span>b</span></div></body></html>",
        "const host = document.getElementById('host');
        host.innerHTML = '';
        host.children.length",
    )?;
    matches!(value, Value::Number(n) if (n - 0.0).abs() < 1e-9)
        .then_some(())
        .ok_or_else(|| fail("expected innerHTML = '' to clear children"))
}

#[test]
fn inner_html_round_trip_through_set_and_get() -> Result<(), Error> {
    let value = run(
        "<html><body><div id='host'></div></body></html>",
        "const host = document.getElementById('host');
        host.innerHTML = '<p>round</p>';
        host.innerHTML",
    )?;
    matches!(value, Value::String(ref s) if s == "<p>round</p>")
        .then_some(())
        .ok_or_else(|| fail("expected innerHTML round-trip"))
}

#[test]
fn inner_html_works_on_created_element() -> Result<(), Error> {
    let value = run(
        "<html><body></body></html>",
        "const el = document.createElement('div');
        el.innerHTML = '<span>x</span>';
        el.children[0].tagName",
    )?;
    matches!(value, Value::String(ref s) if s == "span")
        .then_some(())
        .ok_or_else(|| fail("expected innerHTML to work on createElement output"))
}