ps-blitz-html 0.3.0-beta.3

Blitz HTML parser
Documentation 
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

//! display:contents — children must lay out as if they were children of the
//! contents element's parent.

use blitz_dom::DocumentConfig;
use blitz_html::{HtmlDocument, HtmlProvider};
use blitz_traits::shell::{ColorScheme, Viewport};
use std::sync::Arc;

fn layout_doc(html: &str) -> HtmlDocument {
    let mut doc = HtmlDocument::from_html(
        html,
        DocumentConfig {
            viewport: Some(Viewport::new(800, 600, 1.0, ColorScheme::Light)),
            html_parser_provider: Some(Arc::new(HtmlProvider) as _),
            ..Default::default()
        },
    );
    doc.resolve(0.0);
    doc
}

#[test]
fn contents_block_children_stack_and_fill_width() {
    let doc = layout_doc(
        r#"<html><body style="margin:0">
            <div style="width:300px;">
                <div style="display:contents;">
                    <div id="a" style="height:50px;"></div>
                    <div id="b" style="height:70px;"></div>
                </div>
            </div>
        </body></html>"#,
    );
    let a = doc.query_selector("#a").unwrap().expect("#a not found");
    let b = doc.query_selector("#b").unwrap().expect("#b not found");
    let la = doc.get_node(a).unwrap().final_layout;
    let lb = doc.get_node(b).unwrap().final_layout;
    assert_eq!(
        (la.size.width, la.size.height),
        (300.0, 50.0),
        "first hoisted block child must fill the grandparent width"
    );
    assert_eq!(
        (lb.size.width, lb.size.height),
        (300.0, 70.0),
        "second hoisted block child must fill the grandparent width"
    );
    assert_eq!(
        lb.location.y - la.location.y,
        50.0,
        "hoisted block children must stack vertically"
    );
}

#[test]
fn scroller_wrapping_contents_gets_full_scroll_size() {
    // The kopuz route-shell shape: a scroll container whose only child is a
    // display:contents wrapper holding tall content.
    let doc = layout_doc(
        r#"<html><body style="margin:0">
            <div id="scroller" style="height:200px; overflow-y:auto;">
                <div style="display:contents;">
                    <div id="tall" style="height:1000px;"></div>
                </div>
            </div>
        </body></html>"#,
    );
    let scroller = doc
        .query_selector("#scroller")
        .unwrap()
        .expect("#scroller not found");
    let tall = doc
        .query_selector("#tall")
        .unwrap()
        .expect("#tall not found");
    let ls = doc.get_node(scroller).unwrap().final_layout;
    let lt = doc.get_node(tall).unwrap().final_layout;
    assert_eq!(
        (lt.size.width, lt.size.height),
        (800.0, 1000.0),
        "content inside the contents wrapper must size normally"
    );
    assert_eq!(
        ls.content_size.height, 1000.0,
        "the scroller's scrollable content size must include the hoisted content"
    );
}

#[test]
fn contents_in_flex_container_hoists_children_as_flex_items() {
    // The kopuz showcase shape: flex rows whose direct children are
    // display:contents wrappers (keyed row wrappers).
    let doc = layout_doc(
        r#"<html><body style="margin:0">
            <div style="display:flex; flex-direction:column; width:300px;">
                <div style="display:contents;">
                    <div id="x" style="height:40px;"></div>
                    <div id="y" style="height:40px;"></div>
                </div>
            </div>
        </body></html>"#,
    );
    let x = doc.query_selector("#x").unwrap().expect("#x not found");
    let y = doc.query_selector("#y").unwrap().expect("#y not found");
    let lx = doc.get_node(x).unwrap().final_layout;
    let ly = doc.get_node(y).unwrap().final_layout;
    assert_eq!(
        (lx.size.width, lx.size.height),
        (300.0, 40.0),
        "hoisted flex item must stretch to the flex container width"
    );
    assert_eq!(
        ly.location.y - lx.location.y,
        40.0,
        "hoisted flex items must stack in the column"
    );
}

#[test]
fn abspos_child_hoisted_through_contents_stretches() {
    // The kopuz route-shell chain: scroll container > display:contents shell
    // > absolute inset:0 page (plus a comment placeholder sibling). The page
    // must stretch to the scroll container's padding box.
    let doc = layout_doc(
        r#"<html><body style="margin:0">
            <div style="position:relative; width:300px; height:200px; overflow-y:auto;">
                <!-- placeholder -->
                <div style="display:contents;">
                    <div id="page" style="position:absolute; inset:0;">
                        <div style="height:5000px;"></div>
                    </div>
                </div>
            </div>
        </body></html>"#,
    );
    let page = doc
        .query_selector("#page")
        .unwrap()
        .expect("#page not found");
    let layout = doc.get_node(page).unwrap().final_layout;
    assert_eq!(
        (layout.size.width, layout.size.height),
        (300.0, 200.0),
        "abspos hoisted through display:contents must stretch to the containing block"
    );
}