diff --git a/.changeset/fix-rpx-unit-inline.md b/.changeset/fix-rpx-unit-inline.md new file mode 100644 index 0000000000..bfdf07de13 --- /dev/null +++ b/.changeset/fix-rpx-unit-inline.md @@ -0,0 +1,7 @@ +--- +"@lynx-js/web-core": patch +--- + +fix: tokenizing inline style values correctly to support rpx and ppx unit conversion + +This fixes an issue where the `transform_inline_style_key_value_vec` API bypassed the CSS tokenizer, preventing dimension units like `rpx` or `ppx` from being successfully transformed into `calc` strings when specified via inline styles. diff --git a/.changeset/transform-ppx.md b/.changeset/transform-ppx.md new file mode 100644 index 0000000000..c99e999f37 --- /dev/null +++ b/.changeset/transform-ppx.md @@ -0,0 +1,5 @@ +--- +"@lynx-js/web-core": patch +--- + +feat: add `ppx` unit support for CSS, transforming to `calc(... * var(--ppx-unit))` directly. diff --git a/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts b/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts index 47582d386e..f950026698 100644 --- a/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts +++ b/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts @@ -387,6 +387,30 @@ test.describe('reactlynx3 tests', () => { await expect(target).toHaveCSS('width', '10px'); }); + test('basic-rpx-unit-js-value', async ({ page }, { title }) => { + await goto(page, title); + await wait(100); + const lynxView = await page.locator('lynx-view'); + await lynxView.evaluate((node) => { + node.style.width = '50px'; + }); + const target = await page.locator('#target'); + await expect(target).toHaveCSS('height', '10px'); // 20cqw, 50 / 100 * 20 = 10px + await expect(target).toHaveCSS('width', '10px'); + }); + + test('basic-ppx-unit', async ({ page }, { title }) => { + await goto(page, title); + await wait(100); + const lynxView = await page.locator('lynx-view'); + await lynxView.evaluate((node) => { + node.style.width = '50px'; + }); + const target = await page.locator('#target'); + await expect(target).toHaveCSS('height', '10px'); // 20cqw, 50 / 100 * 20 = 10px + await expect(target).toHaveCSS('width', '10px'); + }); + test('basic-vw-vh-unit', async ({ page }, { title }) => { await goto(page, title); await wait(100); diff --git a/packages/web-platform/web-core-e2e/tests/reactlynx/basic-ppx-unit/index.jsx b/packages/web-platform/web-core-e2e/tests/reactlynx/basic-ppx-unit/index.jsx new file mode 100644 index 0000000000..b03d0aca82 --- /dev/null +++ b/packages/web-platform/web-core-e2e/tests/reactlynx/basic-ppx-unit/index.jsx @@ -0,0 +1,16 @@ +import { root } from '@lynx-js/react'; + +function App() { + return ( + + ); +} + +root.render(); diff --git a/packages/web-platform/web-core-e2e/tests/reactlynx/basic-rpx-unit-js-value/index.jsx b/packages/web-platform/web-core-e2e/tests/reactlynx/basic-rpx-unit-js-value/index.jsx new file mode 100644 index 0000000000..d77a935d02 --- /dev/null +++ b/packages/web-platform/web-core-e2e/tests/reactlynx/basic-rpx-unit-js-value/index.jsx @@ -0,0 +1,19 @@ +// Copyright 2023 The Lynx Authors. All rights reserved. +// Licensed under the Apache License Version 2.0 that can be found in the +// LICENSE file in the root directory of this source tree. +import { root } from '@lynx-js/react'; + +function App() { + return ( + + ); +} + +root.render(); diff --git a/packages/web-platform/web-core/binary/client/client.d.ts b/packages/web-platform/web-core/binary/client/client.d.ts index 3100d4c78b..45ff3e8e57 100644 --- a/packages/web-platform/web-core/binary/client/client.d.ts +++ b/packages/web-platform/web-core/binary/client/client.d.ts @@ -166,10 +166,10 @@ export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawS export function get_font_face_content(buffer: Uint8Array): string; -export function get_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void; - export function get_style_content(buffer: Uint8Array): string; +export function set_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void; + export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean): boolean; export function set_inline_styles_number_key(dom: HTMLElement, key: number, value?: string | null): void; @@ -195,7 +195,6 @@ export interface InitOutput { readonly decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number) => [number, number, number]; readonly encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number]; readonly get_font_face_content: (a: any) => [number, number, number, number]; - readonly get_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void; readonly get_style_content: (a: any) => [number, number, number, number]; readonly mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void; readonly mainthreadwasmcontext_add_dataset: (a: number, b: number, c: any, d: any) => [number, number]; @@ -232,6 +231,7 @@ export interface InitOutput { readonly ruleprelude_new: () => number; readonly ruleprelude_push_selector: (a: number, b: number) => void; readonly selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number) => [number, number]; + readonly set_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void; readonly set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: number) => number; readonly set_inline_styles_number_key: (a: any, b: number, c: number, d: number) => void; readonly stylesheetresource_new: (a: any, b: any) => [number, number, number]; diff --git a/packages/web-platform/web-core/binary/client/client_bg.wasm.d.ts b/packages/web-platform/web-core/binary/client/client_bg.wasm.d.ts index 74ec77f513..b4a232f8d5 100644 --- a/packages/web-platform/web-core/binary/client/client_bg.wasm.d.ts +++ b/packages/web-platform/web-core/binary/client/client_bg.wasm.d.ts @@ -18,7 +18,6 @@ export const add_inline_style_raw_string_key: (a: any, b: number, c: number, d: export const decode_style_info: (a: any, b: number, c: number, d: number, e: number, f: number) => [number, number, number]; export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number]; export const get_font_face_content: (a: any) => [number, number, number, number]; -export const get_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void; export const get_style_content: (a: any) => [number, number, number, number]; export const mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void; export const mainthreadwasmcontext_add_dataset: (a: number, b: number, c: any, d: any) => [number, number]; @@ -55,6 +54,7 @@ export const rule_set_prelude: (a: number, b: number) => void; export const ruleprelude_new: () => number; export const ruleprelude_push_selector: (a: number, b: number) => void; export const selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number) => [number, number]; +export const set_inline_styles_in_key_value_vec: (a: any, b: number, c: number, d: number, e: number) => void; export const set_inline_styles_in_str: (a: any, b: number, c: number, d: number, e: number) => number; export const set_inline_styles_number_key: (a: any, b: number, c: number, d: number) => void; export const stylesheetresource_new: (a: any, b: any) => [number, number, number]; diff --git a/packages/web-platform/web-core/binary/client_legacy/client.d.ts b/packages/web-platform/web-core/binary/client_legacy/client.d.ts index bd1e5937ee..74b4e3e92a 100644 --- a/packages/web-platform/web-core/binary/client_legacy/client.d.ts +++ b/packages/web-platform/web-core/binary/client_legacy/client.d.ts @@ -166,10 +166,10 @@ export function encode_legacy_json_generated_raw_style_info(raw_style_info: RawS export function get_font_face_content(buffer: Uint8Array): string; -export function get_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void; - export function get_style_content(buffer: Uint8Array): string; +export function set_inline_styles_in_key_value_vec(dom: HTMLElement, k_v_vec: string[], transform_vw: boolean, transform_vh: boolean): void; + export function set_inline_styles_in_str(dom: HTMLElement, styles: string, transform_vw: boolean, transform_vh: boolean): boolean; export function set_inline_styles_number_key(dom: HTMLElement, key: number, value?: string | null): void; @@ -195,7 +195,6 @@ export interface InitOutput { readonly decode_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void; readonly encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void; readonly get_font_face_content: (a: number, b: number) => void; - readonly get_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number) => void; readonly get_style_content: (a: number, b: number) => void; readonly mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void; readonly mainthreadwasmcontext_add_dataset: (a: number, b: number, c: number, d: number, e: number) => void; @@ -232,6 +231,7 @@ export interface InitOutput { readonly ruleprelude_new: () => number; readonly ruleprelude_push_selector: (a: number, b: number) => void; readonly selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number, f: number) => void; + readonly set_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number) => void; readonly set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: number) => number; readonly set_inline_styles_number_key: (a: number, b: number, c: number, d: number) => void; readonly stylesheetresource_new: (a: number, b: number, c: number) => void; diff --git a/packages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.ts b/packages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.ts index 796a125ae4..acca35352c 100644 --- a/packages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.ts +++ b/packages/web-platform/web-core/binary/client_legacy/client_bg.wasm.d.ts @@ -18,7 +18,6 @@ export const add_inline_style_raw_string_key: (a: number, b: number, c: number, export const decode_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void; export const encode_legacy_json_generated_raw_style_info: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void; export const get_font_face_content: (a: number, b: number) => void; -export const get_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number) => void; export const get_style_content: (a: number, b: number) => void; export const mainthreadwasmcontext_add_cross_thread_event: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number) => void; export const mainthreadwasmcontext_add_dataset: (a: number, b: number, c: number, d: number, e: number) => void; @@ -55,6 +54,7 @@ export const rule_set_prelude: (a: number, b: number) => void; export const ruleprelude_new: () => number; export const ruleprelude_push_selector: (a: number, b: number) => void; export const selector_push_one_selector_section: (a: number, b: number, c: number, d: number, e: number, f: number) => void; +export const set_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number, e: number) => void; export const set_inline_styles_in_str: (a: number, b: number, c: number, d: number, e: number) => number; export const set_inline_styles_number_key: (a: number, b: number, c: number, d: number) => void; export const stylesheetresource_new: (a: number, b: number, c: number) => void; diff --git a/packages/web-platform/web-core/binary/server/server.d.ts b/packages/web-platform/web-core/binary/server/server.d.ts index 14a1668d1d..7c45e78d63 100644 --- a/packages/web-platform/web-core/binary/server/server.d.ts +++ b/packages/web-platform/web-core/binary/server/server.d.ts @@ -11,7 +11,6 @@ export class MainThreadServerContext { generate_html(element_id: number): string; get_attribute(element_id: number, key: string): string | undefined; get_attributes(element_id: number): object; - get_inline_styles_in_key_value_vec(element_id: number, k_v_vec: string[]): void; get_page_css(): string; get_parent(child_id: number): number | undefined; get_tag(element_id: number): string | undefined; @@ -24,6 +23,7 @@ export class MainThreadServerContext { replace_elements(parent_id: number, new_children_ids: Uint32Array, old_children_ids: Uint32Array): void; set_attribute(element_id: number, key: string, value: string): void; set_css_id(elements_unique_id: Uint32Array, css_id: number, entry_name?: string | null): void; + set_inline_styles_in_key_value_vec(element_id: number, k_v_vec: string[]): void; set_inline_styles_in_str(element_id: number, styles: string): boolean; set_inline_styles_number_key(element_id: number, key: number, value?: string | null): void; update_css_og_style(unique_id: number, entry_name?: string | null): void; diff --git a/packages/web-platform/web-core/binary/server/server_bg.wasm.d.ts b/packages/web-platform/web-core/binary/server/server_bg.wasm.d.ts index da92a2cb97..e0f2ca4a39 100644 --- a/packages/web-platform/web-core/binary/server/server_bg.wasm.d.ts +++ b/packages/web-platform/web-core/binary/server/server_bg.wasm.d.ts @@ -19,7 +19,6 @@ export const mainthreadservercontext_create_element: (a: number, b: number, c: n export const mainthreadservercontext_generate_html: (a: number, b: number) => [number, number]; export const mainthreadservercontext_get_attribute: (a: number, b: number, c: number, d: number) => [number, number]; export const mainthreadservercontext_get_attributes: (a: number, b: number) => [number, number, number]; -export const mainthreadservercontext_get_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number) => void; export const mainthreadservercontext_get_page_css: (a: number) => [number, number]; export const mainthreadservercontext_get_parent: (a: number, b: number) => number; export const mainthreadservercontext_get_tag: (a: number, b: number) => [number, number]; @@ -32,6 +31,7 @@ export const mainthreadservercontext_replace_element: (a: number, b: number, c: export const mainthreadservercontext_replace_elements: (a: number, b: number, c: number, d: number, e: number, f: number) => void; export const mainthreadservercontext_set_attribute: (a: number, b: number, c: number, d: number, e: number, f: number) => void; export const mainthreadservercontext_set_css_id: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number]; +export const mainthreadservercontext_set_inline_styles_in_key_value_vec: (a: number, b: number, c: number, d: number) => void; export const mainthreadservercontext_set_inline_styles_in_str: (a: number, b: number, c: number, d: number) => number; export const mainthreadservercontext_set_inline_styles_number_key: (a: number, b: number, c: number, d: number, e: number) => void; export const mainthreadservercontext_update_css_og_style: (a: number, b: number, c: number, d: number) => [number, number]; diff --git a/packages/web-platform/web-core/css/index.css b/packages/web-platform/web-core/css/index.css index b5df3b8109..ff9985279c 100644 --- a/packages/web-platform/web-core/css/index.css +++ b/packages/web-platform/web-core/css/index.css @@ -11,6 +11,7 @@ lynx-view { container-name: lynx-view; container-type: inline-size; --rpx-unit: 1cqw; + --ppx-unit: 1cqw; --vw-unit: 1vw; --vh-unit: 1vh; } @@ -34,6 +35,7 @@ lynx-view::part(page) { height: 100%; width: 100%; --rpx-unit: inherit; + --ppx-unit: inherit; --vw-unit: inherit; --vh-unit: inherit; } @@ -43,6 +45,11 @@ lynx-view::part(page) { inherits: true; } +@property --ppx-unit { + syntax: ""; + inherits: true; +} + @property --vw-unit { syntax: ""; inherits: true; diff --git a/packages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rs b/packages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rs index b9dbed2bb4..d97e846b51 100644 --- a/packages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rs +++ b/packages/web-platform/web-core/src/main_thread/client/element_apis/style_apis.rs @@ -128,7 +128,7 @@ pub fn set_inline_styles_in_str( } #[wasm_bindgen] -pub fn get_inline_styles_in_key_value_vec( +pub fn set_inline_styles_in_key_value_vec( dom: &web_sys::HtmlElement, k_v_vec: Vec, transform_vw: bool, diff --git a/packages/web-platform/web-core/src/main_thread/server/main_thread_server_context.rs b/packages/web-platform/web-core/src/main_thread/server/main_thread_server_context.rs index 1ffa43088c..d7bd8734e8 100644 --- a/packages/web-platform/web-core/src/main_thread/server/main_thread_server_context.rs +++ b/packages/web-platform/web-core/src/main_thread/server/main_thread_server_context.rs @@ -340,7 +340,7 @@ impl MainThreadServerContext { true } - pub fn get_inline_styles_in_key_value_vec(&mut self, element_id: usize, k_v_vec: Vec) { + pub fn set_inline_styles_in_key_value_vec(&mut self, element_id: usize, k_v_vec: Vec) { let transformed_style_str = transform_inline_style_key_value_vec( k_v_vec, &crate::style_transformer::token_transformer::TransformerConfig { diff --git a/packages/web-platform/web-core/src/style_transformer/inline_style.rs b/packages/web-platform/web-core/src/style_transformer/inline_style.rs index d88257d594..2c4496ea88 100644 --- a/packages/web-platform/web-core/src/style_transformer/inline_style.rs +++ b/packages/web-platform/web-core/src/style_transformer/inline_style.rs @@ -60,7 +60,11 @@ pub(crate) fn transform_inline_style_key_value_vec( key = value; } else { let name = hyphenate_style_name(&key); - transformer.on_declaration_parsed(name.into(), value, false); + use crate::css_tokenizer::tokenize::Parser; + transformer.on_token(crate::css_tokenizer::token_types::IDENT_TOKEN, &name); + transformer.on_token(crate::css_tokenizer::token_types::COLON_TOKEN, ":"); + crate::css_tokenizer::tokenize::tokenize(&value, transformer); + transformer.on_token(crate::css_tokenizer::token_types::SEMICOLON_TOKEN, ";"); } } @@ -273,4 +277,13 @@ mod tests { let result = transform_inline_style_string(source, &TransformerConfig::default()); assert_eq!(result, "--align-self-row:start;--align-self-column:start;"); } + + #[test] + fn rpx_unit_in_key_value_vec() { + let result = transform_inline_style_key_value_vec( + vec!["height".to_string(), "100rpx".to_string()], + &TransformerConfig::default(), + ); + assert_eq!(result, "height:calc(100 * var(--rpx-unit));"); + } } diff --git a/packages/web-platform/web-core/src/style_transformer/token_transformer.rs b/packages/web-platform/web-core/src/style_transformer/token_transformer.rs index 9d77743cb8..b23ab5f1e9 100644 --- a/packages/web-platform/web-core/src/style_transformer/token_transformer.rs +++ b/packages/web-platform/web-core/src/style_transformer/token_transformer.rs @@ -25,32 +25,38 @@ pub(crate) fn transform_one_token<'a>( ) -> (u8, Cow<'a, str>) { match token_type { DIMENSION_TOKEN => { - if token_value.len() > 3 && token_value.to_ascii_lowercase().ends_with("rpx") { - let value = &token_value[..token_value.len() - 3]; - return ( - token_type, - Cow::Owned(format!("calc({value} * var(--rpx-unit))")), - ); + let len = token_value.len(); + if len > 3 { + let suffix = &token_value[len - 3..]; + if suffix.eq_ignore_ascii_case("rpx") { + let value = &token_value[..len - 3]; + return ( + token_type, + Cow::Owned(format!("calc({value} * var(--rpx-unit))")), + ); + } else if suffix.eq_ignore_ascii_case("ppx") { + let value = &token_value[..len - 3]; + return ( + token_type, + Cow::Owned(format!("calc({value} * var(--ppx-unit))")), + ); + } } - if config.transform_vw - && token_value.len() > 2 - && token_value.to_ascii_lowercase().ends_with("vw") - { - let value = &token_value[..token_value.len() - 2]; - return ( - token_type, - Cow::Owned(format!("calc({value} * var(--vw-unit))")), - ); - } - if config.transform_vh - && token_value.len() > 2 - && token_value.to_ascii_lowercase().ends_with("vh") - { - let value = &token_value[..token_value.len() - 2]; - return ( - token_type, - Cow::Owned(format!("calc({value} * var(--vh-unit))")), - ); + if len > 2 { + let suffix = &token_value[len - 2..]; + if config.transform_vw && suffix.eq_ignore_ascii_case("vw") { + let value = &token_value[..len - 2]; + return ( + token_type, + Cow::Owned(format!("calc({value} * var(--vw-unit))")), + ); + } else if config.transform_vh && suffix.eq_ignore_ascii_case("vh") { + let value = &token_value[..len - 2]; + return ( + token_type, + Cow::Owned(format!("calc({value} * var(--vh-unit))")), + ); + } } (token_type, Cow::Borrowed(token_value)) } @@ -86,6 +92,18 @@ mod tests { assert_eq!(tv, "calc(100 * var(--rpx-unit))"); } + #[test] + fn test_transform_ppx() { + let (_, tv) = transform_one_token(DIMENSION_TOKEN, "100ppx", &TransformerConfig::default()); + assert_eq!(tv, "calc(100 * var(--ppx-unit))"); + } + + #[test] + fn test_transform_ppx_case_insensitive() { + let (_, tv) = transform_one_token(DIMENSION_TOKEN, "100PPX", &TransformerConfig::default()); + assert_eq!(tv, "calc(100 * var(--ppx-unit))"); + } + #[test] fn test_transform_vw() { let (_, tv) = transform_one_token( diff --git a/packages/web-platform/web-core/test_transformer.rs b/packages/web-platform/web-core/test_transformer.rs new file mode 100644 index 0000000000..70b34b440a --- /dev/null +++ b/packages/web-platform/web-core/test_transformer.rs @@ -0,0 +1 @@ +use std::borrow::Cow; diff --git a/packages/web-platform/web-core/tests/element-apis.spec.ts b/packages/web-platform/web-core/tests/element-apis.spec.ts index 0b68cecbfd..c9c2cfb4f1 100644 --- a/packages/web-platform/web-core/tests/element-apis.spec.ts +++ b/packages/web-platform/web-core/tests/element-apis.spec.ts @@ -414,6 +414,19 @@ describe('Element APIs', () => { expect(targetStyle).toContain('calc(50.5 * var(--rpx-unit))'); }); + test('__SetInlineStyles with ppx', () => { + const root = mtsGlobalThis.__CreatePage('page', 0); + let target = mtsGlobalThis.__CreateView(0); + mtsGlobalThis.__SetID(target, 'target'); + mtsGlobalThis.__SetInlineStyles(target, 'margin: 10ppx; width: 50.5ppx;'); + mtsGlobalThis.__AppendElement(root, target); + mtsGlobalThis.__FlushElementTree(); + const targetDom = rootDom.querySelector('#target') as HTMLElement; + const targetStyle = targetDom.getAttribute('style'); + expect(targetStyle).toContain('calc(10 * var(--ppx-unit))'); + expect(targetStyle).toContain('calc(50.5 * var(--ppx-unit))'); + }); + test('__SetInlineStyles with vw and vh when enabled', () => { const mtsGlobalThisUnits = createElementAPI( rootDom, @@ -457,10 +470,12 @@ describe('Element APIs', () => { mtsGlobalThisUnits.__FlushElementTree(); const targetDom = rootDom.querySelector('#target') as HTMLElement; const targetStyle = targetDom.getAttribute('style'); - expect(targetStyle).toBe('width:50vw;height:100vh;'); + expect(targetStyle).toBe( + 'width:calc(50 * var(--vw-unit));height:calc(100 * var(--vh-unit));', + ); }); - test('__SetAttribute style with rpx, vw, vh', () => { + test('__SetAttribute style with rpx, ppx, vw, vh', () => { const mtsGlobalThisUnits = createElementAPI( rootDom, mtsBinding, @@ -476,13 +491,15 @@ describe('Element APIs', () => { mtsGlobalThisUnits.__SetAttribute( target, 'style', - 'width: 50vw; height: 100vh; margin: 10rpx;', + 'width: 50vw; height: 100vh; margin: 10rpx; padding: 5ppx;', ); mtsGlobalThisUnits.__AppendElement(root, target); mtsGlobalThisUnits.__FlushElementTree(); const targetDom = rootDom.querySelector('#target') as HTMLElement; const targetStyle = targetDom.getAttribute('style'); - expect(targetStyle).toBe('width: 50vw; height: 100vh; margin: 10rpx;'); + expect(targetStyle).toBe( + 'width: 50vw; height: 100vh; margin: 10rpx; padding: 5ppx;', + ); }); test('__GetConfig__AddConfig', () => { @@ -1471,8 +1488,10 @@ describe('Element APIs', () => { expect(html2).toContain('calc(100 * var(--vh-unit))'); expect(html2).toContain('calc(10 * var(--rpx-unit))'); - const html3 = wasmCtx.generate_html(api.__GetElementUniqueID(view3)); - expect(html3).toContain('style="width:50vw;height:100vh;margin:10rpx;"'); + const html3 = wasmCtx.generate_html(true); + expect(html3).toContain( + 'style="width:calc(50 * var(--vw-unit));height:calc(100 * var(--vh-unit));margin:calc(10 * var(--rpx-unit));"', + ); const view4 = api.__CreateElement('view', api.__GetElementUniqueID(root)); api.__SetAttribute( diff --git a/packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts b/packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts index f1190e9130..2f3a1efd2a 100644 --- a/packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts +++ b/packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts @@ -54,7 +54,7 @@ const { add_inline_style_raw_string_key, set_inline_styles_number_key, set_inline_styles_in_str, - get_inline_styles_in_key_value_vec, + set_inline_styles_in_key_value_vec, } = wasmInstance; export function createElementAPI( @@ -306,7 +306,7 @@ export function createElementAPI( vec.push(k, v.toString()); } } - get_inline_styles_in_key_value_vec( + set_inline_styles_in_key_value_vec( element, vec, transform_vw, diff --git a/packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts b/packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts index b0e5a7c53a..c6fd0b06f1 100644 --- a/packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts +++ b/packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts @@ -434,7 +434,7 @@ export function createElementAPI( vec.push(k, v.toString()); } } - wasmContext.get_inline_styles_in_key_value_vec( + wasmContext.set_inline_styles_in_key_value_vec( uniqueId, vec, );