Add CSS background-origin and background-repeat properties support#125
Add CSS background-origin and background-repeat properties support#125
Conversation
Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>
Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>
…repeat implementation Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>
There was a problem hiding this comment.
Remove this document, this is unnecessary!
There was a problem hiding this comment.
Removed the documentation file as requested. Commit 2c45021.
| background-image: url(https://ar.rokidcdn.com/web-assets/yodaos-jsar/dist/images/a.jpg); | ||
| background-blend-mode: luminosity; | ||
| background-origin: padding-box; | ||
| background-repeat: repeat-x; |
There was a problem hiding this comment.
Don't update in simple.html
There was a problem hiding this comment.
Reverted the background-origin and background-repeat properties from simple.html as requested. Commit 2c45021.
…eedback Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>
| float borderTop = style.borderWidth().top().value; | ||
| float borderRight = style.borderWidth().right().value; | ||
| float borderBottom = style.borderWidth().bottom().value; | ||
| float borderLeft = style.borderWidth().left().value; |
There was a problem hiding this comment.
The above borders width should read from Fragment
There was a problem hiding this comment.
Updated to read border widths from Fragment using fragment.border().top(), fragment.border().right(), etc. instead of from ComputedStyle. Commit 1f84de5.
| float borderTop = style.borderWidth().top().value; | ||
| float borderRight = style.borderWidth().right().value; | ||
| float borderBottom = style.borderWidth().bottom().value; | ||
| float borderLeft = style.borderWidth().left().value; |
There was a problem hiding this comment.
Ditto, borders width should read from Fragment instead of computed style.
There was a problem hiding this comment.
Updated this section to also read border widths from Fragment instead of ComputedStyle. Commit 1f84de5.
| float paddingTop = 0; | ||
| float paddingRight = 0; | ||
| float paddingBottom = 0; | ||
| float paddingLeft = 0; |
There was a problem hiding this comment.
paddings can be read from the Fragment, too.
There was a problem hiding this comment.
Replaced the hardcoded padding values with actual Fragment padding values using fragment.padding().top(), fragment.padding().right(), etc. This removes the TODO and implements proper padding support. Commit 1f84de5.
Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>
Co-authored-by: yorkie <1935767+yorkie@users.noreply.github.com>
This PR implements support for the CSS
background-originandbackground-repeatproperties in the JSAR runtime, enhancing compatibility with modern CSS background features and improving rendering accuracy.Features Added
Background-Origin Property
Defines the positioning area for background images:
padding-box(default): Position relative to padding boxborder-box: Position relative to border boxcontent-box: Position relative to content boxBackground-Repeat Property
Controls how background images are tiled:
repeat(default): Tile both horizontally and verticallyrepeat-x: Tile only horizontallyrepeat-y: Tile only verticallyno-repeat: Display once without tilingspace,round: Parsed with graceful fallback to no-repeatImplementation Details
The implementation follows the established JSAR CSS architecture pattern:
values/generics/background.hppvalues/specified/background.hppvalues/computed/background.hppcomputed_style.cpp/hppweb_content_renderer.cppKey Technical Features
Usage Example
Testing
fixtures/html/background-origin-repeat-test.htmlsimple.htmlfixture to showcase new propertiesThe implementation maintains full backward compatibility while adding modern CSS background capabilities that match mainstream browser behavior.
Fixes #124.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.