def test_effects_mask_fasthtml_examples():
"""Test mask utilities in practical FastHTML component examples."""
from fasthtml.common import Div, Img, Section, H1, P
from cjm_fasthtml_tailwind.utilities.spacing import p
from cjm_fasthtml_tailwind.utilities.backgrounds import bg, bg_linear, from_color, to_color, via_color
from cjm_fasthtml_tailwind.utilities.typography import font_size, text_color
from cjm_fasthtml_tailwind.utilities.layout import position, overflow, display_tw
from cjm_fasthtml_tailwind.utilities.sizing import w, h
from cjm_fasthtml_tailwind.utilities.borders import rounded
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
# Fade out effect with linear gradient mask
fade_out_div = Div(
P("This text fades out at the bottom"),
cls=combine_classes(
mask_linear._180,
mask_t_from.black,
mask_t_to.transparent,
p(8), bg.blue._500, text_color.white
)
)
assert "mask-linear-180" in fade_out_div.attrs['class']
assert "mask-t-from-black" in fade_out_div.attrs['class']
assert "mask-t-to-transparent" in fade_out_div.attrs['class']
# Circular reveal with radial gradient mask
circular_reveal = Div(
Img(src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp"),
cls=combine_classes(
mask_radial(),
mask_circle,
mask_radial_at_center,
mask_radial_from.black,
mask_radial_to.transparent,
position.relative, overflow.hidden
)
)
assert "mask-radial" in circular_reveal.attrs['class']
assert "mask-circle" in circular_reveal.attrs['class']
assert "mask-radial-at-center" in circular_reveal.attrs['class']
# Horizontal fade edges effect
fade_edges = Div(
"Content with faded edges",
cls=combine_classes(
mask_x_from._10,
mask_x_to._90,
p.x(8), p.y(4), bg_linear.to_r, from_color.purple._500, to_color.pink._500, text_color.white
)
)
assert "mask-x-from-10" in fade_edges.attrs['class']
assert "mask-x-to-90" in fade_edges.attrs['class']
# Corner spotlight effect with radial mask
corner_spotlight = Section(
H1("Spotlight Effect"),
cls=combine_classes(
mask_radial(),
mask_ellipse,
mask_radial_at_top_left,
mask_radial_farthest_corner,
mask_radial_from.black,
mask_radial_to.transparent,
p(16), bg.gray._900, text_color.white
)
)
assert "mask-ellipse" in corner_spotlight.attrs['class']
assert "mask-radial-at-top-left" in corner_spotlight.attrs['class']
assert "mask-radial-farthest-corner" in corner_spotlight.attrs['class']
# SVG mask reference
svg_masked = Div(
"Content with SVG mask",
cls=combine_classes(
mask("url(#star-mask)"),
mask_size.cover,
mask_position.center,
mask_repeat.no_repeat,
p(8), bg_linear.to_br, from_color.yellow._400, to_color.orange._500
)
)
assert "mask-[url(#star-mask)]" in svg_masked.attrs['class']
assert "mask-cover" in svg_masked.attrs['class']
assert "mask-center" in svg_masked.attrs['class']
assert "mask-no-repeat" in svg_masked.attrs['class']
# Conic gradient pie chart mask
pie_mask = Div(
"Pie chart effect",
cls=combine_classes(
mask_conic._0,
mask_conic_from.black,
mask_conic_to.transparent,
w(32), h(32), bg.blue._600, rounded.full
)
)
assert "mask-conic-0" in pie_mask.attrs['class']
assert "mask-conic-from-black" in pie_mask.attrs['class']
# Complex gradient mask composition
complex_mask = Div(
"Complex masked content",
cls=combine_classes(
mask_linear._45,
mask_t_from._20,
mask_b_from._20,
mask_l_from("10%"),
mask_r_to("90%"),
mask_mode.alpha,
mask_origin.content,
p(12), bg_linear.to_r, from_color.indigo._500, via_color.purple._500, to_color.pink._500, text_color.white
)
)
assert "mask-linear-45" in complex_mask.attrs['class']
assert "mask-t-from-20" in complex_mask.attrs['class']
assert "mask-alpha" in complex_mask.attrs['class']
assert "mask-origin-content" in complex_mask.attrs['class']
# Return all examples in a grid layout
return Div(
fade_out_div,
circular_reveal,
fade_edges,
corner_spotlight,
svg_masked,
pie_mask,
complex_mask,
cls=combine_classes(grid_display, gap(5))
)
# Run the tests
test_effects_mask_fasthtml_examples()
