Test 5: Graphics, Colors & Images

ทดสอบ RGBA transparency, SVG/raster images, borders, border-radius

Test 5.1 — RGBA & Opacity (Transparency)

กล่องสีทึบ vs กล่องโปร่งใส (rgba):

Red 100%

Red 75%

Red 50%

Red 25%

สีหลากหลายรูปแบบ — hex, rgb, rgba, named:

#ff6b6b

#4ecdc4

#45b7d1

#96ceb4

#ffeaa7

rgb(108..)

rgb(253..)

rgba 30%

กล่องซ้อนทับกัน (Layered transparency):

กล่องน้ำเงิน (ด้านหลัง)

กล่องแดง 60% (ซ้อนทับ)

✓ สี rgba ต้องโปร่งใส ไม่กลายเป็นสีทึบ, สีจากทุกรูปแบบต้องตรง

Test 5.2 — Images (SVG & Raster)

SVG inline:

SVG Test

รูปภาพ (local file):

sample.png — ต้อง scale ตาม width โดยรักษา aspect ratio

✓ SVG ต้องเป็น vector (ซูมไม่แตก), รูป raster ต้อง scale พอดีกล่อง

Test 5.3 — CSS Borders & Border-Radius

Border styles ต่างๆ:

solid 3px

dashed 3px

dotted 3px

Border ต่างด้าน:

เส้นขอบ 4 ด้าน 4 สี — แดง(บน) น้ำเงิน(ขวา) เขียว(ล่าง) ส้ม(ซ้าย)

border-radius:

✓ border-radius ทำงานแล้ว — มุมโค้งตามค่า, dashed/dotted ทำงานแล้ว

Test 5.4 — Color Emoji (Twemoji)

Emoji พื้นฐาน:

😀 😂 🥰 😎 🤔 😱 🤯 🥳 😴 🤖

Emoji ผสมข้อความ:

สวัสดี 👋 วันนี้อากาศดี ☀️ ไปเที่ยว 🏖️ กินข้าว 🍜 แล้วกลับบ้าน 🏠

ธง และ emoji ซับซ้อน:

🇹🇭 🇺🇸 🇯🇵 🇬🇧 🇫🇷 🇩🇪 🇰🇷 🇨🇳

✓ Emoji ต้องแสดงเป็นสี (Twemoji PNG) ไม่ใช่ขาวดำ

Test 5.5 — Noto Color Emoji Fallback

ข้อความผสมไทย + อังกฤษ + emoji โดยบังคับลำดับฟอนต์ Noto Color:

NotoColor: 😀 🚀 📄 ✅ ⚠️ ❌ 🇹🇭 🇯🇵

สถานะระบบ: Ready ✅ | Build Failed ❌ | Deploying 🚀 | Docs Updated 📄

✓ Noto Color Emoji ต้องทำงานเป็น fallback และแสดง emoji เป็นสีเมื่อมี glyph รองรับ