Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS rem unit not evaluated correctly in min/max/clamp functions #1137

Closed
MurakamiShinyu opened this issue Mar 5, 2023 · 1 comment · Fixed by #1141
Closed

CSS rem unit not evaluated correctly in min/max/clamp functions #1137

MurakamiShinyu opened this issue Mar 5, 2023 · 1 comment · Fixed by #1141
Assignees
@MurakamiShinyu
Labels
bug
Milestone
v2.23

Comments

@MurakamiShinyu
Copy link
Member

Test sample:

<style>
:root {
  font-size: 50px;
}
p {
  border: 1px solid;
}
p:nth-child(1){
  border-left-width: 1rem;
}
p:nth-child(2){
  border-left-width: max(16px,1rem);
}
p:nth-child(3){
  border-left-width: min(1rem,50px);
}
p:nth-child(4){
  border-left-width: clamp(16px,1rem,50px);
}
</style>
<body>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
</body>

HTML: https://gist.githack.com/MurakamiShinyu/cf431b1a13c51a02e5e6dd5912bb1f10/raw/min-max-rem-test.html

Test with Vivliostyle Viewer:
https://vivliostyle.vercel.app/#src=https://gist.githack.com/MurakamiShinyu/cf431b1a13c51a02e5e6dd5912bb1f10/raw/min-max-rem-test.html

Result screenshot:
Screenshot 2023-03-05 at 13 45 55

The border-left-width should be all 50px (= 1rem), but the result is different.
@MurakamiShinyu MurakamiShinyu self-assigned this Mar 5, 2023
@MurakamiShinyu MurakamiShinyu mentioned this issue Mar 5, 2023
Merged
MurakamiShinyu added a commit that referenced this issue Mar 12, 2023
@MurakamiShinyu
fix: CSS rem unit not evaluated correctly in min/max/clamp functions
9f1b39a 
- fix #1137
@MurakamiShinyu MurakamiShinyu mentioned this issue Mar 12, 2023
Merged
@MurakamiShinyu
Copy link
Member Author

Fixed in #1141.

Test:
https://vivliostyle-git-fix-issue1137-vivliostyle.vercel.app/#src=https://gist.githack.com/MurakamiShinyu/cf431b1a13c51a02e5e6dd5912bb1f10/raw/min-max-rem-test.html

Screenshot:
Screenshot 2023-03-12 at 18 31 04

@MurakamiShinyu MurakamiShinyu added this to the v2.23 milestone Mar 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MurakamiShinyu MurakamiShinyu

Labels
bug
Projects
None yet
Milestone
v2.23
Development

Successfully merging a pull request may close this issue.

fix: CSS rem unit not evaluated correctly in min/max/clamp functions vivliostyle/vivliostyle.js
1 participant
@MurakamiShinyu