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

Make commitStyles use computed values instead of resolved values #22452

Merged
merged 1 commit into from May 5, 2020
Merged

Make commitStyles use computed values instead of resolved values #22452

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
78 changes: 73 additions & 5 deletions web-animations/interfaces/Animation/commitStyles.html
View file
Open in desktop
Expand Up @@ -95,9 +95,26 @@

animation.cancel();

assert_equals(div.style.marginLeft, '20px');
assert_equals(getComputedStyle(div).marginLeft, '20px');
}, 'Commits logical properties');

test(t => {
const div = createDiv(t);
div.style.marginLeft = '10px';

const animation = div.animate(
{ marginInlineStart: '20px' },
{ duration: 1, fill: 'forwards' }
);
animation.finish();

animation.commitStyles();

animation.cancel();

assert_equals(div.style.marginLeft, '20px');
}, 'Commits logical properties as physical properties');

test(t => {
const div = createDiv(t);
div.style.marginLeft = '10px';
Expand Down Expand Up @@ -160,12 +177,32 @@

assert_numeric_style_equals(getComputedStyle(div).width, 100);

// Changes to the font-size should have no effect
div.style.fontSize = '20px';

assert_numeric_style_equals(getComputedStyle(div).width, 100);
assert_numeric_style_equals(getComputedStyle(div).width, 100,
"Changes to the font-size should have no effect");
}, 'Commits em units as pixel values');

test(t => {
const div = createDiv(t);
div.style.fontSize = '10px';

const animation = div.animate(
{ lineHeight: '1.5' },
{ duration: 1, fill: 'forwards' }
);
animation.finish();
animation.commitStyles();
animation.cancel();

assert_numeric_style_equals(getComputedStyle(div).lineHeight, 15);
assert_equals(div.style.lineHeight, "1.5", "line-height is committed as a relative value");

div.style.fontSize = '20px';
assert_numeric_style_equals(getComputedStyle(div).lineHeight, 30,
"Changes to the font-size should affect the committed line-height");

}, 'Commits relative line-height');

test(t => {
const div = createDiv(t);
const animation = div.animate(
Expand All @@ -188,7 +225,38 @@
animation.commitStyles();
animation.cancel();
assert_equals(div.style.transform, 'translate(20px, 20px)');
}, 'Commits computed transform');
}, 'Commits transforms as a transform list');

test(t => {
const div = createDiv(t);
div.style.width = '200px';
div.style.height = '200px';

const animation = div.animate({ transform: ["translate(100%, 0%)", "scale(3)"] }, 1000);
animation.currentTime = 500;
animation.commitStyles();
animation.cancel();

// TODO(https://github.com/w3c/csswg-drafts/issues/2854):
// We can't check the committed value directly since it is not specced yet in this case,
// but it should still produce the correct resolved value.
assert_equals(getComputedStyle(div).transform, "matrix(2, 0, 0, 2, 100, 0)",
"Resolved transform is correct after commit.");
}, 'Commits matrix-interpolated relative transforms');

test(t => {
const div = createDiv(t);
div.style.width = '200px';
div.style.height = '200px';

const animation = div.animate({ transform: ["none", "none"] }, 1000);
animation.currentTime = 500;
animation.commitStyles();
animation.cancel();

assert_equals(div.style.transform, "none",
"Resolved transform is correct after commit.");
}, 'Commits "none" transform');

promise_test(async t => {
const div = createDiv(t);
Expand Down