whisker_css/prop/
relative.rs

1//! Lynx-only `relative-*` properties for the `display: relative`
2//! layout container.
3//!
4//! `relative-id` identifies children; the other properties refer to
5//! sibling `relative-id`s to anchor a child to a sibling edge.
6
7use crate::css::Css;
8
9impl Css {
10    /// Sets `relative-id` — identifies the element for sibling-edge
11    /// references.
12    /// <https://lynxjs.org/api/css/properties/relative-id>
13    pub fn relative_id(self, v: i32) -> Self {
14        self.push_raw("relative-id", v.to_string())
15    }
16
17    /// Sets `relative-align-top` — id of the sibling to top-align with.
18    /// <https://lynxjs.org/api/css/properties/relative-align-top>
19    pub fn relative_align_top(self, v: i32) -> Self {
20        self.push_raw("relative-align-top", v.to_string())
21    }
22
23    /// Sets `relative-align-right` — id of the sibling to right-align with.
24    /// <https://lynxjs.org/api/css/properties/relative-align-right>
25    pub fn relative_align_right(self, v: i32) -> Self {
26        self.push_raw("relative-align-right", v.to_string())
27    }
28
29    /// Sets `relative-align-bottom`.
30    /// <https://lynxjs.org/api/css/properties/relative-align-bottom>
31    pub fn relative_align_bottom(self, v: i32) -> Self {
32        self.push_raw("relative-align-bottom", v.to_string())
33    }
34
35    /// Sets `relative-align-left`.
36    /// <https://lynxjs.org/api/css/properties/relative-align-left>
37    pub fn relative_align_left(self, v: i32) -> Self {
38        self.push_raw("relative-align-left", v.to_string())
39    }
40
41    /// Sets `relative-top-of` — id of the sibling this element sits below.
42    /// <https://lynxjs.org/api/css/properties/relative-top-of>
43    pub fn relative_top_of(self, v: i32) -> Self {
44        self.push_raw("relative-top-of", v.to_string())
45    }
46
47    /// Sets `relative-right-of` — id of the sibling this element sits to the right of.
48    /// <https://lynxjs.org/api/css/properties/relative-right-of>
49    pub fn relative_right_of(self, v: i32) -> Self {
50        self.push_raw("relative-right-of", v.to_string())
51    }
52
53    /// Sets `relative-bottom-of`.
54    /// <https://lynxjs.org/api/css/properties/relative-bottom-of>
55    pub fn relative_bottom_of(self, v: i32) -> Self {
56        self.push_raw("relative-bottom-of", v.to_string())
57    }
58
59    /// Sets `relative-left-of`.
60    /// <https://lynxjs.org/api/css/properties/relative-left-of>
61    pub fn relative_left_of(self, v: i32) -> Self {
62        self.push_raw("relative-left-of", v.to_string())
63    }
64
65    /// Sets `relative-center` — centers the element relative to a sibling.
66    /// <https://lynxjs.org/api/css/properties/relative-center>
67    pub fn relative_center(self, v: i32) -> Self {
68        self.push_raw("relative-center", v.to_string())
69    }
70
71    /// Sets `relative-center-horizontal` — centers horizontally only.
72    /// <https://lynxjs.org/api/css/properties/relative-center-horizontal>
73    pub fn relative_center_horizontal(self, v: i32) -> Self {
74        self.push_raw("relative-center-horizontal", v.to_string())
75    }
76
77    /// Sets `relative-center-vertical` — centers vertically only.
78    /// <https://lynxjs.org/api/css/properties/relative-center-vertical>
79    pub fn relative_center_vertical(self, v: i32) -> Self {
80        self.push_raw("relative-center-vertical", v.to_string())
81    }
82
83    /// Sets `relative-layout-once` — performs the relative-layout
84    /// pass only on the first render.
85    /// <https://lynxjs.org/api/css/properties/relative-layout-once>
86    pub fn relative_layout_once(self, v: bool) -> Self {
87        self.push_raw("relative-layout-once", if v { "true" } else { "false" })
88    }
89
90    /// Sets `relative-align-inline-start` (logical-direction alias).
91    pub fn relative_align_inline_start(self, v: i32) -> Self {
92        self.push_raw("relative-align-inline-start", v.to_string())
93    }
94
95    /// Sets `relative-align-inline-end` (logical-direction alias).
96    pub fn relative_align_inline_end(self, v: i32) -> Self {
97        self.push_raw("relative-align-inline-end", v.to_string())
98    }
99
100    /// Sets `relative-inline-start-of`.
101    pub fn relative_inline_start_of(self, v: i32) -> Self {
102        self.push_raw("relative-inline-start-of", v.to_string())
103    }
104
105    /// Sets `relative-inline-end-of`.
106    pub fn relative_inline_end_of(self, v: i32) -> Self {
107        self.push_raw("relative-inline-end-of", v.to_string())
108    }
109}
110
111#[cfg(test)]
112mod tests {
113    use crate::Css;
114
115    #[test]
116    fn relative_id_and_anchors() {
117        let s = Css::new()
118            .relative_id(1)
119            .relative_align_top(2)
120            .relative_left_of(3)
121            .relative_center(4);
122        assert_eq!(
123            s.to_string(),
124            "relative-id: 1; relative-align-top: 2; relative-left-of: 3; relative-center: 4;"
125        );
126    }
127
128    #[test]
129    fn relative_all_align_edges() {
130        let s = Css::new()
131            .relative_align_top(1)
132            .relative_align_right(2)
133            .relative_align_bottom(3)
134            .relative_align_left(4);
135        assert_eq!(
136            s.to_string(),
137            "relative-align-top: 1; relative-align-right: 2; relative-align-bottom: 3; relative-align-left: 4;"
138        );
139    }
140
141    #[test]
142    fn relative_all_of_edges() {
143        let s = Css::new()
144            .relative_top_of(1)
145            .relative_right_of(2)
146            .relative_bottom_of(3)
147            .relative_left_of(4);
148        assert_eq!(
149            s.to_string(),
150            "relative-top-of: 1; relative-right-of: 2; relative-bottom-of: 3; relative-left-of: 4;"
151        );
152    }
153
154    #[test]
155    fn relative_center_variants() {
156        let s = Css::new()
157            .relative_center(1)
158            .relative_center_horizontal(2)
159            .relative_center_vertical(3);
160        assert_eq!(
161            s.to_string(),
162            "relative-center: 1; relative-center-horizontal: 2; relative-center-vertical: 3;"
163        );
164    }
165
166    #[test]
167    fn relative_layout_once_bool() {
168        assert_eq!(
169            Css::new().relative_layout_once(true).to_string(),
170            "relative-layout-once: true;"
171        );
172        assert_eq!(
173            Css::new().relative_layout_once(false).to_string(),
174            "relative-layout-once: false;"
175        );
176    }
177
178    #[test]
179    fn relative_inline_aliases() {
180        let s = Css::new()
181            .relative_align_inline_start(1)
182            .relative_align_inline_end(2)
183            .relative_inline_start_of(3)
184            .relative_inline_end_of(4);
185        assert_eq!(
186            s.to_string(),
187            "relative-align-inline-start: 1; relative-align-inline-end: 2; relative-inline-start-of: 3; relative-inline-end-of: 4;"
188        );
189    }
190}
whisker_css/prop/relative.rs

whisker_css/prop/
relative.rs
