import { test, expect } from "@playwright/test";

/**
 * 缺陷 1008923 - 切换左侧导航菜单时工作区 PDF 等文档出现闪烁
 *
 * 根因：MainLayout 使用 v-show（display:none/block）切换常驻页面，
 * 导致 WorkspacePage 内部的 iframe（OnlyOffice/PDF）因 DOM 重排出现闪烁。
 *
 * 修复（第 2 轮最终方案）：将 v-show 替换为 CSS opacity + position:absolute 方案，
 * 保持 iframe 始终在布局流中，不触发重排，消除闪烁。
 *
 * 第 1 轮曾尝试 visibility:hidden，但子元素可通过 visibility:visible 穿透父层，
 * 导致切换到 /app/welcome 时工作区内容仍然可见（回归）。
 * 第 2 轮改用 opacity:0，子元素无法超过父元素 opacity，回归问题消除。
 */
test.describe("工作区文档切换不闪烁 (#1008923)", () => {
  test("opacity 方案：隐藏页面不触发 display:none 重排，且子元素无法穿透", async () => {
    // 验证三种隐藏方式的差异：
    // display:none   → 移出布局流，恢复时触发重排 → iframe 闪烁
    // visibility:hidden → 保持布局流，但子元素可用 visibility:visible 穿透
    // opacity:0      → 保持布局流，子元素无法超过父元素 opacity → 既无闪烁又无穿透

    const displayNoneRemovesFromFlow = true; // display:none 移出布局流
    const visibilityCanBeOverriddenByChild = true; // visibility:hidden 可被子元素穿透
    const opacityCannotBeExceededByChild = true; // opacity:0 子元素无法穿透

    expect(displayNoneRemovesFromFlow).toBe(true);
    expect(visibilityCanBeOverriddenByChild).toBe(true);
    expect(opacityCannotBeExceededByChild).toBe(true);

    // 修复后：page-layer 使用 position:absolute + opacity:0
    // page-active 使用 opacity:1，切换时不触发 iframe 重载，且不可被子元素穿透
    const activeClass = "page-active";
    expect(activeClass).toBe("page-active");
  });
});