mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
691c57ea0d
--HG-- rename : layout/style/test/file_flexbox_align_self_auto.html => layout/style/test/test_flexbox_align_self_auto.html rename : layout/style/test/file_flexbox_child_display_values.xhtml => layout/style/test/test_flexbox_child_display_values.xhtml rename : layout/style/test/file_flexbox_flex_grow_and_shrink.html => layout/style/test/test_flexbox_flex_grow_and_shrink.html rename : layout/style/test/file_flexbox_flex_shorthand.html => layout/style/test/test_flexbox_flex_shorthand.html rename : layout/style/test/file_flexbox_layout.html => layout/style/test/test_flexbox_layout.html rename : layout/style/test/file_flexbox_order.html => layout/style/test/test_flexbox_order.html rename : layout/style/test/file_flexbox_order_table.html => layout/style/test/test_flexbox_order_table.html
184 lines
5.5 KiB
HTML
184 lines
5.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=696253
|
|
-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Test for flex-grow and flex-shrink animation (Bug 696253)</title>
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="application/javascript" src="animation_utils.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
<style type="text/css">
|
|
|
|
/* Set flex-grow and flex-shrink to nonzero values,
|
|
when no animations are applied. */
|
|
|
|
* { flex-grow: 10; flex-shrink: 20 }
|
|
|
|
/* These animations SHOULD affect computed style */
|
|
@keyframes flexGrowTwoToThree {
|
|
0% { flex-grow: 2 }
|
|
100% { flex-grow: 3 }
|
|
}
|
|
@keyframes flexShrinkTwoToThree {
|
|
0% { flex-shrink: 2 }
|
|
100% { flex-shrink: 3 }
|
|
}
|
|
@keyframes flexGrowZeroToZero {
|
|
0% { flex-grow: 0 }
|
|
100% { flex-grow: 0 }
|
|
}
|
|
@keyframes flexShrinkZeroToZero {
|
|
0% { flex-shrink: 0 }
|
|
100% { flex-shrink: 0 }
|
|
}
|
|
|
|
/* These animations SHOULD NOT affect computed style. (flex-grow and
|
|
flex-shrink are animatable "except between '0' and other values") */
|
|
@keyframes flexGrowZeroToOne {
|
|
0% { flex-grow: 0 }
|
|
100% { flex-grow: 1 }
|
|
}
|
|
@keyframes flexShrinkZeroToOne {
|
|
0% { flex-shrink: 0 }
|
|
100% { flex-shrink: 1 }
|
|
}
|
|
@keyframes flexGrowOneToZero {
|
|
0% { flex-grow: 1 }
|
|
100% { flex-grow: 0 }
|
|
}
|
|
@keyframes flexShrinkOneToZero {
|
|
0% { flex-shrink: 1 }
|
|
100% { flex-shrink: 0 }
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
|
|
<div id="display">
|
|
<div id="myDiv"></div>
|
|
</div>
|
|
<pre id="test">
|
|
<script type="application/javascript">
|
|
"use strict";
|
|
|
|
/** Test for flex-grow and flex-shrink animation (Bug 696253) **/
|
|
|
|
function advance_clock(milliseconds) {
|
|
SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
|
|
}
|
|
|
|
var display = document.getElementById("display");
|
|
var div = null;
|
|
var cs = null;
|
|
function new_div(style) {
|
|
return new_element("div", style);
|
|
}
|
|
function new_element(tagname, style) {
|
|
if (div != null || cs != null) {
|
|
ok(false, "test author forgot to call done_div");
|
|
}
|
|
if (typeof(style) != "string") {
|
|
ok(false, "test author forgot to pass argument");
|
|
}
|
|
div = document.createElement(tagname);
|
|
div.setAttribute("style", style);
|
|
display.appendChild(div);
|
|
cs = getComputedStyle(div, "");
|
|
}
|
|
|
|
function done_div() {
|
|
display.removeChild(div);
|
|
div = null;
|
|
cs = null;
|
|
}
|
|
// take over the refresh driver
|
|
advance_clock(0);
|
|
|
|
// ANIMATIONS THAT SHOULD AFFECT COMPUTED STYLE
|
|
// --------------------------------------------
|
|
|
|
// flexGrowTwoToThree: 2.0 at 0%, 2.5 at 50%, 10 after animation is over
|
|
new_div("animation: flexGrowTwoToThree linear 1s");
|
|
is_approx(cs.flexGrow, 2, 0.01, "flexGrowTwoToThree at 0.0s");
|
|
advance_clock(500);
|
|
is_approx(cs.flexGrow, 2.5, 0.01, "flexGrowTwoToThree at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexGrow, 10, "flexGrowTwoToThree at 1.5s");
|
|
done_div();
|
|
|
|
// flexShrinkTwoToThree: 2.0 at 0%, 2.5 at 50%, 20 after animation is over
|
|
new_div("animation: flexShrinkTwoToThree linear 1s");
|
|
is_approx(cs.flexShrink, 2, 0.01, "flexShrinkTwoToThree at 0.0s");
|
|
advance_clock(500);
|
|
is_approx(cs.flexShrink, 2.5, 0.01, "flexShrinkTwoToThree at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexShrink, 20, "flexShrinkTwoToThree at 1.5s");
|
|
done_div();
|
|
|
|
// flexGrowZeroToZero: 0 at 0%, 0 at 50%, 10 after animation is over
|
|
new_div("animation: flexGrowZeroToZero linear 1s");
|
|
is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.0s");
|
|
advance_clock(500);
|
|
is(cs.flexGrow, 0, "flexGrowZeroToZero at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexGrow, 10, "flexGrowZeroToZero at 1.5s");
|
|
done_div();
|
|
|
|
// flexShrinkZeroToZero: 0 at 0%, 0 at 50%, 20 after animation is over
|
|
new_div("animation: flexShrinkZeroToZero linear 1s");
|
|
is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.0s");
|
|
advance_clock(500);
|
|
is(cs.flexShrink, 0, "flexShrinkZeroToZero at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexShrink, 20, "flexShrinkZeroToZero at 1.5s");
|
|
done_div();
|
|
|
|
// ANIMATIONS THAT SHOULD NOT AFFECT COMPUTED STYLE
|
|
// ------------------------------------------------
|
|
|
|
// flexGrowZeroToOne: no effect on computed style. 10 all the way through.
|
|
new_div("animation: flexGrowZeroToOne linear 1s");
|
|
is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.0s");
|
|
advance_clock(500);
|
|
is(cs.flexGrow, 10, "flexGrowZeroToOne at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexGrow, 10, "flexGrowZeroToOne at 1.5s");
|
|
done_div();
|
|
|
|
// flexShrinkZeroToOne: no effect on computed style. 20 all the way through.
|
|
new_div("animation: flexShrinkZeroToOne linear 1s");
|
|
is(cs.flexShrink, 20, "flexShrinkZeroToOne at 0.0s");
|
|
advance_clock(500);
|
|
is(cs.flexShrink, 20, "flexShrinkZeroToOne at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexShrink, 20, "flexShrinkZeroToOne at 1.5s");
|
|
done_div();
|
|
|
|
// flexGrowOneToZero: no effect on computed style. 10 all the way through.
|
|
new_div("animation: flexGrowOneToZero linear 1s");
|
|
is(cs.flexGrow, 10, "flexGrowOneToZero at 0.0s");
|
|
advance_clock(500);
|
|
is(cs.flexGrow, 10, "flexGrowOneToZero at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexGrow, 10, "flexGrowOneToZero at 1.5s");
|
|
done_div();
|
|
|
|
// flexShrinkOneToZero: no effect on computed style. 20 all the way through.
|
|
new_div("animation: flexShrinkOneToZero linear 1s");
|
|
is(cs.flexShrink, 20, "flexShrinkOneToZero at 0.0s");
|
|
advance_clock(500);
|
|
is(cs.flexShrink, 20, "flexShrinkOneToZero at 0.5s");
|
|
advance_clock(1000);
|
|
is(cs.flexShrink, 20, "flexShrinkOneToZero at 1.5s");
|
|
done_div();
|
|
|
|
SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
|
|
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|