mirror of
https://github.com/servo/servo.git
synced 2025-08-05 13:40:08 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transition height from 10px to 100px / values": {},
|
||||
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offs-creen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -51,7 +51,7 @@
|
|||
|
||||
<script>
|
||||
// make sure a transition is run between DOMContentLoaded and load
|
||||
|
||||
|
||||
var isDOMContentLoaded = false;
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
isDOMContentLoaded = true;
|
||||
|
@ -60,7 +60,7 @@
|
|||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition height from 10px to 100px",
|
||||
|
@ -91,12 +91,12 @@
|
|||
'.container': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
|
||||
generalParallelTest.setup(data, options);
|
||||
generalParallelTest.addStyles(data, options, styles);
|
||||
},
|
||||
|
@ -122,7 +122,7 @@
|
|||
assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.transition.computedStyle(data.property);
|
||||
|
@ -140,7 +140,7 @@
|
|||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
|
||||
// make sure we got the event for the tested property only
|
||||
test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration));
|
||||
|
||||
|
||||
test.step(function() {
|
||||
assert_false(isDOMContentLoaded, "DOMContentLoaded may not have happened yet")
|
||||
});
|
||||
|
@ -153,4 +153,5 @@
|
|||
</script>
|
||||
<script src="/delay/?type=js&delay=3000"></script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offs-creen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -51,16 +51,16 @@
|
|||
|
||||
<script>
|
||||
// make sure a transition is run between DOMContentLoaded and load
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var isLoad = false;
|
||||
window.addEventListener('load', function() {
|
||||
isLoad = true;
|
||||
}, false);
|
||||
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
var tests = [
|
||||
{
|
||||
|
@ -155,4 +155,5 @@
|
|||
</script>
|
||||
<img src="/delay/?type=gif&delay=3000" alt="dummy image">
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -24,7 +24,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"changing transition-duration / values": {},
|
||||
|
@ -64,7 +64,7 @@
|
|||
'transition-duration': '0.1s'
|
||||
},
|
||||
expect: [
|
||||
'padding-left:0.5s'
|
||||
'padding-left:0.5s'
|
||||
]
|
||||
},
|
||||
{
|
||||
|
@ -77,7 +77,7 @@
|
|||
'transition-property': 'margin-left'
|
||||
},
|
||||
expect: [
|
||||
''
|
||||
''
|
||||
]
|
||||
}
|
||||
];
|
||||
|
@ -102,7 +102,7 @@
|
|||
'.container': {},
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: data.transitions},
|
||||
|
@ -129,7 +129,7 @@
|
|||
generalParallelTest.getStyle(data);
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
setTimeout(function() {
|
||||
data.transition.node.classList.add('then');
|
||||
|
||||
|
@ -151,4 +151,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transition within detached container / values": {},
|
||||
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="off-screen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -54,7 +54,7 @@
|
|||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition within detached container",
|
||||
|
@ -85,12 +85,12 @@
|
|||
'.container': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
|
||||
generalParallelTest.setup(data, options);
|
||||
generalParallelTest.addStyles(data, options, styles);
|
||||
},
|
||||
|
@ -136,4 +136,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,10 +7,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -26,7 +26,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transition:all, changing padding-left / events": {},
|
||||
|
@ -51,21 +51,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
-->
|
||||
|
||||
<script>
|
||||
// For the keyword ‘all’, or if one of the identifiers listed is a shorthand property, implementations must
|
||||
// start transitions for any of its longhand sub-properties that are animatable (or, for ‘all’, all animatable
|
||||
// For the keyword ‘all’, or if one of the identifiers listed is a shorthand property, implementations must
|
||||
// start transitions for any of its longhand sub-properties that are animatable (or, for ‘all’, all animatable
|
||||
// properties), using the duration, delay, and timing function at the index corresponding to the shorthand.
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition:all, changing padding-left",
|
||||
|
@ -73,7 +73,7 @@
|
|||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.1s'
|
||||
'padding-left:0.1s'
|
||||
]
|
||||
}, {
|
||||
name: "transition:all, changing padding",
|
||||
|
@ -151,7 +151,7 @@
|
|||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -172,7 +172,7 @@
|
|||
'.container': {},
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: data.transitions}
|
||||
|
@ -206,4 +206,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transitions:all, changing padding-left from nothing / events": {},
|
||||
|
@ -43,7 +43,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -54,7 +54,7 @@
|
|||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transitions:all, changing padding-left from nothing",
|
||||
|
@ -62,7 +62,7 @@
|
|||
from: {}, // no padding === padding:0;
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.1s'
|
||||
'padding-left:0.1s'
|
||||
]
|
||||
}, {
|
||||
name: "transitions:all, changing padding from nothing",
|
||||
|
@ -77,7 +77,7 @@
|
|||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -98,7 +98,7 @@
|
|||
'.container': {},
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: data.transitions}
|
||||
|
@ -132,4 +132,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,10 +7,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -26,7 +26,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"duration: 0.1s, delay: -0.05s / events": {},
|
||||
|
@ -44,27 +44,27 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
-->
|
||||
|
||||
<script>
|
||||
// If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property
|
||||
// is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to
|
||||
// begin part-way through its play cycle. In the case where a transition has implied starting values and a negative
|
||||
// If the value for 'transition-delay' is a negative time offset then the transition will execute the moment the property
|
||||
// is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to
|
||||
// begin part-way through its play cycle. In the case where a transition has implied starting values and a negative
|
||||
// 'transition-delay', the starting values are taken from the moment the property is changed.
|
||||
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Define the combined duration of the transition as the sum of max(‘transition-duration’, ‘0s’) and ‘transition-delay’.
|
||||
// When the combined duration is greater than ‘0s’, then a transition starts based on the values of ‘transition-duration’,
|
||||
// Define the combined duration of the transition as the sum of max(‘transition-duration’, ‘0s’) and ‘transition-delay’.
|
||||
// When the combined duration is greater than ‘0s’, then a transition starts based on the values of ‘transition-duration’,
|
||||
// ‘transition-delay’, and ‘transition-timing-function’; in other cases transitions do not occur.
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "duration: 0.1s, delay: -0.05s",
|
||||
|
@ -72,7 +72,7 @@
|
|||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.1s'
|
||||
'padding-left:0.1s'
|
||||
]
|
||||
}, {
|
||||
name: "duration: 0.1s, delay: -0.1s",
|
||||
|
@ -80,11 +80,11 @@
|
|||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.1s'
|
||||
'padding-left:0.1s'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
];
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -105,7 +105,7 @@
|
|||
'.container': {},
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: data.transitions}
|
||||
|
@ -139,4 +139,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,10 +7,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -26,7 +26,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"repeating lists / events": {},
|
||||
|
@ -44,21 +44,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
-->
|
||||
|
||||
<script>
|
||||
// In the case where the lists of values in transition properties do not have the same length, the length of the
|
||||
// ‘transition-property’ list determines the number of items in each list examined when starting transitions.
|
||||
// In the case where the lists of values in transition properties do not have the same length, the length of the
|
||||
// ‘transition-property’ list determines the number of items in each list examined when starting transitions.
|
||||
// The lists are matched up from the first value: excess values at the end are not used.
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "repeating lists",
|
||||
|
@ -91,7 +91,7 @@
|
|||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -112,7 +112,7 @@
|
|||
'.container': {},
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {}
|
||||
|
@ -146,4 +146,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,10 +7,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -26,7 +26,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"property repetition / events": {},
|
||||
|
@ -45,21 +45,21 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
-->
|
||||
|
||||
<script>
|
||||
// If a property is specified multiple times in the value of ‘transition-property’ (either on its own, via a shorthand that
|
||||
// contains it, or via the ‘all’ value), then the transition that starts uses the duration, delay, and timing function at
|
||||
// If a property is specified multiple times in the value of ‘transition-property’ (either on its own, via a shorthand that
|
||||
// contains it, or via the ‘all’ value), then the transition that starts uses the duration, delay, and timing function at
|
||||
// the index corresponding to the last item in the value of ‘transition-property’ that calls for animating that property.
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "property repetition",
|
||||
|
@ -67,7 +67,7 @@
|
|||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.15s'
|
||||
'padding-left:0.15s'
|
||||
]
|
||||
}, {
|
||||
name: "padding, padding-left",
|
||||
|
@ -75,7 +75,7 @@
|
|||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.15s'
|
||||
'padding-left:0.15s'
|
||||
]
|
||||
}, {
|
||||
name: "padding-left, padding",
|
||||
|
@ -83,11 +83,11 @@
|
|||
from: {'padding-left': '1px'},
|
||||
to: {'padding-left': '10px'},
|
||||
expect: [
|
||||
'padding-left:0.15s'
|
||||
'padding-left:0.15s'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -108,7 +108,7 @@
|
|||
'.container': {},
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: data.transitions}
|
||||
|
@ -142,4 +142,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -8,10 +8,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-content/" rel="help" title="CSS3 Generated and Replaced Content Module">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -27,7 +27,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transition padding-left on :before / events": {},
|
||||
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -53,11 +53,11 @@
|
|||
|
||||
<script>
|
||||
// this is yet to be specified behavior
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition padding-left on :before",
|
||||
|
@ -81,7 +81,7 @@
|
|||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -131,4 +131,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -21,7 +21,7 @@
|
|||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transition within display:none / values": {},
|
||||
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -50,7 +50,7 @@
|
|||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition within display:none",
|
||||
|
@ -81,12 +81,12 @@
|
|||
'.container': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
|
||||
generalParallelTest.setup(data, options);
|
||||
generalParallelTest.addStyles(data, options, styles);
|
||||
},
|
||||
|
@ -130,4 +130,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,10 +7,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#animatable-css" rel="help" title="7.1. Properties from CSS">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -26,7 +26,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"background-color color(rgba) / values": {},
|
||||
|
@ -604,7 +604,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -614,7 +614,7 @@
|
|||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = getPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
|
@ -622,7 +622,7 @@
|
|||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -643,7 +643,7 @@
|
|||
'.container': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
|
@ -671,7 +671,7 @@
|
|||
assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.transition.computedStyle(data.property);
|
||||
|
@ -697,4 +697,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,10 +7,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#animatable-css" rel="help" title="7.1. Properties from CSS">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -26,7 +26,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"margin-bottom percentage(%) / values": {},
|
||||
|
@ -69,11 +69,11 @@
|
|||
<script>
|
||||
// this suite tests property value types that haven't been specified
|
||||
// (like <percentage> for margin-bottom)
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = getMissingPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
|
@ -81,10 +81,10 @@
|
|||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
||||
runParallelAsyncHarness({
|
||||
// array of test data
|
||||
tests: tests,
|
||||
|
@ -102,7 +102,7 @@
|
|||
'.container': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
|
@ -130,7 +130,7 @@
|
|||
assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.transition.computedStyle(data.property);
|
||||
|
@ -156,4 +156,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,10 +7,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#animatable-css" rel="help" title="7.1. Properties from CSS">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -26,7 +26,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"border-top-left-radius border-radius(px) / values": {},
|
||||
|
@ -244,7 +244,7 @@
|
|||
// see README.md for an explanation of how this test suite works
|
||||
// this suite tests properties that haven't been specified at all
|
||||
// (like background-image and column-rule-width)
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
@ -256,10 +256,10 @@
|
|||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
||||
runParallelAsyncHarness({
|
||||
// array of test data
|
||||
tests: tests,
|
||||
|
@ -277,7 +277,7 @@
|
|||
'.container': data.parentStyle,
|
||||
'.container.to': {},
|
||||
'.container.how': {},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : data.to,
|
||||
'.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
|
||||
|
@ -305,7 +305,7 @@
|
|||
assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.transition.computedStyle(data.property);
|
||||
|
@ -331,4 +331,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom " name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"margin-top auto(to) / values": {},
|
||||
|
@ -190,4 +190,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transitions" rel="help" title="2. Transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom " name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"background-position length-em(em) / values": {},
|
||||
|
@ -143,7 +143,7 @@
|
|||
data.to['font-size'] = '30px';
|
||||
// remove property from target style so it won't transition on its own
|
||||
delete data.to[data.property];
|
||||
|
||||
|
||||
var styles = {
|
||||
'.fixture': {},
|
||||
|
||||
|
@ -204,4 +204,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom " name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"background-color color(rgba) / values": {},
|
||||
|
@ -603,7 +603,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -611,13 +611,13 @@
|
|||
|
||||
<script>
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// it is inherited (directly or indirectly) from another element that is transitioning the same property.
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = getPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
|
@ -644,7 +644,7 @@
|
|||
// applied to #transition
|
||||
var inherited = extend({}, data.from);
|
||||
inherited[data.property] = 'inherit';
|
||||
|
||||
|
||||
var styles = {
|
||||
// as we're testing inheritance, #fixture is our new parent
|
||||
'.fixture': data.parentStyle,
|
||||
|
@ -658,7 +658,7 @@
|
|||
'.transition.to' : {},
|
||||
'.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'}
|
||||
};
|
||||
|
||||
|
||||
generalParallelTest.setup(data, options);
|
||||
generalParallelTest.addStyles(data, options, styles);
|
||||
},
|
||||
|
@ -681,7 +681,7 @@
|
|||
assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.transition.computedStyle(data.property);
|
||||
|
@ -707,4 +707,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom " name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"background-color color(rgba) / values": {},
|
||||
|
@ -603,7 +603,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -611,14 +611,14 @@
|
|||
|
||||
<script>
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// it is inherited (directly or indirectly) from another element that is transitioning the same property.
|
||||
// Note: Parent element doesn't transition, so above quote doesn't apply!
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = getPropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
|
@ -626,7 +626,7 @@
|
|||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -645,7 +645,7 @@
|
|||
// applied to #transition
|
||||
var inherited = extend({}, data.from);
|
||||
inherited[data.property] = 'inherit';
|
||||
|
||||
|
||||
var styles = {
|
||||
// as we're testing inheritance, #fixture is our new parent
|
||||
'.fixture': data.parentStyle,
|
||||
|
@ -682,7 +682,7 @@
|
|||
assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.transition.computedStyle(data.property);
|
||||
|
@ -708,4 +708,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,10 +6,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#starting" rel="help" title="3. Starting of transitions">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom " name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -25,7 +25,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"background-position length-em(em) / values": {},
|
||||
|
@ -101,7 +101,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -109,14 +109,14 @@
|
|||
|
||||
<script>
|
||||
// http://www.w3.org/TR/css3-transitions/#starting
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// Implementations also must not start a transition when the computed value changes because
|
||||
// it is inherited (directly or indirectly) from another element that is transitioning the same property.
|
||||
// Note: "indirectly" could mean "font-size" on parent, "em-based" on element
|
||||
|
||||
|
||||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = getFontSizeRelativePropertyTests();
|
||||
// for testing, limit to a couple of iterations
|
||||
// tests = tests.slice(10, 30);
|
||||
|
@ -124,7 +124,7 @@
|
|||
// tests = filterPropertyTests(tests, "background-color color(rgba)");
|
||||
// tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
|
||||
// tests = filterPropertyTests(tests, /^background-color/);
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -146,12 +146,12 @@
|
|||
var styles = {
|
||||
// as we're testing inheritance, #fixture is our new parent
|
||||
'.fixture': data.parentStyle,
|
||||
|
||||
|
||||
'.container': from,
|
||||
'.container.to': {'font-size': '30px'},
|
||||
// transition font-size on parent
|
||||
'.container.how': {transition: 'font-size ' + duration + ' linear 0s'},
|
||||
|
||||
|
||||
'.transition': data.from,
|
||||
'.transition.to' : {},
|
||||
// transition font-size dependent property on child
|
||||
|
@ -180,7 +180,7 @@
|
|||
assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.transition.computedStyle(data.property);
|
||||
|
@ -206,4 +206,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -8,10 +8,10 @@
|
|||
<link href="http://www.w3.org/TR/css3-content/" rel="help" title="CSS3 Generated and Replaced Content Module">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
<script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
|
||||
|
@ -27,7 +27,7 @@
|
|||
height: 100000px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"transition padding-left on :before / values": {},
|
||||
|
@ -47,7 +47,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="offscreen"></div>
|
||||
|
||||
|
||||
<!--
|
||||
SEE ./support/README.md for an abstract explanation of the test procedure
|
||||
http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
|
||||
|
@ -58,7 +58,7 @@
|
|||
// this test takes its time, give it a minute to run
|
||||
var timeout = 60000;
|
||||
setup({timeout: timeout});
|
||||
|
||||
|
||||
var tests = [
|
||||
{
|
||||
name: "transition padding-left on :before",
|
||||
|
@ -90,7 +90,7 @@
|
|||
to: {'padding-left': '10px', 'content': '"2"'}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// general transition-duration
|
||||
var duration = '0.5s';
|
||||
|
||||
|
@ -106,7 +106,7 @@
|
|||
// prepare individual test
|
||||
setup: function(data, options) {
|
||||
generalParallelTest.setup(data, options);
|
||||
|
||||
|
||||
var styles = {};
|
||||
styles['.fixture'] = {};
|
||||
styles['.container'] = data.parentStyle;
|
||||
|
@ -138,7 +138,7 @@
|
|||
assert_not_equals(data.pseudo.from, data.pseudo.to, "initial and target values may not match");
|
||||
// kick off the transition
|
||||
generalParallelTest.startTransition(data);
|
||||
|
||||
|
||||
// make sure we didn't get the target value immediately.
|
||||
// If we did, there wouldn't be a transition!
|
||||
var current = data.pseudo.computedStyle(data.property);
|
||||
|
@ -155,4 +155,5 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -14,7 +14,7 @@ var suite = root.generalParallelTest = {
|
|||
data.fixture = document.getElementById('fixture').cloneNode(true);
|
||||
data.fixture.id = 'test-' + (index++);
|
||||
(document.getElementById('offscreen') || document.body).appendChild(data.fixture);
|
||||
|
||||
|
||||
// data container for #fixture > .container > .transition
|
||||
data.transition = {
|
||||
node: data.fixture.querySelector('.transition'),
|
||||
|
@ -34,7 +34,7 @@ var suite = root.generalParallelTest = {
|
|||
return computedStyle(data.container.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// data container for #fixture > .container > .transition[:before | :after]
|
||||
if (data.pseudo) {
|
||||
data.pseudo = {
|
||||
|
@ -92,13 +92,13 @@ var suite = root.generalParallelTest = {
|
|||
if (!options.styles) {
|
||||
options.styles = {};
|
||||
}
|
||||
|
||||
|
||||
Object.keys(styles).forEach(function(key) {
|
||||
var selector = '#' + data.fixture.id
|
||||
// fixture must become #fixture.fixture rather than a child selector
|
||||
+ (key.substring(0, 8) === '.fixture' ? '' : ' ')
|
||||
+ key;
|
||||
|
||||
|
||||
options.styles[selector] = styles[key];
|
||||
});
|
||||
},
|
||||
|
@ -109,7 +109,7 @@ var suite = root.generalParallelTest = {
|
|||
suite._getStyleFor(data, 'from');
|
||||
// apply target state
|
||||
suite._addClass(data, 'to', true);
|
||||
// grab current styles: "target state"
|
||||
// grab current styles: "target state"
|
||||
suite._getStyleFor(data, 'to');
|
||||
// remove target state
|
||||
suite._removeClass(data, 'to', true);
|
||||
|
@ -157,7 +157,7 @@ var suite = root.generalParallelTest = {
|
|||
var raf = window.requestAnimationFrame || function(callback){
|
||||
setTimeout(callback, 20);
|
||||
};
|
||||
|
||||
|
||||
// flag denoting if the runLoop should continue (true) or exit (false)
|
||||
options._collectValues = true;
|
||||
|
||||
|
@ -166,19 +166,19 @@ var suite = root.generalParallelTest = {
|
|||
// test's are done, stop annoying the CPU
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// collect current style for test's elements
|
||||
options.tests.forEach(function(data) {
|
||||
if (!data.property) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
['transition', 'container', 'pseudo'].forEach(function(elem) {
|
||||
var pseudo = null;
|
||||
if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var current = data[elem].computedStyle(data.property);
|
||||
var values = data[elem].values;
|
||||
var length = values.length;
|
||||
|
@ -187,11 +187,11 @@ var suite = root.generalParallelTest = {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// rinse and repeat
|
||||
raf(runLoop);
|
||||
}
|
||||
|
||||
|
||||
runLoop();
|
||||
},
|
||||
// stop requestAnimationFrame runLoop collecting computed values
|
||||
|
@ -222,7 +222,7 @@ var suite = root.generalParallelTest = {
|
|||
assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem);
|
||||
assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem);
|
||||
}
|
||||
|
||||
|
||||
// TODO: first value must be initial, last value must be target
|
||||
};
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
//
|
||||
//
|
||||
// Simple Helper Functions For Testing CSS
|
||||
//
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
@ -17,7 +17,7 @@ root.setStyle = function(selector, styles) {
|
|||
target.type = "text/css";
|
||||
document.getElementsByTagName('head')[0].appendChild(target);
|
||||
}
|
||||
|
||||
|
||||
var data = [];
|
||||
// single selector/styles
|
||||
if (typeof selector === 'string' && styles !== undefined) {
|
||||
|
@ -44,7 +44,7 @@ function serializeStyles(styles) {
|
|||
data.push(prefixedProperty + ":" + styles[property] + ";");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return data.join('\n');
|
||||
}
|
||||
|
||||
|
|
|
@ -114,7 +114,7 @@ var values = {
|
|||
data: ['url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=)', 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)'],
|
||||
// A hunch, as from the spec:
|
||||
// http://www.w3.org/TR/css3-transitions/#animatable-types
|
||||
// gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.
|
||||
// gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.
|
||||
gradient: [prefix + 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)', prefix + 'linear-gradient(top, #bada55, hsl(0, 80%, 70%))']
|
||||
};
|
||||
},
|
||||
|
@ -171,39 +171,39 @@ var values = {
|
|||
var properties = {
|
||||
'background-color': ['color'],
|
||||
'background-position': ['length', 'percentage'],
|
||||
|
||||
|
||||
'border-top-width': ['length'],
|
||||
'border-right-width': ['length'],
|
||||
'border-bottom-width': ['length'],
|
||||
'border-left-width': ['length'],
|
||||
|
||||
|
||||
'border-top-color': ['color'],
|
||||
'border-right-color': ['color'],
|
||||
'border-bottom-color': ['color'],
|
||||
'border-left-color': ['color'],
|
||||
|
||||
|
||||
'padding-bottom': ['length'],
|
||||
'padding-left': ['length'],
|
||||
'padding-right': ['length'],
|
||||
'padding-top': ['length'],
|
||||
|
||||
|
||||
'margin-bottom': ['length'],
|
||||
'margin-left': ['length'],
|
||||
'margin-right': ['length'],
|
||||
'margin-top': ['length'],
|
||||
|
||||
|
||||
'height': ['length', 'percentage'],
|
||||
'width': ['length', 'percentage'],
|
||||
'min-height': ['length', 'percentage'],
|
||||
'min-width': ['length', 'percentage'],
|
||||
'max-height': ['length', 'percentage'],
|
||||
'max-width': ['length', 'percentage'],
|
||||
|
||||
|
||||
'top': ['length', 'percentage'],
|
||||
'right': ['length', 'percentage'],
|
||||
'bottom': ['length', 'percentage'],
|
||||
'left': ['length', 'percentage'],
|
||||
|
||||
|
||||
'color': ['color'],
|
||||
'font-size': ['length', 'percentage'],
|
||||
'font-weight': ['font-weight'],
|
||||
|
@ -214,16 +214,16 @@ var properties = {
|
|||
'word-spacing': ['length', 'percentage'],
|
||||
'text-indent': ['length', 'percentage'],
|
||||
'text-shadow': ['shadow'],
|
||||
|
||||
|
||||
'outline-color': ['color'],
|
||||
// outline-offset <integer> used to be an error in the spec
|
||||
'outline-offset': ['length'],
|
||||
'outline-width': ['length'],
|
||||
|
||||
|
||||
'clip': ['rectangle'],
|
||||
// Note: doesn't seem implemented anywhere
|
||||
'crop': ['rectangle'],
|
||||
|
||||
|
||||
'vertical-align': ['length', 'percentage'],
|
||||
'opacity': ['number[0,1]'],
|
||||
'visibility': ['visibility'],
|
||||
|
@ -279,7 +279,7 @@ var unspecified_properties = {
|
|||
'background-image': ['image'],
|
||||
'background-size': ['background-size'],
|
||||
// https://drafts.csswg.org/css3-background/#the-box-shadow
|
||||
// Animatable: yes, except between inner and outer shadows (Transition to/from an absent shadow is a transition to/from ‘0 0 transparent’ or ‘0 0 transparent inset’, as appropriate.)
|
||||
// Animatable: yes, except between inner and outer shadows (Transition to/from an absent shadow is a transition to/from ‘0 0 transparent’ or ‘0 0 transparent inset’, as appropriate.)
|
||||
'box-shadow': ['box-shadow'],
|
||||
'font-size-adjust': ['number'],
|
||||
'font-stretch': ['font-stretch'],
|
||||
|
@ -342,7 +342,7 @@ var parent_styles = {
|
|||
// unspecified properties
|
||||
'position': {'position': 'relative', 'width': '100px', 'height': '100px'},
|
||||
// inheritance tests
|
||||
'top': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'top': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'right': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'bottom': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'left': {'width': '100px', 'height': '100px', 'position': 'relative'}
|
||||
|
@ -375,7 +375,7 @@ function assemble(props) {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return tests;
|
||||
}
|
||||
|
||||
|
@ -393,23 +393,23 @@ root.getUnspecifiedPropertyTests = function() {
|
|||
|
||||
root.getFontSizeRelativePropertyTests = function() {
|
||||
var accepted = {};
|
||||
|
||||
|
||||
for (var key in properties) {
|
||||
if (!Object.prototype.hasOwnProperty.call(properties, key) || key === "font-size") {
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
if (properties[key].indexOf('length') > -1) {
|
||||
accepted[key] = ['length-em'];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return assemble(accepted);
|
||||
};
|
||||
|
||||
root.getAutoPropertyTests = function() {
|
||||
var accepted = {};
|
||||
|
||||
|
||||
for (var i = 0, key; key = properties_auto[i]; i++) {
|
||||
accepted[key] = ['auto'];
|
||||
}
|
||||
|
@ -420,17 +420,17 @@ root.getAutoPropertyTests = function() {
|
|||
root.filterPropertyTests = function(tests, names) {
|
||||
var allowed = {};
|
||||
var accepted = [];
|
||||
|
||||
|
||||
if (typeof names === "string") {
|
||||
names = [names];
|
||||
}
|
||||
|
||||
|
||||
if (!(names instanceof RegExp)) {
|
||||
names.forEach(function(name) {
|
||||
allowed[name] = true;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
tests.forEach(function(test) {
|
||||
if (names instanceof RegExp) {
|
||||
if (!test.name.match(names)) {
|
||||
|
@ -439,11 +439,11 @@ root.filterPropertyTests = function(tests, names) {
|
|||
} else if (!allowed[test.name]) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
accepted.push(test);
|
||||
});
|
||||
|
||||
|
||||
return accepted;
|
||||
};
|
||||
|
||||
})(window);
|
||||
})(window);
|
||||
|
|
|
@ -13,13 +13,13 @@
|
|||
{name: "name of test 2", custom: "data"},
|
||||
// ...
|
||||
],
|
||||
|
||||
|
||||
// number of tests (tests, not test-cases!) to run concurrently
|
||||
testsPerSlice: 100,
|
||||
|
||||
// time in milliseconds a test-run takes
|
||||
duration: 1000,
|
||||
|
||||
|
||||
// test-cases to run for for the test - there must be at least one
|
||||
// each case creates its separate async_test() instance
|
||||
cases: {
|
||||
|
@ -33,17 +33,17 @@
|
|||
},
|
||||
// ...
|
||||
}
|
||||
|
||||
|
||||
// all callbacks are optional:
|
||||
|
||||
|
||||
// invoked for individual test before it starts so you can setup the environment
|
||||
// like DOM, CSS, adding event listeners and such
|
||||
setup: function(data, options){},
|
||||
|
||||
|
||||
// invoked after a test ended, so you can clean up the environment
|
||||
// like DOM, CSS, removing event listeners and such
|
||||
teardown: function(data, options){},
|
||||
|
||||
|
||||
// invoked before a batch of tests ("slice") are run concurrently
|
||||
// tests is an array of test data objects
|
||||
sliceStart: function(options, tests)
|
||||
|
@ -60,22 +60,22 @@ root.runParallelAsyncHarness = function(options) {
|
|||
if (!options.cases) {
|
||||
throw new Error("Options don't contain test cases!");
|
||||
}
|
||||
|
||||
|
||||
var noop = function(){};
|
||||
|
||||
|
||||
// add a 100ms buffer to the test timeout, just in case
|
||||
var duration = Math.ceil(options.duration + 100);
|
||||
|
||||
|
||||
// names of individual tests
|
||||
var cases = Object.keys(options.cases);
|
||||
|
||||
|
||||
// run tests in a batch of slices
|
||||
// primarily not to overload weak devices (tablets, phones, …)
|
||||
// primarily not to overload weak devices (tablets, phones, …)
|
||||
// with too many tests running simultaneously
|
||||
var iteration = -1;
|
||||
var testPerSlice = options.testsPerSlice || 100;
|
||||
var slices = Math.ceil(options.tests.length / testPerSlice);
|
||||
|
||||
|
||||
// initialize all async test cases
|
||||
// Note: satisfying testharness.js needs to know all async tests before load-event
|
||||
options.tests.forEach(function(data, index) {
|
||||
|
@ -84,7 +84,7 @@ root.runParallelAsyncHarness = function(options) {
|
|||
data.cases[name] = async_test(data.name + " / " + name, {timeout: options.timeout || 60000});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function runLoop() {
|
||||
iteration++;
|
||||
if (iteration >= slices) {
|
||||
|
@ -92,7 +92,7 @@ root.runParallelAsyncHarness = function(options) {
|
|||
(options.done || noop)(options);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// grab a slice of testss and initialize them
|
||||
var offset = iteration * testPerSlice;
|
||||
var tests = options.tests.slice(offset, offset + testPerSlice);
|
||||
|
@ -100,10 +100,10 @@ root.runParallelAsyncHarness = function(options) {
|
|||
(options.setup || noop)(data, options);
|
||||
|
||||
});
|
||||
|
||||
|
||||
// kick off the current slice of tests
|
||||
(options.sliceStart || noop)(options, tests);
|
||||
|
||||
|
||||
// perform individual "start" test-case
|
||||
tests.forEach(function(data) {
|
||||
cases.forEach(function(name) {
|
||||
|
@ -112,7 +112,7 @@ root.runParallelAsyncHarness = function(options) {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// conclude test (possibly abort)
|
||||
setTimeout(function() {
|
||||
tests.forEach(function(data) {
|
||||
|
@ -129,17 +129,17 @@ root.runParallelAsyncHarness = function(options) {
|
|||
data.cases[name].done();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// finish the test for current slice of tests
|
||||
(options.sliceDone || noop)(options, tests);
|
||||
|
||||
|
||||
// next test please, give the browser 50ms to do catch its breath
|
||||
setTimeout(runLoop, 50);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
|
||||
// allow DOMContentLoaded before actually doing something
|
||||
setTimeout(runLoop, 100);
|
||||
};
|
||||
|
||||
})(window);
|
||||
})(window);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
//
|
||||
//
|
||||
// Vendor-Prefix Helper Functions For Testing CSS
|
||||
//
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
@ -21,7 +21,7 @@ root.addVendorPrefix = function (name) {
|
|||
// property unknown to browser
|
||||
return name;
|
||||
}
|
||||
|
||||
|
||||
return prefix + name;
|
||||
};
|
||||
|
||||
|
@ -32,7 +32,7 @@ root.addValueVendorPrefix = function (property, value) {
|
|||
// property unknown to browser
|
||||
return name;
|
||||
}
|
||||
|
||||
|
||||
return prefix + value;
|
||||
};
|
||||
|
||||
|
@ -41,7 +41,7 @@ root.getVendorPrefix = function(name) {
|
|||
if (prefixCache[name] !== undefined) {
|
||||
return prefixCache[name];
|
||||
}
|
||||
|
||||
|
||||
var elem = document.createElement("div");
|
||||
name = camelCase(name);
|
||||
|
||||
|
@ -78,9 +78,9 @@ root.getValueVendorPrefix = function(property, value) {
|
|||
return styles[i];
|
||||
}
|
||||
}
|
||||
document.body.removeChild(elem);
|
||||
document.body.removeChild(elem);
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
})(window);
|
||||
})(window);
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
|
||||
|
||||
transition-property: width;
|
||||
transition-duration: 0;
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ var suite = root.generalParallelTest = {
|
|||
data.fixture = document.getElementById('fixture').cloneNode(true);
|
||||
data.fixture.id = 'test-' + (index++);
|
||||
(document.getElementById('offscreen') || document.body).appendChild(data.fixture);
|
||||
|
||||
|
||||
// data container for #fixture > .container > .transition
|
||||
data.transition = {
|
||||
node: data.fixture.querySelector('.transition'),
|
||||
|
@ -34,7 +34,7 @@ var suite = root.generalParallelTest = {
|
|||
return computedStyle(data.container.node, property);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// data container for #fixture > .container > .transition[:before | :after]
|
||||
if (data.pseudo) {
|
||||
data.pseudo = {
|
||||
|
@ -92,13 +92,13 @@ var suite = root.generalParallelTest = {
|
|||
if (!options.styles) {
|
||||
options.styles = {};
|
||||
}
|
||||
|
||||
|
||||
Object.keys(styles).forEach(function(key) {
|
||||
var selector = '#' + data.fixture.id
|
||||
// fixture must become #fixture.fixture rather than a child selector
|
||||
+ (key.substring(0, 8) === '.fixture' ? '' : ' ')
|
||||
+ key;
|
||||
|
||||
|
||||
options.styles[selector] = styles[key];
|
||||
});
|
||||
},
|
||||
|
@ -109,7 +109,7 @@ var suite = root.generalParallelTest = {
|
|||
suite._getStyleFor(data, 'from');
|
||||
// apply target state
|
||||
suite._addClass(data, 'to', true);
|
||||
// grab current styles: "target state"
|
||||
// grab current styles: "target state"
|
||||
suite._getStyleFor(data, 'to');
|
||||
// remove target state
|
||||
suite._removeClass(data, 'to', true);
|
||||
|
@ -157,7 +157,7 @@ var suite = root.generalParallelTest = {
|
|||
var raf = window.requestAnimationFrame || function(callback){
|
||||
setTimeout(callback, 20);
|
||||
};
|
||||
|
||||
|
||||
// flag denoting if the runLoop should continue (true) or exit (false)
|
||||
options._collectValues = true;
|
||||
|
||||
|
@ -166,19 +166,19 @@ var suite = root.generalParallelTest = {
|
|||
// test's are done, stop annoying the CPU
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// collect current style for test's elements
|
||||
options.tests.forEach(function(data) {
|
||||
if (!data.property) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
['transition', 'container', 'pseudo'].forEach(function(elem) {
|
||||
var pseudo = null;
|
||||
if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var current = data[elem].computedStyle(data.property);
|
||||
var values = data[elem].values;
|
||||
var length = values.length;
|
||||
|
@ -187,11 +187,11 @@ var suite = root.generalParallelTest = {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// rinse and repeat
|
||||
raf(runLoop);
|
||||
}
|
||||
|
||||
|
||||
runLoop();
|
||||
},
|
||||
// stop requestAnimationFrame runLoop collecting computed values
|
||||
|
@ -222,7 +222,7 @@ var suite = root.generalParallelTest = {
|
|||
assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem);
|
||||
assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem);
|
||||
}
|
||||
|
||||
|
||||
// TODO: first value must be initial, last value must be target
|
||||
};
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
//
|
||||
//
|
||||
// Simple Helper Functions For Testing CSS
|
||||
//
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
@ -17,7 +17,7 @@ root.setStyle = function(selector, styles) {
|
|||
target.type = "text/css";
|
||||
document.getElementsByTagName('head')[0].appendChild(target);
|
||||
}
|
||||
|
||||
|
||||
var data = [];
|
||||
// single selector/styles
|
||||
if (typeof selector === 'string' && styles !== undefined) {
|
||||
|
@ -44,7 +44,7 @@ function serializeStyles(styles) {
|
|||
data.push(prefixedProperty + ":" + styles[property] + ";");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return data.join('\n');
|
||||
}
|
||||
|
||||
|
|
|
@ -114,7 +114,7 @@ var values = {
|
|||
data: ['url(data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=)', 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)'],
|
||||
// A hunch, as from the spec:
|
||||
// http://www.w3.org/TR/css3-transitions/#animatable-types
|
||||
// gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.
|
||||
// gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.
|
||||
gradient: [prefix + 'linear-gradient(top, hsl(0, 80%, 70%), #bada55)', prefix + 'linear-gradient(top, #bada55, hsl(0, 80%, 70%))']
|
||||
};
|
||||
},
|
||||
|
@ -171,39 +171,39 @@ var values = {
|
|||
var properties = {
|
||||
'background-color': ['color'],
|
||||
'background-position': ['length', 'percentage'],
|
||||
|
||||
|
||||
'border-top-width': ['length'],
|
||||
'border-right-width': ['length'],
|
||||
'border-bottom-width': ['length'],
|
||||
'border-left-width': ['length'],
|
||||
|
||||
|
||||
'border-top-color': ['color'],
|
||||
'border-right-color': ['color'],
|
||||
'border-bottom-color': ['color'],
|
||||
'border-left-color': ['color'],
|
||||
|
||||
|
||||
'padding-bottom': ['length'],
|
||||
'padding-left': ['length'],
|
||||
'padding-right': ['length'],
|
||||
'padding-top': ['length'],
|
||||
|
||||
|
||||
'margin-bottom': ['length'],
|
||||
'margin-left': ['length'],
|
||||
'margin-right': ['length'],
|
||||
'margin-top': ['length'],
|
||||
|
||||
|
||||
'height': ['length', 'percentage'],
|
||||
'width': ['length', 'percentage'],
|
||||
'min-height': ['length', 'percentage'],
|
||||
'min-width': ['length', 'percentage'],
|
||||
'max-height': ['length', 'percentage'],
|
||||
'max-width': ['length', 'percentage'],
|
||||
|
||||
|
||||
'top': ['length', 'percentage'],
|
||||
'right': ['length', 'percentage'],
|
||||
'bottom': ['length', 'percentage'],
|
||||
'left': ['length', 'percentage'],
|
||||
|
||||
|
||||
'color': ['color'],
|
||||
'font-size': ['length', 'percentage'],
|
||||
'font-weight': ['font-weight'],
|
||||
|
@ -214,16 +214,16 @@ var properties = {
|
|||
'word-spacing': ['length', 'percentage'],
|
||||
'text-indent': ['length', 'percentage'],
|
||||
'text-shadow': ['shadow'],
|
||||
|
||||
|
||||
'outline-color': ['color'],
|
||||
// outline-offset <integer> used to be an error in the spec
|
||||
'outline-offset': ['length'],
|
||||
'outline-width': ['length'],
|
||||
|
||||
|
||||
'clip': ['rectangle'],
|
||||
// Note: doesn't seem implemented anywhere
|
||||
'crop': ['rectangle'],
|
||||
|
||||
|
||||
'vertical-align': ['length', 'percentage'],
|
||||
'opacity': ['number[0,1]'],
|
||||
'visibility': ['visibility'],
|
||||
|
@ -279,7 +279,7 @@ var unspecified_properties = {
|
|||
'background-image': ['image'],
|
||||
'background-size': ['background-size'],
|
||||
// https://drafts.csswg.org/css3-background/#the-box-shadow
|
||||
// Animatable: yes, except between inner and outer shadows (Transition to/from an absent shadow is a transition to/from ‘0 0 transparent’ or ‘0 0 transparent inset’, as appropriate.)
|
||||
// Animatable: yes, except between inner and outer shadows (Transition to/from an absent shadow is a transition to/from ‘0 0 transparent’ or ‘0 0 transparent inset’, as appropriate.)
|
||||
'box-shadow': ['box-shadow'],
|
||||
'font-size-adjust': ['number'],
|
||||
'font-stretch': ['font-stretch'],
|
||||
|
@ -342,7 +342,7 @@ var parent_styles = {
|
|||
// unspecified properties
|
||||
'position': {'position': 'relative', 'width': '100px', 'height': '100px'},
|
||||
// inheritance tests
|
||||
'top': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'top': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'right': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'bottom': {'width': '100px', 'height': '100px', 'position': 'relative'},
|
||||
'left': {'width': '100px', 'height': '100px', 'position': 'relative'}
|
||||
|
@ -375,7 +375,7 @@ function assemble(props) {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
return tests;
|
||||
}
|
||||
|
||||
|
@ -393,23 +393,23 @@ root.getUnspecifiedPropertyTests = function() {
|
|||
|
||||
root.getFontSizeRelativePropertyTests = function() {
|
||||
var accepted = {};
|
||||
|
||||
|
||||
for (var key in properties) {
|
||||
if (!Object.prototype.hasOwnProperty.call(properties, key) || key === "font-size") {
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
if (properties[key].indexOf('length') > -1) {
|
||||
accepted[key] = ['length-em'];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return assemble(accepted);
|
||||
};
|
||||
|
||||
root.getAutoPropertyTests = function() {
|
||||
var accepted = {};
|
||||
|
||||
|
||||
for (var i = 0, key; key = properties_auto[i]; i++) {
|
||||
accepted[key] = ['auto'];
|
||||
}
|
||||
|
@ -420,17 +420,17 @@ root.getAutoPropertyTests = function() {
|
|||
root.filterPropertyTests = function(tests, names) {
|
||||
var allowed = {};
|
||||
var accepted = [];
|
||||
|
||||
|
||||
if (typeof names === "string") {
|
||||
names = [names];
|
||||
}
|
||||
|
||||
|
||||
if (!(names instanceof RegExp)) {
|
||||
names.forEach(function(name) {
|
||||
allowed[name] = true;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
tests.forEach(function(test) {
|
||||
if (names instanceof RegExp) {
|
||||
if (!test.name.match(names)) {
|
||||
|
@ -439,11 +439,11 @@ root.filterPropertyTests = function(tests, names) {
|
|||
} else if (!allowed[test.name]) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
accepted.push(test);
|
||||
});
|
||||
|
||||
|
||||
return accepted;
|
||||
};
|
||||
|
||||
})(window);
|
||||
})(window);
|
||||
|
|
|
@ -13,13 +13,13 @@
|
|||
{name: "name of test 2", custom: "data"},
|
||||
// ...
|
||||
],
|
||||
|
||||
|
||||
// number of tests (tests, not test-cases!) to run concurrently
|
||||
testsPerSlice: 100,
|
||||
|
||||
// time in milliseconds a test-run takes
|
||||
duration: 1000,
|
||||
|
||||
|
||||
// test-cases to run for for the test - there must be at least one
|
||||
// each case creates its separate async_test() instance
|
||||
cases: {
|
||||
|
@ -33,17 +33,17 @@
|
|||
},
|
||||
// ...
|
||||
}
|
||||
|
||||
|
||||
// all callbacks are optional:
|
||||
|
||||
|
||||
// invoked for individual test before it starts so you can setup the environment
|
||||
// like DOM, CSS, adding event listeners and such
|
||||
setup: function(data, options){},
|
||||
|
||||
|
||||
// invoked after a test ended, so you can clean up the environment
|
||||
// like DOM, CSS, removing event listeners and such
|
||||
teardown: function(data, options){},
|
||||
|
||||
|
||||
// invoked before a batch of tests ("slice") are run concurrently
|
||||
// tests is an array of test data objects
|
||||
sliceStart: function(options, tests)
|
||||
|
@ -60,22 +60,22 @@ root.runParallelAsyncHarness = function(options) {
|
|||
if (!options.cases) {
|
||||
throw new Error("Options don't contain test cases!");
|
||||
}
|
||||
|
||||
|
||||
var noop = function(){};
|
||||
|
||||
|
||||
// add a 100ms buffer to the test timeout, just in case
|
||||
var duration = Math.ceil(options.duration + 100);
|
||||
|
||||
|
||||
// names of individual tests
|
||||
var cases = Object.keys(options.cases);
|
||||
|
||||
|
||||
// run tests in a batch of slices
|
||||
// primarily not to overload weak devices (tablets, phones, …)
|
||||
// primarily not to overload weak devices (tablets, phones, …)
|
||||
// with too many tests running simultaneously
|
||||
var iteration = -1;
|
||||
var testPerSlice = options.testsPerSlice || 100;
|
||||
var slices = Math.ceil(options.tests.length / testPerSlice);
|
||||
|
||||
|
||||
// initialize all async test cases
|
||||
// Note: satisfying testharness.js needs to know all async tests before load-event
|
||||
options.tests.forEach(function(data, index) {
|
||||
|
@ -84,7 +84,7 @@ root.runParallelAsyncHarness = function(options) {
|
|||
data.cases[name] = async_test(data.name + " / " + name, {timeout: options.timeout || 60000});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function runLoop() {
|
||||
iteration++;
|
||||
if (iteration >= slices) {
|
||||
|
@ -92,7 +92,7 @@ root.runParallelAsyncHarness = function(options) {
|
|||
(options.done || noop)(options);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// grab a slice of testss and initialize them
|
||||
var offset = iteration * testPerSlice;
|
||||
var tests = options.tests.slice(offset, offset + testPerSlice);
|
||||
|
@ -100,10 +100,10 @@ root.runParallelAsyncHarness = function(options) {
|
|||
(options.setup || noop)(data, options);
|
||||
|
||||
});
|
||||
|
||||
|
||||
// kick off the current slice of tests
|
||||
(options.sliceStart || noop)(options, tests);
|
||||
|
||||
|
||||
// perform individual "start" test-case
|
||||
tests.forEach(function(data) {
|
||||
cases.forEach(function(name) {
|
||||
|
@ -112,7 +112,7 @@ root.runParallelAsyncHarness = function(options) {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// conclude test (possibly abort)
|
||||
setTimeout(function() {
|
||||
tests.forEach(function(data) {
|
||||
|
@ -129,17 +129,17 @@ root.runParallelAsyncHarness = function(options) {
|
|||
data.cases[name].done();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// finish the test for current slice of tests
|
||||
(options.sliceDone || noop)(options, tests);
|
||||
|
||||
|
||||
// next test please, give the browser 50ms to do catch its breath
|
||||
setTimeout(runLoop, 50);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
|
||||
// allow DOMContentLoaded before actually doing something
|
||||
setTimeout(runLoop, 100);
|
||||
};
|
||||
|
||||
})(window);
|
||||
})(window);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
//
|
||||
//
|
||||
// Vendor-Prefix Helper Functions For Testing CSS
|
||||
//
|
||||
//
|
||||
|
||||
(function(root) {
|
||||
'use strict';
|
||||
|
@ -21,7 +21,7 @@ root.addVendorPrefix = function (name) {
|
|||
// property unknown to browser
|
||||
return name;
|
||||
}
|
||||
|
||||
|
||||
return prefix + name;
|
||||
};
|
||||
|
||||
|
@ -32,7 +32,7 @@ root.addValueVendorPrefix = function (property, value) {
|
|||
// property unknown to browser
|
||||
return name;
|
||||
}
|
||||
|
||||
|
||||
return prefix + value;
|
||||
};
|
||||
|
||||
|
@ -41,7 +41,7 @@ root.getVendorPrefix = function(name) {
|
|||
if (prefixCache[name] !== undefined) {
|
||||
return prefixCache[name];
|
||||
}
|
||||
|
||||
|
||||
var elem = document.createElement("div");
|
||||
name = camelCase(name);
|
||||
|
||||
|
@ -78,9 +78,9 @@ root.getValueVendorPrefix = function(property, value) {
|
|||
return styles[i];
|
||||
}
|
||||
}
|
||||
document.body.removeChild(elem);
|
||||
document.body.removeChild(elem);
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
})(window);
|
||||
})(window);
|
||||
|
|
|
@ -6,13 +6,13 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-shorthand-property" rel="help" title="2.5. The 'transition' Shorthand Property">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse '1s'": {},
|
||||
|
@ -42,9 +42,9 @@
|
|||
var transition = document.getElementById('transition');
|
||||
var ease = 'cubic-bezier(0.25, 0.1, 0.25, 1)';
|
||||
var easeIn = 'cubic-bezier(0.42, 0, 1, 1)';
|
||||
// Note that order is important in this property. The first value that can be parsed as a time is assigned to
|
||||
// the transition-duration. The second value that can be parsed as a time is assigned to transition-delay.
|
||||
// [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*
|
||||
// Note that order is important in this property. The first value that can be parsed as a time is assigned to
|
||||
// the transition-duration. The second value that can be parsed as a time is assigned to transition-delay.
|
||||
// [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*
|
||||
var values = {
|
||||
// [property, duration, timing, delay]
|
||||
// random order
|
||||
|
@ -61,7 +61,7 @@
|
|||
'width ease-in 1s 2s' : ["width", "1s", easeIn, "2s"],
|
||||
'width .1s ease-in .2s' : ["width", "0.1s", easeIn, "0.2s"]
|
||||
};
|
||||
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
|
@ -78,4 +78,5 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,13 +7,13 @@
|
|||
<link href="http://www.w3.org/TR/css3-values/#time" rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse '10.2s'": {},
|
||||
|
@ -50,7 +50,7 @@
|
|||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
// <time> [, <time>]*
|
||||
// <time> [, <time>]*
|
||||
var values = {
|
||||
// seconds
|
||||
'10.2s': '10.2s',
|
||||
|
@ -79,13 +79,13 @@
|
|||
// invalid
|
||||
'foobar': '0s'
|
||||
};
|
||||
|
||||
|
||||
// these tests are supposed to fail and
|
||||
// possibly make the engine issue a parser warning
|
||||
var invalidTests = {
|
||||
'foobar': true
|
||||
};
|
||||
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
|
@ -103,4 +103,5 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -7,13 +7,13 @@
|
|||
<link href="http://www.w3.org/TR/css3-values/#time" rel="help" title="CSS Values and Units Module Level 3 - 6.2. Times: the ‘<time>’ type and ‘s’, ‘ms’ units">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse '10.2s'": {},
|
||||
|
@ -50,7 +50,7 @@
|
|||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
// <time> [, <time>]*
|
||||
// <time> [, <time>]*
|
||||
var values = {
|
||||
// seconds
|
||||
'10.2s': '10.2s',
|
||||
|
@ -78,7 +78,7 @@
|
|||
// invalid
|
||||
'foobar': '0s'
|
||||
};
|
||||
|
||||
|
||||
// these tests are supposed to fail and
|
||||
// possibly make the engine issue a parser warning
|
||||
var invalidTests = {
|
||||
|
@ -86,7 +86,7 @@
|
|||
'-500ms': true,
|
||||
'foobar': true
|
||||
};
|
||||
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
|
@ -104,4 +104,5 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,13 +6,13 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-property-property" rel="help" title="2.1. The 'transition-property' Property">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse 'none'": {},
|
||||
|
@ -33,12 +33,12 @@
|
|||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
|
||||
// syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]*
|
||||
|
||||
// syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]*
|
||||
var values = [
|
||||
'none', 'all', 'width', 'all, width', 'width, all'
|
||||
];
|
||||
|
||||
|
||||
for (var i = 0, value; value = values[i]; i++) {
|
||||
test(function() {
|
||||
setStyle('#transition', {
|
||||
|
@ -50,4 +50,5 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -9,10 +9,10 @@
|
|||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse 'none, all'": {},
|
||||
|
@ -35,18 +35,18 @@
|
|||
|
||||
<script>
|
||||
var transition = document.getElementById('transition');
|
||||
|
||||
// syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]*
|
||||
|
||||
// syntax: none | [ all | <IDENT> ] [ ‘,’ [ all | <IDENT> ] ]*
|
||||
var values = {
|
||||
'none, all' : 'none, all',
|
||||
'all, none' : 'all, none',
|
||||
'foobar' : 'foobar',
|
||||
'all, foobar' : 'all, foobar',
|
||||
'foobar, all' : 'foobar, all',
|
||||
'inherit' : 'padding',
|
||||
'none, all' : 'none, all',
|
||||
'all, none' : 'all, none',
|
||||
'foobar' : 'foobar',
|
||||
'all, foobar' : 'all, foobar',
|
||||
'foobar, all' : 'foobar, all',
|
||||
'inherit' : 'padding',
|
||||
'initial' : 'all'
|
||||
};
|
||||
|
||||
|
||||
for (var key in values) {
|
||||
test(function() {
|
||||
setStyle({
|
||||
|
@ -59,4 +59,5 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -15,7 +15,7 @@
|
|||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
|
||||
|
||||
transition-property: width, foo; /* invalid foo */
|
||||
transition-duration: 0, 5s;
|
||||
}
|
||||
|
@ -39,4 +39,5 @@
|
|||
<div class="box"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -6,13 +6,13 @@
|
|||
<link href="http://www.w3.org/TR/css3-transitions/#transition-timing-function-property" rel="help" title="2.3. The 'transition-timing-function' Property">
|
||||
<link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
|
||||
<meta content="dom" name="flags">
|
||||
|
||||
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script src="./support/vendorPrefix.js" type="text/javascript"></script>
|
||||
<script src="./support/helper.js" type="text/javascript"></script>
|
||||
|
||||
|
||||
<script id="metadata_cache">/*
|
||||
{
|
||||
"parse 'ease'": {},
|
||||
|
@ -77,7 +77,7 @@
|
|||
'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': defaultValue,
|
||||
'cubic-bezier(1.1, 1.2, 1.3, 1.4)': defaultValue
|
||||
};
|
||||
|
||||
|
||||
// these tests are supposed to fail and
|
||||
// possibly make the engine issue a parser warning
|
||||
var invalidTests = {
|
||||
|
@ -90,7 +90,7 @@
|
|||
'cubic-bezier(-0.1, -0.2, -0.3, -0.4)': true,
|
||||
'cubic-bezier(1.1, 1.2, 1.3, 1.4)': true
|
||||
};
|
||||
|
||||
|
||||
for (var key in values) {
|
||||
if (Object.prototype.hasOwnProperty.call(values, key)) {
|
||||
test(function() {
|
||||
|
@ -108,4 +108,5 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body></html>
|
|
@ -9,12 +9,12 @@
|
|||
<link href="mailto:stearns@adobe.com" rel="reviewer" title="Alan Stearns">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
html, body { margin: 0px; padding: 0px; }
|
||||
|
||||
|
||||
.w50vw { width: 50vw; )
|
||||
.h50vh { height: 50vh; }
|
||||
|
||||
|
||||
.w50vm { width: 50vm; }
|
||||
.h50vm { height: 50vm; }
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue