diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index d35ddce5..b885a6b1 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -635,6 +635,9 @@ "optionsThemeCustomText": { "message": "Text" }, + "optionsThemeCustomZoom": { + "message": "Zoom" + }, "optionsThemeDetail": { "message": "Choose theme." }, diff --git a/src/_locales/fa/messages.json b/src/_locales/fa/messages.json index e6ca32cb..e2220d19 100644 --- a/src/_locales/fa/messages.json +++ b/src/_locales/fa/messages.json @@ -635,6 +635,9 @@ "optionsThemeCustomText": { "message": "متن" }, + "optionsThemeCustomZoom": { + "message": "بزرگ‌نمایی" + }, "optionsThemeDetail": { "message": "پوسته ای را انتخاب کنید." }, diff --git a/src/_locales/ja/messages.json b/src/_locales/ja/messages.json index c48c9301..1ebbccd5 100644 --- a/src/_locales/ja/messages.json +++ b/src/_locales/ja/messages.json @@ -635,6 +635,9 @@ "optionsThemeCustomText": { "message": "テキスト色" }, + "optionsThemeCustomZoom": { + "message": "ズーム" + }, "optionsThemeDetail": { "message": "テーマを選択してください。" }, diff --git a/src/css/options.css b/src/css/options.css index 7c6a908c..dd155f2f 100644 --- a/src/css/options.css +++ b/src/css/options.css @@ -235,6 +235,35 @@ pre > code { vertical-align: middle; } +/* zoom slider */ +#customThemeSettings tr:has(#customZoom) { + display: none; +} + +@supports (zoom: 1) { + #customThemeSettings tr:has(#customZoom) { + border-top: double; + display: table-row; + } + + span:has(> #customZoom) { + display: inline-block; + } + + #customZoom + datalist { + display: flex; + flex-direction: row; + justify-content: space-between; + line-height: 0.5; + } + + #customZoom + datalist > option { + margin: 0 0.25em; + padding: 0; + font-family: monospace; + } +} + #userCSS { display: block; } diff --git a/src/css/sidebar.css b/src/css/sidebar.css index 7cf67456..03f527e9 100644 --- a/src/css/sidebar.css +++ b/src/css/sidebar.css @@ -44,6 +44,7 @@ --tab-group-4-heading-text: #395672; --throbber-connecting-color: #0061e0; --font-weight-active: normal; + --zoom-level: 1; color-scheme: light dark; font: menu; @@ -70,6 +71,7 @@ main { height: 100vh; overflow-y: auto; scrollbar-width: auto; + zoom: var(--zoom-level); } .narrow main { diff --git a/src/html/options.html b/src/html/options.html index e22d7fd8..f2970417 100644 --- a/src/html/options.html +++ b/src/html/options.html @@ -156,6 +156,24 @@

Sidebar Tabs - Options

+ + + Zoom + + + + + + + + + + + + + diff --git a/src/mjs/constant.js b/src/mjs/constant.js index 0cd4a7b8..d07eac04 100644 --- a/src/mjs/constant.js +++ b/src/mjs/constant.js @@ -71,6 +71,7 @@ export const CSS_VAR_HEADING_TEXT_GROUP_4 = '--tab-group-4-heading-text'; export const CSS_VAR_HEADING_TEXT_PINNED = '--tab-group-pinned-heading-text'; export const CSS_VAR_OUTLINE_FOCUS = '--focus-outline-color'; export const CSS_VAR_THROBBER_CONNECT = '--throbber-connecting-color'; +export const CSS_VAR_ZOOM = '--zoom-level'; export const CUSTOM_BG = 'customBackgroundColor'; export const CUSTOM_BG_ACTIVE = 'customActiveBackgroundColor'; export const CUSTOM_BG_DISCARDED = 'customDiscardedBackgroundColor'; @@ -100,6 +101,7 @@ export const CUSTOM_HEADING_TEXT_GROUP_4 = 'customTabGroup4HeadingText'; export const CUSTOM_HEADING_TEXT_PINNED = 'customPinnedTabGroupHeadingText'; export const CUSTOM_OUTLINE_FOCUS = 'customFocusOutlineColor'; export const CUSTOM_THROBBER_CONNECT = 'customThrobberConnectingColor'; +export const CUSTOM_ZOOM = 'customZoom'; export const DATA_I18N = 'data-i18n'; export const DISCARDED = 'discarded'; export const DROP_TARGET = 'drop-target'; diff --git a/src/mjs/main.js b/src/mjs/main.js index 1482b38d..99bddaaf 100644 --- a/src/mjs/main.js +++ b/src/mjs/main.js @@ -45,7 +45,8 @@ import { import { applyCustomTheme, applyTheme, initCustomTheme, sendCurrentTheme, setActiveTabFontWeight, setNewTabSeparator, setScrollbarWidth, - setSidebarTheme, setTabGroupColorBarWidth, setTabHeight, setUserCss + setSidebarTheme, setTabGroupColorBarWidth, setTabHeight, setUserCss, + setZoomLevel } from './theme.js'; import { activateTab, createSidebarTab, getSidebarTab, getSidebarTabContainer, @@ -59,11 +60,11 @@ import { CLASS_TAB_CONTAINER, CLASS_TAB_CONTAINER_TMPL, CLASS_TAB_CONTENT, CLASS_TAB_CONTEXT, CLASS_TAB_GROUP, CLASS_TAB_ICON, CLASS_TAB_IDENT_ICON, CLASS_TAB_ITEMS, CLASS_TAB_TITLE, CLASS_TAB_TMPL, CLASS_TAB_TOGGLE_ICON, - COLOR_SCHEME_DARK, COOKIE_STORE_DEFAULT, DISCARDED, EXT_INIT, FONT_ACTIVE, - FONT_ACTIVE_BOLD, FONT_ACTIVE_NORMAL, FRAME_COLOR_USE, HIGHLIGHTED, NEW_TAB, - NEW_TAB_BUTTON, NEW_TAB_OPEN_CONTAINER, NEW_TAB_OPEN_NO_CONTAINER, - NEW_TAB_SEPARATOR_SHOW, OPTIONS_OPEN, PINNED, PINNED_HEIGHT, - SCROLL_DIR_INVERT, SIDEBAR, SIDEBAR_MAIN, SIDEBAR_STATE_UPDATE, + COLOR_SCHEME_DARK, COOKIE_STORE_DEFAULT, CUSTOM_ZOOM, DISCARDED, EXT_INIT, + FONT_ACTIVE, FONT_ACTIVE_BOLD, FONT_ACTIVE_NORMAL, FRAME_COLOR_USE, + HIGHLIGHTED, NEW_TAB, NEW_TAB_BUTTON, NEW_TAB_OPEN_CONTAINER, + NEW_TAB_OPEN_NO_CONTAINER, NEW_TAB_SEPARATOR_SHOW, OPTIONS_OPEN, PINNED, + PINNED_HEIGHT, SCROLL_DIR_INVERT, SIDEBAR, SIDEBAR_MAIN, SIDEBAR_STATE_UPDATE, TAB_ALL_BOOKMARK, TAB_ALL_RELOAD, TAB_ALL_SELECT, TAB_BOOKMARK, TAB_CLOSE, TAB_CLOSE_DUPE, TAB_CLOSE_UNDO, TAB_DUPE, TAB_GROUP, TAB_GROUP_BOOKMARK, TAB_GROUP_CLOSE, TAB_GROUP_COLLAPSE, @@ -101,6 +102,7 @@ export const userOpts = new Map(); /* user options keys */ export const userOptsKeys = new Set([ BROWSER_SETTINGS_READ, + CUSTOM_ZOOM, FONT_ACTIVE_BOLD, FONT_ACTIVE_NORMAL, FRAME_COLOR_USE, @@ -155,7 +157,7 @@ export const setUserOpts = async (opt = {}) => { } default: { const { checked, value: itemValue } = value; - if (key === PINNED_HEIGHT) { + if (key === CUSTOM_ZOOM || key === PINNED_HEIGHT) { userOpts.set(key, itemValue); } else if (key === TABS_CLOSE_MDLCLICK_PREVENT) { userOpts.set(TABS_CLOSE_MDLCLICK, !checked); @@ -2392,6 +2394,16 @@ export const setStorageValue = async (item, obj, changed = false) => { func.push(storeCloseTabsByDoubleClickValue(!!checked)); } break; + case CUSTOM_ZOOM: + func.push(setUserOpts({ + [item]: { + value + } + })); + if (changed) { + func.push(setZoomLevel(value)); + } + break; case FONT_ACTIVE_BOLD: case FONT_ACTIVE_NORMAL: func.push(setUserOpts({ @@ -2741,7 +2753,12 @@ export const startup = async () => { useFrame: userOpts.get(FRAME_COLOR_USE) ?? false, startup: true }).then(applyUserCustomTheme); - await setActiveTabFontWeight(userOpts.get(FONT_ACTIVE) ?? ''); + if (userOpts.has(FONT_ACTIVE)) { + await setActiveTabFontWeight(userOpts.get(FONT_ACTIVE)); + } + if (userOpts.has(CUSTOM_ZOOM)) { + await setZoomLevel(userOpts.get(CUSTOM_ZOOM)); + } return emulateTabs().then(restoreTabGroups).then(restoreTabContainers) .then(toggleTabGrouping).then(setPinnedObserver) .then(restoreHighlightedTabs).then(requestSaveSession) diff --git a/src/mjs/options-main.js b/src/mjs/options-main.js index ef398146..aaa02367 100644 --- a/src/mjs/options-main.js +++ b/src/mjs/options-main.js @@ -10,7 +10,7 @@ import { } from './browser.js'; import { isObjectNotEmpty, isString, throwErr } from './common.js'; import { - BOOKMARK_LOCATION, BROWSER_SETTINGS_READ, COLOR_SCHEME, EXT_INIT, + BOOKMARK_LOCATION, BROWSER_SETTINGS_READ, COLOR_SCHEME, CUSTOM_ZOOM, EXT_INIT, MENU_SHOW_MOUSEUP, THEME_CUSTOM, THEME_CUSTOM_DARK, THEME_CUSTOM_INIT, THEME_CUSTOM_LIGHT, THEME_CUSTOM_REQ, THEME_CUSTOM_SETTING, THEME_ID, THEME_RADIO, USER_CSS, USER_CSS_SAVE, USER_CSS_USE, USER_CSS_WARN @@ -50,6 +50,10 @@ export const initExt = async (init = false) => { export const initCustomTheme = async (init = false) => { let func; if (init) { + const elm = document.getElementById(CUSTOM_ZOOM); + if (elm) { + elm.value = '1'; + } func = sendMsg({ [THEME_CUSTOM_INIT]: !!init }); @@ -403,6 +407,24 @@ export const setHtmlInputValue = async (data = {}) => { elm.value = isString(value) ? value.trim() : ''; break; } + case 'range': { + if (id === CUSTOM_ZOOM) { + const val = parseFloat(value); + if (Number.isNaN(val)) { + elm.value = '1'; + } else { + let { min, max } = elm; + min = parseFloat(min); + max = parseFloat(max); + if (min <= val && val <= max) { + elm.value = `${val}`; + } else { + elm.value = '1'; + } + } + } + break; + } default: { if (localName === 'select' && id === BOOKMARK_LOCATION && value) { const child = elm.querySelector(`#${value.trim()}`); diff --git a/src/mjs/theme.js b/src/mjs/theme.js index d741e982..d75073a9 100644 --- a/src/mjs/theme.js +++ b/src/mjs/theme.js @@ -25,6 +25,7 @@ import { CSS_VAR_HEADING_TEXT_GROUP_1, CSS_VAR_HEADING_TEXT_GROUP_2, CSS_VAR_HEADING_TEXT_GROUP_3, CSS_VAR_HEADING_TEXT_GROUP_4, CSS_VAR_HEADING_TEXT_PINNED, CSS_VAR_OUTLINE_FOCUS, CSS_VAR_THROBBER_CONNECT, + CSS_VAR_ZOOM, CUSTOM_BG, CUSTOM_BG_ACTIVE, CUSTOM_BG_DISCARDED, CUSTOM_BG_FIELD, CUSTOM_BG_FIELD_ACTIVE, CUSTOM_BG_FRAME, CUSTOM_BG_HOVER, CUSTOM_BG_HOVER_SHADOW, CUSTOM_BG_SELECT, CUSTOM_BG_SELECT_HOVER, @@ -35,6 +36,7 @@ import { CUSTOM_HEADING_TEXT_GROUP_1, CUSTOM_HEADING_TEXT_GROUP_2, CUSTOM_HEADING_TEXT_GROUP_3, CUSTOM_HEADING_TEXT_GROUP_4, CUSTOM_HEADING_TEXT_PINNED, CUSTOM_OUTLINE_FOCUS, CUSTOM_THROBBER_CONNECT, + CUSTOM_ZOOM, NEW_TAB, NEW_TAB_SEPARATOR_SHOW, TAB, THEME, THEME_ALPEN, THEME_ALPEN_DARK, THEME_ALPEN_ID, THEME_AUTO, THEME_CURRENT, THEME_CURRENT_ID, THEME_CUSTOM, THEME_CUSTOM_DARK, @@ -965,10 +967,11 @@ export const initCustomTheme = async (opt = {}) => { if (remove) { const dark = window.matchMedia(COLOR_SCHEME_DARK).matches; if (dark) { - await removeStorage([THEME_CUSTOM_DARK]); + await removeStorage([THEME_CUSTOM_DARK, CUSTOM_ZOOM]); } else { - await removeStorage([THEME_CUSTOM_LIGHT]); + await removeStorage([THEME_CUSTOM_LIGHT, CUSTOM_ZOOM]); } + await updateCustomThemeCss(CSS_ROOT, CSS_VAR_ZOOM, '1'); } currentThemeColors.clear(); currentTheme.clear(); @@ -1417,6 +1420,21 @@ export const setActiveTabFontWeight = async value => { return func || null; }; +/* zoom level */ +/** + * set zoom level + * @param {string|number} value - zoom level value + * @returns {Promise.} - updateCustomThemeCss() + */ +export const setZoomLevel = async value => { + value = parseFloat(value); + let func; + if (!Number.isNaN(value)) { + func = updateCustomThemeCss(CSS_ROOT, CSS_VAR_ZOOM, `${value}`); + } + return func || null; +}; + /** * apply CSS * @returns {Promise.} - void diff --git a/test/main.test.js b/test/main.test.js index 3c37deb1..88a72d13 100644 --- a/test/main.test.js +++ b/test/main.test.js @@ -23,7 +23,7 @@ import { CUSTOM_BG_SELECT_HOVER, CUSTOM_BORDER_ACTIVE, CUSTOM_COLOR, CUSTOM_COLOR_ACTIVE, CUSTOM_COLOR_HOVER, - CUSTOM_COLOR_SELECT, CUSTOM_COLOR_SELECT_HOVER, + CUSTOM_COLOR_SELECT, CUSTOM_COLOR_SELECT_HOVER, CUSTOM_ZOOM, DISCARDED, DROP_TARGET, EXT_INIT, FRAME_COLOR_USE, FONT_ACTIVE, FONT_ACTIVE_BOLD, FONT_ACTIVE_NORMAL, HIGHLIGHTED, MIME_JSON, MIME_PLAIN, @@ -253,6 +253,9 @@ describe('main', () => { [BROWSER_SETTINGS_READ]: { checked: true }, + [CUSTOM_ZOOM]: { + value: '1.5' + }, [PINNED_HEIGHT]: { value: 100 }, @@ -265,9 +268,11 @@ describe('main', () => { }); const res = await func(); assert.deepEqual(res, mjs.userOpts, 'result'); - assert.strictEqual(res.size, 4, 'size'); + assert.strictEqual(res.size, 5, 'size'); assert.isTrue(res.has(BROWSER_SETTINGS_READ), 'key'); assert.isTrue(res.get(BROWSER_SETTINGS_READ), 'value'); + assert.isTrue(res.has(CUSTOM_ZOOM), 'key'); + assert.strictEqual(res.get(CUSTOM_ZOOM), '1.5', 'value'); assert.isTrue(res.has(PINNED_HEIGHT), 'key'); assert.strictEqual(res.get(PINNED_HEIGHT), 100, 'value'); assert.isTrue(res.has(TABS_CLOSE_MDLCLICK), 'key'); @@ -13658,6 +13663,22 @@ describe('main', () => { assert.deepEqual(res, [null], 'result'); }); + it('should set variable', async () => { + const res = await func(CUSTOM_ZOOM, { + value: '1.5' + }, false); + assert.strictEqual(mjs.userOpts.get(CUSTOM_ZOOM), '1.5', 'value'); + assert.deepEqual(res, [mjs.userOpts], 'result'); + }); + + it('should set variable', async () => { + const res = await func(CUSTOM_ZOOM, { + value: '1.5' + }, true); + assert.strictEqual(mjs.userOpts.get(CUSTOM_ZOOM), '1.5', 'value'); + assert.deepEqual(res, [mjs.userOpts, undefined], 'result'); + }); + it('should set variable', async () => { const i = browser.browserSettings.closeTabsByDoubleClick.get.callCount; const j = browser.storage.local.set.callCount; @@ -16171,9 +16192,66 @@ describe('main', () => { const func = mjs.startup; beforeEach(() => { mjs.ports.clear(); + mjs.userOpts.clear(); }); afterEach(() => { mjs.ports.clear(); + mjs.userOpts.clear(); + }); + + it('should call function', async () => { + const portId = `${SIDEBAR}_1`; + const port = mockPort({ + name: portId + }); + port.postMessage.callsFake(msg => msg); + mjs.ports.set(portId, port); + browser.tabs.query.resolves([]); + browser.theme.getCurrent.resolves({}); + browser.management.getAll.resolves([ + { + id: 'foo', + enabled: true, + type: 'theme' + } + ]); + browser.sessions.getRecentlyClosed.resolves([]); + browser.runtime.getPlatformInfo.resolves({ + os: 'win' + }); + browser.storage.local.get.withArgs({ + [THEME_CUSTOM]: {}, + [THEME_CUSTOM_DARK]: {}, + [THEME_CUSTOM_LIGHT]: {} + }).resolves({ + [THEME_CUSTOM]: {}, + [THEME_CUSTOM_DARK]: {}, + [THEME_CUSTOM_LIGHT]: {} + }); + browser.windows.getCurrent.resolves({ + id: 1, + incognito: false + }); + const main = document.createElement('main'); + const pinned = document.createElement('section'); + const newTab = document.createElement('section'); + const newTabElm = document.createElement('p'); + const button = document.createElement('button'); + const body = document.querySelector('body'); + main.id = SIDEBAR_MAIN; + pinned.id = PINNED; + newTab.id = NEW_TAB; + button.id = NEW_TAB_BUTTON; + newTabElm.classList.add(TAB, NEW_TAB); + newTabElm.appendChild(button); + newTab.appendChild(newTabElm); + main.appendChild(pinned); + main.appendChild(newTab); + body.appendChild(main); + const res = await func(); + assert.isTrue(browser.sessions.getRecentlyClosed.called, + 'called session'); + assert.isNull(res, 'result'); }); it('should call function', async () => { @@ -16183,6 +16261,8 @@ describe('main', () => { }); port.postMessage.callsFake(msg => msg); mjs.ports.set(portId, port); + mjs.userOpts.set(FONT_ACTIVE, 'bold'); + mjs.userOpts.set(CUSTOM_ZOOM, '1.5'); browser.tabs.query.resolves([]); browser.theme.getCurrent.resolves({}); browser.management.getAll.resolves([ diff --git a/test/options-main.test.js b/test/options-main.test.js index babe70ee..64044eac 100644 --- a/test/options-main.test.js +++ b/test/options-main.test.js @@ -12,11 +12,10 @@ import { browser, createJsdom } from './mocha/setup.js'; /* test */ import * as mjs from '../src/mjs/options-main.js'; import { - BOOKMARK_LOCATION, BROWSER_SETTINGS_READ, COLOR_SCHEME, EXT_INIT, - MENU_SHOW_MOUSEUP, - THEME_CUSTOM, THEME_CUSTOM_DARK, THEME_CUSTOM_INIT, THEME_CUSTOM_LIGHT, - THEME_CUSTOM_SETTING, THEME_ID, THEME_RADIO, - USER_CSS, USER_CSS_SAVE, USER_CSS_USE, USER_CSS_WARN + BOOKMARK_LOCATION, BROWSER_SETTINGS_READ, COLOR_SCHEME, CUSTOM_ZOOM, EXT_INIT, + MENU_SHOW_MOUSEUP, THEME_CUSTOM, THEME_CUSTOM_DARK, THEME_CUSTOM_INIT, + THEME_CUSTOM_LIGHT, THEME_CUSTOM_SETTING, THEME_ID, THEME_RADIO, USER_CSS, + USER_CSS_SAVE, USER_CSS_USE, USER_CSS_WARN } from '../src/mjs/constant.js'; describe('options-main', () => { @@ -163,6 +162,20 @@ describe('options-main', () => { 'called'); assert.isUndefined(res, 'result'); }); + + it('should call function', async () => { + const elm = document.createElement('input'); + const body = document.querySelector('body'); + elm.id = CUSTOM_ZOOM; + elm.value = ''; + body.appendChild(elm); + const i = browser.runtime.sendMessage.callCount; + const res = await func(true); + assert.strictEqual(elm.value, '1', 'value'); + assert.strictEqual(browser.runtime.sendMessage.callCount, i + 1, + 'called'); + assert.isUndefined(res, 'result'); + }); }); describe('request custom theme', () => { @@ -1339,6 +1352,91 @@ describe('options-main', () => { assert.strictEqual(elm.value, 'body: { color: red; }', 'value'); assert.deepEqual(res, [], 'result'); }); + + it('should set value attribute', async () => { + const elm = document.createElement('input'); + const body = document.querySelector('body'); + elm.id = CUSTOM_ZOOM; + elm.type = 'range'; + elm.min = '0.5'; + elm.max = '2'; + elm.value = '1'; + body.appendChild(elm); + const res = await func({ + id: CUSTOM_ZOOM, + value: '1.5' + }); + assert.strictEqual(elm.value, '1.5', 'value'); + assert.deepEqual(res, [], 'result'); + }); + + it('should not set value attribute', async () => { + const elm = document.createElement('input'); + const body = document.querySelector('body'); + elm.id = 'foo'; + elm.type = 'range'; + elm.min = '0.5'; + elm.max = '2'; + elm.value = '1'; + body.appendChild(elm); + const res = await func({ + id: 'foo', + value: '1.5' + }); + assert.strictEqual(elm.value, '1', 'value'); + assert.deepEqual(res, [], 'result'); + }); + + it('should not set value attribute', async () => { + const elm = document.createElement('input'); + const body = document.querySelector('body'); + elm.id = CUSTOM_ZOOM; + elm.type = 'range'; + elm.min = '0.5'; + elm.max = '2'; + elm.value = '1'; + body.appendChild(elm); + const res = await func({ + id: CUSTOM_ZOOM, + value: '' + }); + assert.strictEqual(elm.value, '1', 'value'); + assert.deepEqual(res, [], 'result'); + }); + + it('should not set value attribute', async () => { + const elm = document.createElement('input'); + const body = document.querySelector('body'); + elm.id = CUSTOM_ZOOM; + elm.type = 'range'; + elm.min = '0.5'; + elm.max = '2'; + elm.value = '1'; + body.appendChild(elm); + const res = await func({ + id: CUSTOM_ZOOM, + value: '0' + }); + assert.strictEqual(elm.value, '1', 'value'); + assert.deepEqual(res, [], 'result'); + }); + + it('should not set value attribute', async () => { + const elm = document.createElement('input'); + const body = document.querySelector('body'); + elm.id = CUSTOM_ZOOM; + elm.type = 'range'; + elm.min = '0.5'; + elm.max = '2'; + elm.value = '1'; + body.appendChild(elm); + const res = await func({ + id: CUSTOM_ZOOM, + value: '3' + }); + assert.strictEqual(elm.value, '1', 'value'); + assert.deepEqual(res, [], 'result'); + }); }); describe('set html input values from storage', () => { diff --git a/test/theme.test.js b/test/theme.test.js index 33328316..429fcca7 100644 --- a/test/theme.test.js +++ b/test/theme.test.js @@ -4545,6 +4545,60 @@ describe('theme', () => { }); }); + describe('set zoom level', () => { + const func = mjs.setZoomLevel; + + it('should not set css', async () => { + const elm = document.createElement('style'); + const body = document.querySelector('body'); + elm.id = THEME_CUSTOM_ID; + body.appendChild(elm); + const res = await func(''); + const { sheet } = elm; + assert.strictEqual(sheet.cssRules.length, 0, 'length'); + assert.isNull(res, 'result'); + }); + + it('should not set css', async () => { + const elm = document.createElement('style'); + const body = document.querySelector('body'); + elm.id = THEME_CUSTOM_ID; + body.appendChild(elm); + const res = await func('foo'); + const { sheet } = elm; + assert.strictEqual(sheet.cssRules.length, 0, 'length'); + assert.isNull(res, 'result'); + }); + + it('should set css', async () => { + const elm = document.createElement('style'); + const body = document.querySelector('body'); + elm.id = THEME_CUSTOM_ID; + body.appendChild(elm); + const res = await func('1.5'); + const { sheet } = elm; + assert.strictEqual(sheet.cssRules.length, 1, 'length'); + assert.strictEqual(sheet.cssRules[0].selectorText, CSS_ROOT, 'selector'); + assert.strictEqual(sheet.cssRules[0].style.cssText, + '--zoom-level: 1.5;', 'cssText'); + assert.isUndefined(res, 'result'); + }); + + it('should set css', async () => { + const elm = document.createElement('style'); + const body = document.querySelector('body'); + elm.id = THEME_CUSTOM_ID; + body.appendChild(elm); + const res = await func(1.5); + const { sheet } = elm; + assert.strictEqual(sheet.cssRules.length, 1, 'length'); + assert.strictEqual(sheet.cssRules[0].selectorText, CSS_ROOT, 'selector'); + assert.strictEqual(sheet.cssRules[0].style.cssText, + '--zoom-level: 1.5;', 'cssText'); + assert.isUndefined(res, 'result'); + }); + }); + describe('apply CSS', () => { const func = mjs.applyCss;