APRICITYUI RENDER REGRESSION / ORE THEME

Mask 测试

覆盖 mask-mode(alpha / luminance)、mask-composite(add / subtract / intersect / exclude)、 mask-clip / mask-origin 几何盒、url() 图像遮罩与失败 fail-open。每张卡片标注预期效果,与浏览器不一致即回归。

mode composite clip / origin url() / fail-open

mask-mode

alpha:黑→透明渐变
mask: linear-gradient(90deg, #000, transparent)
预期:内容自左向右淡出。
alpha:不透明彩色渐变(对照组)
mask: linear-gradient(90deg, red, blue)
预期:渐变 alpha 处处为 1,无任何遮罩效果。
luminance:白→红→黑
mask-mode: luminance
预期:按亮度遮罩——左侧几乎全显,红色段约 21% 可见,右侧全遮。与对照组(同渐变按 alpha 无效果)对比即 luminance 生效。

mask-composite

add(默认):竖条 + 横条
add
预期:十字(两层并集,source-over)。
intersect:竖条 ∩ 横条
intersect
预期:只剩中央方块(source-in)。
subtract:竖条 − 横条
subtract
预期:竖条被横条区域挖空,剩上下两截(source-out,源=第一层)。
exclude:竖条 ⊕ 横条
exclude
预期:十字挖掉中央方块(xor)。
简写解析:第二层带 intersect
mask: …, … intersect
预期:与 intersect 卡片一致(中央方块)——验证 mask 简写把 composite token 分配到对应层。

mask-clip / mask-origin

clip: border-box(默认)+ 圆角
border-box clip
预期:45° 条纹覆盖含边框的整个 border-box,并沿 20px 圆角外缘裁剪;紫色边框在条纹间可见。
clip: padding-box
padding-box clip
预期:条纹只画在 padding-box 内——紫色边框被整体遮掉(不可见),内容区仍是条纹。
clip: no-clip + mask-size 180%
no-clip overflow
预期:条纹按 border-box 定位但放大 180% 后不裁剪,溢出元素边界延伸到卡片内。
origin 对比(36px 窗口 @ 0 0)
border
padding
content
预期:三个盒子都只露出 36px 小窗,位置分别在边框外角 / 边框内侧 / padding 内侧,逐盒右移错开。

url() 图像遮罩

bear.png:alpha 剪影
预期:内容只在熊剪影内可见(mask-size 85% auto,居中不重复)。
bear.png:平铺
预期:190px 宽熊形重复平铺成队列。
missing-mask.png:fail-open
mask-image: url(missing-mask.png)
预期:加载失败的层被跳过,内容完整可见(与浏览器"全遮掉"不同,文档化偏差)。