-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Integer interpolation should be rounded towards positive infinity.
Currently, interpolation of <integer> is rounding away from 0. The interpolation's result should be rounded according to the spec, https://drafts.csswg.org/css-values-4/#combine-integers, which is "the result is converted to an <integer> by rounding to the nearest integer, with values halfway between adjacent integers rounded towards positive infinity." Bug: 1257732 Change-Id: I0dc9db806b88e66bf326b848c4e4ac90ef868ed4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3225842 Reviewed-by: Robert Flack <flackr@chromium.org> Reviewed-by: Xiaocheng Hu <xiaochengh@chromium.org> Commit-Queue: Joonghun Park <pjh0718@gmail.com> Cr-Commit-Position: refs/heads/main@{#933277}
- Loading branch information
1 parent
5acc427
commit ac544dd
Showing
2 changed files
with
77 additions
and
0 deletions.
There are no files selected for viewing
39 changes: 39 additions & 0 deletions
39
css/css-values/integer_interpolation_round_half_towards_positive_infinity_order.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!doctype html> | ||
<title>Testing if integer interpolation is rounded towards positive infinity</title> | ||
<link rel="author" title="Joonghun Park" href="pjh0718@gmail.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#combine-integers"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<style> | ||
|
||
#flex-container { | ||
display: flex; | ||
animation: anim-order 4s steps(4) forwards 1; | ||
animation-delay: -1s; | ||
animation-play-state: paused; | ||
} | ||
|
||
@keyframes anim-order { | ||
from { | ||
order: -2; | ||
} | ||
|
||
to { | ||
order: 0; | ||
} | ||
} | ||
|
||
</style> | ||
<div id="flex-container"></div> | ||
<script> | ||
var test_description = "Integer interpolation should be rounded towards positive infinity"; | ||
test( | ||
t => { | ||
const container = document.getElementById("flex-container"); | ||
const order_value = Number.parseFloat(getComputedStyle(container).getPropertyValue('order')); | ||
|
||
assert_equals(order_value, -1, "Interpolation result for order should be rounded towards positive infinity"); | ||
}, | ||
test_description | ||
); | ||
</script> |
38 changes: 38 additions & 0 deletions
38
css/css-values/integer_interpolation_round_half_towards_positive_infinity_z_index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!doctype html> | ||
<title>Testing if integer interpolation is rounded towards positive infinity</title> | ||
<link rel="author" title="Joonghun Park" href="pjh0718@gmail.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-values-4/#combine-integers"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<style> | ||
|
||
#anim-target { | ||
animation: anim-z 4s steps(4) forwards 1; | ||
animation-delay: -1s; | ||
animation-play-state: paused; | ||
} | ||
|
||
@keyframes anim-z { | ||
from { | ||
z-index: -2; | ||
} | ||
|
||
to { | ||
z-index: 0; | ||
} | ||
} | ||
|
||
</style> | ||
<div id="anim-target"></div> | ||
<script> | ||
var test_description = "Integer interpolation should be rounded towards positive infinity"; | ||
test( | ||
t => { | ||
const target = document.getElementById("anim-target"); | ||
const z_index_value = Number.parseFloat(getComputedStyle(target).getPropertyValue('z-index')); | ||
|
||
assert_equals(z_index_value, -1, "Interpolation result for z-index should be rounded towards positive infinity"); | ||
}, | ||
test_description | ||
); | ||
</script> |