6e9b5e4335
Features: - Add Dashed and Dotted variants to BorderStyle enum - Parse dashed/dotted keywords in border-style property - Add rgb()/rgba() color function parsing with percentage support - Add border-top/right/bottom/left shorthand property parsing - Support CSS variables in border shorthand properties - Implement dashed and dotted border rendering Bug fixes: - RGB percentage handling (50% -> 128) - Alpha channel precision (use rounding, 0.9 -> 230) - RGB value overflow protection (clamp to 0-255) - Dashed pattern alignment (use border-relative coordinates) - Invalid unit rejection in color functions (rgb(10px,...)) - Consistent duplicate value handling in border shorthands Tests: - Add golden test 093-dashed-borders for CSS variable border example - Add unit test for dashed pattern alignment fix Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
37 lines
577 B
HTML
37 lines
577 B
HTML
<html>
|
|
<head>
|
|
<style>
|
|
:root {
|
|
--border: dashed 1px rgba(0, 255, 0, 0.9);
|
|
}
|
|
body {
|
|
margin: 0;
|
|
}
|
|
.menu {
|
|
border-top: var(--border);
|
|
border-bottom: var(--border);
|
|
}
|
|
.menu ul {
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
padding-left: 0px;
|
|
}
|
|
.direct-dashed {
|
|
border-top: dashed 2px red;
|
|
border-bottom: dotted 2px blue;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="menu">
|
|
<ul>
|
|
<li>Test 1</li>
|
|
<li>Test 2</li>
|
|
</ul>
|
|
</div>
|
|
<div class="direct-dashed">Dashed top, dotted bottom</div>
|
|
</body>
|
|
</html>
|