mirror of
https://github.com/servo/servo.git
synced 2025-06-24 00:54:32 +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
|
@ -24,7 +24,7 @@
|
||||||
<script>
|
<script>
|
||||||
var SVG_NS = 'http://www.w3.org/2000/svg';
|
var SVG_NS = 'http://www.w3.org/2000/svg';
|
||||||
var modes = [
|
var modes = [
|
||||||
'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge',
|
'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge',
|
||||||
'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion'
|
'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion'
|
||||||
];
|
];
|
||||||
var mode;
|
var mode;
|
||||||
|
|
|
@ -11,8 +11,8 @@ html/blending_in_a_group_with_opacity.htm 19ea11d72459630c0655a466c6c840e32087b6
|
||||||
xhtml1/blending_in_a_group_with_opacity.xht 19ea11d72459630c0655a466c6c840e32087b626 ?
|
xhtml1/blending_in_a_group_with_opacity.xht 19ea11d72459630c0655a466c6c840e32087b626 ?
|
||||||
html/line-with-svg-background.htm 29d19c66e2d9a863866bb93010a482900db0631f ?
|
html/line-with-svg-background.htm 29d19c66e2d9a863866bb93010a482900db0631f ?
|
||||||
xhtml1/line-with-svg-background.xht 29d19c66e2d9a863866bb93010a482900db0631f ?
|
xhtml1/line-with-svg-background.xht 29d19c66e2d9a863866bb93010a482900db0631f ?
|
||||||
html/text-with-svg-background.htm ba9c7ae99506609324d8fd3f671459e52e00fcbd ?
|
html/text-with-svg-background.htm 5cf456633678ba10a2ea20e5cf55ff34713bc7a2 ?
|
||||||
xhtml1/text-with-svg-background.xht ba9c7ae99506609324d8fd3f671459e52e00fcbd ?
|
xhtml1/text-with-svg-background.xht 5cf456633678ba10a2ea20e5cf55ff34713bc7a2 ?
|
||||||
html/text_with_svg_background.htm 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
html/text_with_svg_background.htm 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
||||||
xhtml1/text_with_svg_background.xht 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
xhtml1/text_with_svg_background.xht 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 ?
|
||||||
html/will-change-stacking-context-isolation-1.htm ce631e0d14948d2831d084bad24c675f5f760f3c ?
|
html/will-change-stacking-context-isolation-1.htm ce631e0d14948d2831d084bad24c675f5f760f3c ?
|
||||||
|
|
|
@ -3,7 +3,7 @@ blend-isolation CSS Compositing and Blending: isolation applied to a group cont
|
||||||
Blending_in_a_group_with_filter Blending in a group with filter svg http://www.w3.org/TR/compositing-1/#mix-blend-mode c38878e1c33585325870d56650a622470ec16eb8 `windtale`<mailto:windtale@163.com> Blending in a group with filter
|
Blending_in_a_group_with_filter Blending in a group with filter svg http://www.w3.org/TR/compositing-1/#mix-blend-mode c38878e1c33585325870d56650a622470ec16eb8 `windtale`<mailto:windtale@163.com> Blending in a group with filter
|
||||||
Blending_in_a_group_with_opacity Blending in a group with opacity svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 19ea11d72459630c0655a466c6c840e32087b626 `windtale`<mailto:windtale@163.com> Blending in a group with opacity
|
Blending_in_a_group_with_opacity Blending in a group with opacity svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 19ea11d72459630c0655a466c6c840e32087b626 `windtale`<mailto:windtale@163.com> Blending in a group with opacity
|
||||||
line-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 29d19c66e2d9a863866bb93010a482900db0631f `dmyang`<mailto:yangdemo@gmail.com>
|
line-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 29d19c66e2d9a863866bb93010a482900db0631f `dmyang`<mailto:yangdemo@gmail.com>
|
||||||
text-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode ba9c7ae99506609324d8fd3f671459e52e00fcbd `dmyang`<mailto:yangdemo@gmail.com>
|
text-with-svg-background CSS mix-blend-mode API Test svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 5cf456633678ba10a2ea20e5cf55ff34713bc7a2 `dmyang`<mailto:yangdemo@gmail.com>
|
||||||
Text_with_SVG_background Text with SVG background svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 `windtale`<mailto:windtale@163.com> Text with SVG background
|
Text_with_SVG_background Text with SVG background svg http://www.w3.org/TR/compositing-1/#mix-blend-mode 2b9ae3afd4e0927b11adcab29b13f9ab1d7e4098 `windtale`<mailto:windtale@163.com> Text with SVG background
|
||||||
will-change-stacking-context-isolation-1 reference/green-square-100-by-100-ref CSS will-change: 'will-change: isolation' creates a stacking context https://drafts.csswg.org/css-will-change-1/#will-change,http://www.w3.org/TR/compositing-1/#isolation ce631e0d14948d2831d084bad24c675f5f760f3c `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
|
will-change-stacking-context-isolation-1 reference/green-square-100-by-100-ref CSS will-change: 'will-change: isolation' creates a stacking context https://drafts.csswg.org/css-will-change-1/#will-change,http://www.w3.org/TR/compositing-1/#isolation ce631e0d14948d2831d084bad24c675f5f760f3c `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
|
||||||
will-change-stacking-context-mix-blend-mode-1 reference/green-square-100-by-100-ref CSS will-change: 'will-change: mix-blend-mode' creates a stacking context https://drafts.csswg.org/css-will-change-1/#will-change,http://www.w3.org/TR/compositing-1/#mix-blend-mode 0db38bd13bc550a378147e5e1507421035defd4d `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
|
will-change-stacking-context-mix-blend-mode-1 reference/green-square-100-by-100-ref CSS will-change: 'will-change: mix-blend-mode' creates a stacking context https://drafts.csswg.org/css-will-change-1/#will-change,http://www.w3.org/TR/compositing-1/#mix-blend-mode 0db38bd13bc550a378147e5e1507421035defd4d `L. David Baron`<http://dbaron.org/>,`Mozilla`<http://www.mozilla.org/> If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
<script>
|
<script>
|
||||||
var SVG_NS = 'http://www.w3.org/2000/svg';
|
var SVG_NS = 'http://www.w3.org/2000/svg';
|
||||||
var modes = [
|
var modes = [
|
||||||
'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge',
|
'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge',
|
||||||
'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion'
|
'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion'
|
||||||
];
|
];
|
||||||
var mode;
|
var mode;
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
<script>
|
<script>
|
||||||
var SVG_NS = 'http://www.w3.org/2000/svg';
|
var SVG_NS = 'http://www.w3.org/2000/svg';
|
||||||
var modes = [
|
var modes = [
|
||||||
'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge',
|
'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge',
|
||||||
'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion'
|
'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion'
|
||||||
];
|
];
|
||||||
var mode;
|
var mode;
|
||||||
|
|
|
@ -10,9 +10,9 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help">
|
||||||
<meta content="animated" name="flags">
|
<meta content="animated" name="flags">
|
||||||
<meta content="When animation-direction is set to alternate,
|
<meta content="When animation-direction is set to alternate,
|
||||||
animation cycle will iteration that are
|
animation cycle will iteration that are
|
||||||
odd counts are played in the normal direction,
|
odd counts are played in the normal direction,
|
||||||
and the animation cycle iterations that are
|
and the animation cycle iterations that are
|
||||||
even counts are played in a reverse direction." name="assert">
|
even counts are played in a reverse direction." name="assert">
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
animation-duration: 10s;
|
animation-duration: 10s;
|
||||||
animation-direction: normal;
|
animation-direction: normal;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
<div>Filler Text</div>
|
<div>Filler Text</div>
|
||||||
<script>
|
<script>
|
||||||
var div = document.getElementsByTagName("div");
|
var div = document.getElementsByTagName("div");
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
div[0].style.display = "none";
|
div[0].style.display = "none";
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
animation-name: sample;
|
animation-name: sample;
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-fill-mode: none;
|
animation-fill-mode: none;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -7,15 +7,15 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help">
|
||||||
<meta content="animated" name="flags">
|
<meta content="animated" name="flags">
|
||||||
<meta content="When animation-fill-mode is set to forwards,
|
<meta content="When animation-fill-mode is set to forwards,
|
||||||
animation will apply the property values for the time the amination ended
|
animation will apply the property values for the time the amination ended
|
||||||
after the animation ends." name="assert">
|
after the animation ends." name="assert">
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
animation-name: sample;
|
animation-name: sample;
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-delay: 5s;
|
animation-delay: 5s;
|
||||||
animation-fill-mode: backwards;
|
animation-fill-mode: backwards;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-delay: 5s;
|
animation-delay: 5s;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
</head><body>
|
</head><body>
|
||||||
<p>
|
<p>
|
||||||
Test passes if there is a filled blue square with 'Filler Text',
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
which starts moving right to left along the yellow bar,
|
which starts moving right to left along the yellow bar,
|
||||||
and pauses in the middle after about 2 seconds' animation.
|
and pauses in the middle after about 2 seconds' animation.
|
||||||
</p>
|
</p>
|
||||||
<div id="test-animation-paused">Filler Text</div>
|
<div id="test-animation-paused">Filler Text</div>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
<meta content="animated" name="flags">
|
<meta content="animated" name="flags">
|
||||||
<meta content="Check that animation-timing-function is set to ease-in-out,
|
<meta content="Check that animation-timing-function is set to ease-in-out,
|
||||||
animation will start slow, gain acceleration in the middel
|
animation will start slow, gain acceleration in the middel
|
||||||
and again slow down at the end." name="assert">
|
and again slow down at the end." name="assert">
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
<meta content="animated" name="flags">
|
<meta content="animated" name="flags">
|
||||||
<meta content="Check that animation-timing-function is set to ease-out,
|
<meta content="Check that animation-timing-function is set to ease-out,
|
||||||
animation will start with higher (than the normal) speed
|
animation will start with higher (than the normal) speed
|
||||||
and relatively slow down as time progresses." name="assert">
|
and relatively slow down as time progresses." name="assert">
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
@ -35,7 +35,7 @@
|
||||||
</head><body>
|
</head><body>
|
||||||
<p>
|
<p>
|
||||||
Test passes if there is a filled blue square with 'Filler Text',
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
which starts moving from right to left; animation starts and relatively
|
which starts moving from right to left; animation starts and relatively
|
||||||
slows down as time progresses.
|
slows down as time progresses.
|
||||||
</p>
|
</p>
|
||||||
<div>Filler Text</div>
|
<div>Filler Text</div>
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help">
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help">
|
||||||
<meta content="animated" name="flags">
|
<meta content="animated" name="flags">
|
||||||
<meta content="When animation-timing-function is set to linear,
|
<meta content="When animation-timing-function is set to linear,
|
||||||
animation will progress over one cycle of its duration
|
animation will progress over one cycle of its duration
|
||||||
with constant speed." name="assert">
|
with constant speed." name="assert">
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
|
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
|
||||||
|
|
||||||
<div class="region">
|
<div class="region">
|
||||||
<p> </p>
|
<p> </p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -50,4 +50,5 @@
|
||||||
xxxxx<br>
|
xxxxx<br>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -23,7 +23,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
||||||
|
|
||||||
<div class="region">
|
<div class="region">
|
||||||
<div class="transformed flow rotate once">
|
<div class="transformed flow rotate once">
|
||||||
xxxxx<br>
|
xxxxx<br>
|
||||||
|
@ -34,4 +34,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -2,35 +2,35 @@
|
||||||
<html><head>
|
<html><head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>
|
<title>
|
||||||
CSS Values and Units Test:
|
CSS Values and Units Test:
|
||||||
Viewport units are interpolated correctly
|
Viewport units are interpolated correctly
|
||||||
</title>
|
</title>
|
||||||
<meta content="
|
<meta content="
|
||||||
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
" name="assert">
|
" name="assert">
|
||||||
|
|
||||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
||||||
|
|
||||||
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
|
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
|
||||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||||
|
|
||||||
<link href="reference/all-green.htm" rel="match">
|
<link href="reference/all-green.htm" rel="match">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
||||||
@keyframes anim {
|
@keyframes anim {
|
||||||
from { width: 0%; height: 0%; }
|
from { width: 0%; height: 0%; }
|
||||||
to { width: 200vw; height: 200vh; }
|
to { width: 200vw; height: 200vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
@ -2,35 +2,35 @@
|
||||||
<html><head>
|
<html><head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>
|
<title>
|
||||||
CSS Values and Units Test:
|
CSS Values and Units Test:
|
||||||
Viewport units are interpolated correctly
|
Viewport units are interpolated correctly
|
||||||
</title>
|
</title>
|
||||||
<meta content="
|
<meta content="
|
||||||
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
" name="assert">
|
" name="assert">
|
||||||
|
|
||||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
||||||
|
|
||||||
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
|
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
|
||||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||||
|
|
||||||
<link href="reference/all-green.htm" rel="match">
|
<link href="reference/all-green.htm" rel="match">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
||||||
@keyframes anim {
|
@keyframes anim {
|
||||||
from { width: 0px; height: 0px; }
|
from { width: 0px; height: 0px; }
|
||||||
to { width: 200vw; height: 200vh; }
|
to { width: 200vw; height: 200vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
@ -2,35 +2,35 @@
|
||||||
<html><head>
|
<html><head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>
|
<title>
|
||||||
CSS Values and Units Test:
|
CSS Values and Units Test:
|
||||||
Viewport units are interpolated correctly
|
Viewport units are interpolated correctly
|
||||||
</title>
|
</title>
|
||||||
<meta content="
|
<meta content="
|
||||||
The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
||||||
" name="assert">
|
" name="assert">
|
||||||
|
|
||||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY">
|
||||||
|
|
||||||
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
|
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help">
|
||||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help">
|
||||||
|
|
||||||
<link href="reference/all-green.htm" rel="match">
|
<link href="reference/all-green.htm" rel="match">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
||||||
@keyframes anim {
|
@keyframes anim {
|
||||||
from { width: 75vw; height: 75vh; }
|
from { width: 75vw; height: 75vh; }
|
||||||
to { width: 125vw; height: 125vh; }
|
to { width: 125vw; height: 125vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
@ -17,10 +17,10 @@ html/animation-delay-006.htm 13c48bd6b709280df6a9a5bfff09c2880e868a41 ?
|
||||||
xhtml1/animation-delay-006.xht 13c48bd6b709280df6a9a5bfff09c2880e868a41 ?
|
xhtml1/animation-delay-006.xht 13c48bd6b709280df6a9a5bfff09c2880e868a41 ?
|
||||||
html/animation-delay-007.htm 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 ?
|
html/animation-delay-007.htm 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 ?
|
||||||
xhtml1/animation-delay-007.xht 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 ?
|
xhtml1/animation-delay-007.xht 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 ?
|
||||||
html/animation-direction-001.htm a7e38f2510c639abc4f8a90f699435377d04bcfd ?
|
html/animation-direction-001.htm 2df75f525c9035f1bf324ee6c8aa27c88d24e7a0 ?
|
||||||
xhtml1/animation-direction-001.xht a7e38f2510c639abc4f8a90f699435377d04bcfd ?
|
xhtml1/animation-direction-001.xht 2df75f525c9035f1bf324ee6c8aa27c88d24e7a0 ?
|
||||||
html/animation-direction-002.htm 10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc ?
|
html/animation-direction-002.htm d4e3070511f1c29235cf046381b915d0d000d79d ?
|
||||||
xhtml1/animation-direction-002.xht 10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc ?
|
xhtml1/animation-direction-002.xht d4e3070511f1c29235cf046381b915d0d000d79d ?
|
||||||
html/animation-direction-003.htm 2525726c04b8605f6b2c4809f33866f566ae1b3e ?
|
html/animation-direction-003.htm 2525726c04b8605f6b2c4809f33866f566ae1b3e ?
|
||||||
xhtml1/animation-direction-003.xht 2525726c04b8605f6b2c4809f33866f566ae1b3e ?
|
xhtml1/animation-direction-003.xht 2525726c04b8605f6b2c4809f33866f566ae1b3e ?
|
||||||
html/animation-direction-004.htm f14768d125e6639a43406b4640dcc9d93ba83576 ?
|
html/animation-direction-004.htm f14768d125e6639a43406b4640dcc9d93ba83576 ?
|
||||||
|
@ -29,8 +29,8 @@ html/animation-direction-005.htm 5fa0f64355db4c2c051c6232bdb80f4ac8ff248b ?
|
||||||
xhtml1/animation-direction-005.xht 5fa0f64355db4c2c051c6232bdb80f4ac8ff248b ?
|
xhtml1/animation-direction-005.xht 5fa0f64355db4c2c051c6232bdb80f4ac8ff248b ?
|
||||||
html/animation-direction-006.htm 05f86fa498917fde4d1216bb9252609c74a7c3f3 ?
|
html/animation-direction-006.htm 05f86fa498917fde4d1216bb9252609c74a7c3f3 ?
|
||||||
xhtml1/animation-direction-006.xht 05f86fa498917fde4d1216bb9252609c74a7c3f3 ?
|
xhtml1/animation-direction-006.xht 05f86fa498917fde4d1216bb9252609c74a7c3f3 ?
|
||||||
html/animation-display.htm 8e6c27c47e1a837e07eed4a94d6cff0b13f133dc ?
|
html/animation-display.htm 6958b8c7f40f295c77dd411d398d688812f9cc9e ?
|
||||||
xhtml1/animation-display.xht 8e6c27c47e1a837e07eed4a94d6cff0b13f133dc ?
|
xhtml1/animation-display.xht 6958b8c7f40f295c77dd411d398d688812f9cc9e ?
|
||||||
html/animation-duration-001.htm b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 ?
|
html/animation-duration-001.htm b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 ?
|
||||||
xhtml1/animation-duration-001.xht b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 ?
|
xhtml1/animation-duration-001.xht b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 ?
|
||||||
html/animation-duration-002.htm 0a1ced535f37c055b5be633a34613f4a40dc4ed9 ?
|
html/animation-duration-002.htm 0a1ced535f37c055b5be633a34613f4a40dc4ed9 ?
|
||||||
|
@ -47,14 +47,14 @@ html/animation-duration-007.htm a4fc15e755ec66168590d0e39c02e49e1dc10efb ?
|
||||||
xhtml1/animation-duration-007.xht a4fc15e755ec66168590d0e39c02e49e1dc10efb ?
|
xhtml1/animation-duration-007.xht a4fc15e755ec66168590d0e39c02e49e1dc10efb ?
|
||||||
html/animation-duration-008.htm 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff ?
|
html/animation-duration-008.htm 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff ?
|
||||||
xhtml1/animation-duration-008.xht 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff ?
|
xhtml1/animation-duration-008.xht 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff ?
|
||||||
html/animation-fill-mode-001.htm 92d88eae75f4d45c2af24235c5390469f6a2fe70 ?
|
html/animation-fill-mode-001.htm a896a903a83ad1bcfa341c883680fb7c69e01385 ?
|
||||||
xhtml1/animation-fill-mode-001.xht 92d88eae75f4d45c2af24235c5390469f6a2fe70 ?
|
xhtml1/animation-fill-mode-001.xht a896a903a83ad1bcfa341c883680fb7c69e01385 ?
|
||||||
html/animation-fill-mode-002.htm a2e61dd6fc284dc628ed692448f222e8b560622a ?
|
html/animation-fill-mode-002.htm 8bfc66b6dbcdba2c3997fb053067e4d0175f7392 ?
|
||||||
xhtml1/animation-fill-mode-002.xht a2e61dd6fc284dc628ed692448f222e8b560622a ?
|
xhtml1/animation-fill-mode-002.xht 8bfc66b6dbcdba2c3997fb053067e4d0175f7392 ?
|
||||||
html/animation-fill-mode-003.htm abb5c141f0f145c8dfda82c28f669112f5b89c3a ?
|
html/animation-fill-mode-003.htm 25a8999a2f5c6dcf7212a8d866f3f360c138bba1 ?
|
||||||
xhtml1/animation-fill-mode-003.xht abb5c141f0f145c8dfda82c28f669112f5b89c3a ?
|
xhtml1/animation-fill-mode-003.xht 25a8999a2f5c6dcf7212a8d866f3f360c138bba1 ?
|
||||||
html/animation-fill-mode-004.htm e3a3d5e256446592c490233b94568d41e820a6f1 ?
|
html/animation-fill-mode-004.htm e56ec35c83440c3adbfdfcd742b9c244584dbfe8 ?
|
||||||
xhtml1/animation-fill-mode-004.xht e3a3d5e256446592c490233b94568d41e820a6f1 ?
|
xhtml1/animation-fill-mode-004.xht e56ec35c83440c3adbfdfcd742b9c244584dbfe8 ?
|
||||||
html/animation-fill-mode-005.htm d60439ebb629902cc04d45b8a9d3f46d334e54b3 ?
|
html/animation-fill-mode-005.htm d60439ebb629902cc04d45b8a9d3f46d334e54b3 ?
|
||||||
xhtml1/animation-fill-mode-005.xht d60439ebb629902cc04d45b8a9d3f46d334e54b3 ?
|
xhtml1/animation-fill-mode-005.xht d60439ebb629902cc04d45b8a9d3f46d334e54b3 ?
|
||||||
html/animation-fill-mode-006.htm e4474eae90dde4cb56ce31fd173ff32cbde1437b ?
|
html/animation-fill-mode-006.htm e4474eae90dde4cb56ce31fd173ff32cbde1437b ?
|
||||||
|
@ -95,8 +95,8 @@ html/animation-name-005.htm 9ef57c67ba391e1a00060db5eca52be5fc68c6f0 ?
|
||||||
xhtml1/animation-name-005.xht 9ef57c67ba391e1a00060db5eca52be5fc68c6f0 ?
|
xhtml1/animation-name-005.xht 9ef57c67ba391e1a00060db5eca52be5fc68c6f0 ?
|
||||||
html/animation-name-006.htm af99446d3d688a8e6ad08caee199229327c2279a ?
|
html/animation-name-006.htm af99446d3d688a8e6ad08caee199229327c2279a ?
|
||||||
xhtml1/animation-name-006.xht af99446d3d688a8e6ad08caee199229327c2279a ?
|
xhtml1/animation-name-006.xht af99446d3d688a8e6ad08caee199229327c2279a ?
|
||||||
html/animation-play-state-001.htm 64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3 ?
|
html/animation-play-state-001.htm fa1757a1db5df36ac679d7e00c8c2f399caa03fa ?
|
||||||
xhtml1/animation-play-state-001.xht 64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3 ?
|
xhtml1/animation-play-state-001.xht fa1757a1db5df36ac679d7e00c8c2f399caa03fa ?
|
||||||
html/animation-play-state-002.htm 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 ?
|
html/animation-play-state-002.htm 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 ?
|
||||||
xhtml1/animation-play-state-002.xht 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 ?
|
xhtml1/animation-play-state-002.xht 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 ?
|
||||||
html/animation-play-state-003.htm 1dca5c63b44436557a976a9d2f26755fefb6ade5 ?
|
html/animation-play-state-003.htm 1dca5c63b44436557a976a9d2f26755fefb6ade5 ?
|
||||||
|
@ -115,12 +115,12 @@ html/animation-timing-function-002.htm 7527eff75562c5f49d9599e7495c47aa9bd9f414
|
||||||
xhtml1/animation-timing-function-002.xht 7527eff75562c5f49d9599e7495c47aa9bd9f414 ?
|
xhtml1/animation-timing-function-002.xht 7527eff75562c5f49d9599e7495c47aa9bd9f414 ?
|
||||||
html/animation-timing-function-003.htm 214819b56e1e46f9c7aa07d0ce144830ac65e924 ?
|
html/animation-timing-function-003.htm 214819b56e1e46f9c7aa07d0ce144830ac65e924 ?
|
||||||
xhtml1/animation-timing-function-003.xht 214819b56e1e46f9c7aa07d0ce144830ac65e924 ?
|
xhtml1/animation-timing-function-003.xht 214819b56e1e46f9c7aa07d0ce144830ac65e924 ?
|
||||||
html/animation-timing-function-004.htm 4064198bc4b46aaf5eb99144c7343655485b86a9 ?
|
html/animation-timing-function-004.htm 7ca5efa977158b094c81822126677f226ccda72b ?
|
||||||
xhtml1/animation-timing-function-004.xht 4064198bc4b46aaf5eb99144c7343655485b86a9 ?
|
xhtml1/animation-timing-function-004.xht 7ca5efa977158b094c81822126677f226ccda72b ?
|
||||||
html/animation-timing-function-005.htm 5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5 ?
|
html/animation-timing-function-005.htm ba7606126d68f12b031748490229155c91a67be8 ?
|
||||||
xhtml1/animation-timing-function-005.xht 5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5 ?
|
xhtml1/animation-timing-function-005.xht ba7606126d68f12b031748490229155c91a67be8 ?
|
||||||
html/animation-timing-function-006.htm 2bb42397e46fd890be8f37a020d4febef34c5b96 ?
|
html/animation-timing-function-006.htm 011ab23fe72cbde801ee40a3e7ac9f8c4cdfd31f ?
|
||||||
xhtml1/animation-timing-function-006.xht 2bb42397e46fd890be8f37a020d4febef34c5b96 ?
|
xhtml1/animation-timing-function-006.xht 011ab23fe72cbde801ee40a3e7ac9f8c4cdfd31f ?
|
||||||
html/animation-timing-function-007.htm ffbe76fc315f072878076a7bf711ac9a891eba52 ?
|
html/animation-timing-function-007.htm ffbe76fc315f072878076a7bf711ac9a891eba52 ?
|
||||||
xhtml1/animation-timing-function-007.xht ffbe76fc315f072878076a7bf711ac9a891eba52 ?
|
xhtml1/animation-timing-function-007.xht ffbe76fc315f072878076a7bf711ac9a891eba52 ?
|
||||||
html/animation-timing-function-008.htm 4fbb8d08f0f4b411101c203fc66f72d222df7f44 ?
|
html/animation-timing-function-008.htm 4fbb8d08f0f4b411101c203fc66f72d222df7f44 ?
|
||||||
|
@ -137,8 +137,8 @@ html/animationevent-interface.htm a1e39dcdabe246037312ac3a8bab7bf3fe904a79 ?
|
||||||
xhtml1/animationevent-interface.xht a1e39dcdabe246037312ac3a8bab7bf3fe904a79 ?
|
xhtml1/animationevent-interface.xht a1e39dcdabe246037312ac3a8bab7bf3fe904a79 ?
|
||||||
html/animationevent-types.htm 11cda4945e4216dee93775c6217d3ce303ea04a9 ?
|
html/animationevent-types.htm 11cda4945e4216dee93775c6217d3ce303ea04a9 ?
|
||||||
xhtml1/animationevent-types.xht 11cda4945e4216dee93775c6217d3ce303ea04a9 ?
|
xhtml1/animationevent-types.xht 11cda4945e4216dee93775c6217d3ce303ea04a9 ?
|
||||||
html/animations-001.htm d58c2e2ae3f483272798693240d821a63d066892 ?
|
html/animations-001.htm a4cee4791955488eed14303cedc0330b0531f6f5 ?
|
||||||
xhtml1/animations-001.xht d58c2e2ae3f483272798693240d821a63d066892 ?
|
xhtml1/animations-001.xht a4cee4791955488eed14303cedc0330b0531f6f5 ?
|
||||||
html/animationstart-and-animationend-events.htm 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 ?
|
html/animationstart-and-animationend-events.htm 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 ?
|
||||||
xhtml1/animationstart-and-animationend-events.xht 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 ?
|
xhtml1/animationstart-and-animationend-events.xht 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 ?
|
||||||
html/css-filters-animation-blur.htm 53622387367e3daa90b9880e22ff9548665f4883 ?
|
html/css-filters-animation-blur.htm 53622387367e3daa90b9880e22ff9548665f4883 ?
|
||||||
|
@ -163,9 +163,9 @@ html/css-filters-animation-saturate.htm 1527b952f6a2421d3ff02ce50405d38d1cbb45b5
|
||||||
xhtml1/css-filters-animation-saturate.xht 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 ?
|
xhtml1/css-filters-animation-saturate.xht 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 ?
|
||||||
html/css-filters-animation-sepia.htm 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
html/css-filters-animation-sepia.htm 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
||||||
xhtml1/css-filters-animation-sepia.xht 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
xhtml1/css-filters-animation-sepia.xht 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
||||||
html/vh-interpolate-pct.htm fd47cb04c7042f6379b2664b7742a5a01ea9d1a0 ?
|
html/vh-interpolate-pct.htm ceef2964c18d7fd3cab6f5923fa60a633ec97442 ?
|
||||||
xhtml1/vh-interpolate-pct.xht fd47cb04c7042f6379b2664b7742a5a01ea9d1a0 ?
|
xhtml1/vh-interpolate-pct.xht ceef2964c18d7fd3cab6f5923fa60a633ec97442 ?
|
||||||
html/vh-interpolate-px.htm 41a610e2dd418e47f56d88171dd0c52a57e06b5e ?
|
html/vh-interpolate-px.htm ade4e7b3374856c99aa9515a936630f49c5c44fb ?
|
||||||
xhtml1/vh-interpolate-px.xht 41a610e2dd418e47f56d88171dd0c52a57e06b5e ?
|
xhtml1/vh-interpolate-px.xht ade4e7b3374856c99aa9515a936630f49c5c44fb ?
|
||||||
html/vh-interpolate-vh.htm 42ccc23cc2f90272644bd0188261dacba081ccb2 ?
|
html/vh-interpolate-vh.htm 9a46dd5fa51b77278d6d50f7c7f862592aea3413 ?
|
||||||
xhtml1/vh-interpolate-vh.xht 42ccc23cc2f90272644bd0188261dacba081ccb2 ?
|
xhtml1/vh-interpolate-vh.xht 9a46dd5fa51b77278d6d50f7c7f862592aea3413 ?
|
||||||
|
|
|
@ -6,13 +6,13 @@ animation-delay-004 animation-delay - ::after animated https://drafts.csswg.org
|
||||||
animation-delay-005 animation-delay - ::before animated https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 26ecab722c342d2f3f8dd7dc864f1ac64490027c `Intel`<http://www.intel.com> Check that animation-delay applies to the ::before pseudo element.
|
animation-delay-005 animation-delay - ::before animated https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 26ecab722c342d2f3f8dd7dc864f1ac64490027c `Intel`<http://www.intel.com> Check that animation-delay applies to the ::before pseudo element.
|
||||||
animation-delay-006 animation-delay - initial keyword animated https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#values 13c48bd6b709280df6a9a5bfff09c2880e868a41 `Intel`<http://www.intel.com> Check that animation-delay property accepts 'initial' keyword.
|
animation-delay-006 animation-delay - initial keyword animated https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#values 13c48bd6b709280df6a9a5bfff09c2880e868a41 `Intel`<http://www.intel.com> Check that animation-delay property accepts 'initial' keyword.
|
||||||
animation-delay-007 animation-delay - inherit keyword animated https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#values 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 `Intel`<http://www.intel.com> Check that animation-delay property accepts 'inherit' keyword.
|
animation-delay-007 animation-delay - inherit keyword animated https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#values 2f27e7970e6df9f0039f97e9543f4cf5fb16d5a3 `Intel`<http://www.intel.com> Check that animation-delay property accepts 'inherit' keyword.
|
||||||
animation-direction-001 animation-direction - alternate animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count a7e38f2510c639abc4f8a90f699435377d04bcfd `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
|
animation-direction-001 animation-direction - alternate animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 2df75f525c9035f1bf324ee6c8aa27c88d24e7a0 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
|
||||||
animation-direction-002 animation-direction - normal animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 10d5d6cd6132c928fadcbe3312b8a7ffb2c0dacc `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-direction is set to normal, all iterations of animation are played as specified.
|
animation-direction-002 animation-direction - normal animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count d4e3070511f1c29235cf046381b915d0d000d79d `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-direction is set to normal, all iterations of animation are played as specified.
|
||||||
animation-direction-003 animation-direction - alternate-reverse animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 2525726c04b8605f6b2c4809f33866f566ae1b3e `Intel`<http://www.intel.com> When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
|
animation-direction-003 animation-direction - alternate-reverse animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 2525726c04b8605f6b2c4809f33866f566ae1b3e `Intel`<http://www.intel.com> When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
|
||||||
animation-direction-004 animation-direction - reverse animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count f14768d125e6639a43406b4640dcc9d93ba83576 `Intel`<http://www.intel.com> When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
|
animation-direction-004 animation-direction - reverse animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count f14768d125e6639a43406b4640dcc9d93ba83576 `Intel`<http://www.intel.com> When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
|
||||||
animation-direction-005 animation-direction - ::after animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 5fa0f64355db4c2c051c6232bdb80f4ac8ff248b `Intel`<http://www.intel.com> Check that animation-direction applies to the ::after pseudo element.
|
animation-direction-005 animation-direction - ::after animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 5fa0f64355db4c2c051c6232bdb80f4ac8ff248b `Intel`<http://www.intel.com> Check that animation-direction applies to the ::after pseudo element.
|
||||||
animation-direction-006 animation-direction - ::before animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 05f86fa498917fde4d1216bb9252609c74a7c3f3 `Intel`<http://www.intel.com> Check that animation-direction applies to the ::before pseudo element
|
animation-direction-006 animation-direction - ::before animated https://drafts.csswg.org/css-animations-1/#animation-direction,https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count 05f86fa498917fde4d1216bb9252609c74a7c3f3 `Intel`<http://www.intel.com> Check that animation-direction applies to the ::before pseudo element
|
||||||
animation-display animation - display animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animations 8e6c27c47e1a837e07eed4a94d6cff0b13f133dc `Intel`<http://www.intel.com> Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.
|
animation-display animation - display animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animations 6958b8c7f40f295c77dd411d398d688812f9cc9e `Intel`<http://www.intel.com> Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.
|
||||||
animation-duration-001 animation-duration - blank value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-duration value is set blank, there will be no animation seen.
|
animation-duration-001 animation-duration - blank value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration b7e9e6b620eddf01ef5ce9ff3a90a9d39ce733b2 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-duration value is set blank, there will be no animation seen.
|
||||||
animation-duration-002 animation-duration - finite value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 0a1ced535f37c055b5be633a34613f4a40dc4ed9 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.
|
animation-duration-002 animation-duration - finite value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 0a1ced535f37c055b5be633a34613f4a40dc4ed9 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.
|
||||||
animation-duration-003 animation-duration - negative value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 5578f320f4d80f5d8e5c0ede61139763bd6343a2 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.
|
animation-duration-003 animation-duration - negative value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 5578f320f4d80f5d8e5c0ede61139763bd6343a2 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.
|
||||||
|
@ -21,10 +21,10 @@ animation-duration-005 animation-duration - 0s, animation-fill-mode - forwards
|
||||||
animation-duration-006 animation-duration - 0s, animation-fill-mode - both animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode 8f01bff7015212232e2e378bdb2bf30f4d7e390d `Intel`<http://www.intel.com> When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.
|
animation-duration-006 animation-duration - 0s, animation-fill-mode - both animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode 8f01bff7015212232e2e378bdb2bf30f4d7e390d `Intel`<http://www.intel.com> When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.
|
||||||
animation-duration-007 animation-duration - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration a4fc15e755ec66168590d0e39c02e49e1dc10efb `Intel`<http://www.intel.com> Check that animation-duration applies to the ::before pseudo element.
|
animation-duration-007 animation-duration - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration a4fc15e755ec66168590d0e39c02e49e1dc10efb `Intel`<http://www.intel.com> Check that animation-duration applies to the ::before pseudo element.
|
||||||
animation-duration-008 animation-duration - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff `Intel`<http://www.intel.com> Check that animation-duration applies to the ::after pseudo element.
|
animation-duration-008 animation-duration - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 1a0b1995d43a4a2524555d9da34a6b36ae31a8ff `Intel`<http://www.intel.com> Check that animation-duration applies to the ::after pseudo element.
|
||||||
animation-fill-mode-001 animation-fill-mode - none animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode 92d88eae75f4d45c2af24235c5390469f6a2fe70 `Intel`<http://www.intel.com> When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.
|
animation-fill-mode-001 animation-fill-mode - none animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode a896a903a83ad1bcfa341c883680fb7c69e01385 `Intel`<http://www.intel.com> When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.
|
||||||
animation-fill-mode-002 animation-fill-mode - forwards animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode a2e61dd6fc284dc628ed692448f222e8b560622a `Intel`<http://www.intel.com> When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.
|
animation-fill-mode-002 animation-fill-mode - forwards animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode 8bfc66b6dbcdba2c3997fb053067e4d0175f7392 `Intel`<http://www.intel.com> When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.
|
||||||
animation-fill-mode-003 animation-fill-mode - backwards animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-fill-mode abb5c141f0f145c8dfda82c28f669112f5b89c3a `Intel`<http://www.intel.com> When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.
|
animation-fill-mode-003 animation-fill-mode - backwards animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-fill-mode 25a8999a2f5c6dcf7212a8d866f3f360c138bba1 `Intel`<http://www.intel.com> When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.
|
||||||
animation-fill-mode-004 animation-fill-mode - both animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-fill-mode e3a3d5e256446592c490233b94568d41e820a6f1 `Intel`<http://www.intel.com> Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.
|
animation-fill-mode-004 animation-fill-mode - both animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-delay,https://drafts.csswg.org/css-animations-1/#animation-fill-mode e56ec35c83440c3adbfdfcd742b9c244584dbfe8 `Intel`<http://www.intel.com> Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.
|
||||||
animation-fill-mode-005 animation-fill-mode - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode d60439ebb629902cc04d45b8a9d3f46d334e54b3 `Intel`<http://www.intel.com> Check that animation-fill-mode applies to the ::after pseudo element.
|
animation-fill-mode-005 animation-fill-mode - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode d60439ebb629902cc04d45b8a9d3f46d334e54b3 `Intel`<http://www.intel.com> Check that animation-fill-mode applies to the ::after pseudo element.
|
||||||
animation-fill-mode-006 animation-fill-mode - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode e4474eae90dde4cb56ce31fd173ff32cbde1437b `Intel`<http://www.intel.com> Check that animation-fill-mode applies to the ::before pseudo element.
|
animation-fill-mode-006 animation-fill-mode - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode e4474eae90dde4cb56ce31fd173ff32cbde1437b `Intel`<http://www.intel.com> Check that animation-fill-mode applies to the ::before pseudo element.
|
||||||
animation-iteration-count-001 animation-iteration-count - default value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count f0d73fe77862535d66dfb252ab96a0ec4adf4a5a `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.
|
animation-iteration-count-001 animation-iteration-count - default value animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-iteration-count f0d73fe77862535d66dfb252ab96a0ec4adf4a5a `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.
|
||||||
|
@ -45,7 +45,7 @@ animation-name-003 animation-name - none animated https://drafts.csswg.org/css-
|
||||||
animation-name-004 animation-name mismatches keyframe at-rule animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 3cce09a98cd0cb9d7b3d101f608128e4a759bc79 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
|
animation-name-004 animation-name mismatches keyframe at-rule animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 3cce09a98cd0cb9d7b3d101f608128e4a759bc79 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
|
||||||
animation-name-005 animation-name - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 9ef57c67ba391e1a00060db5eca52be5fc68c6f0 `Intel`<http://www.intel.com> Check that animation-name applies to the ::after pseudo element.
|
animation-name-005 animation-name - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration 9ef57c67ba391e1a00060db5eca52be5fc68c6f0 `Intel`<http://www.intel.com> Check that animation-name applies to the ::after pseudo element.
|
||||||
animation-name-006 animation-name - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration af99446d3d688a8e6ad08caee199229327c2279a `Intel`<http://www.intel.com> Check that animation-name applies to the ::before pseudo element.
|
animation-name-006 animation-name - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration af99446d3d688a8e6ad08caee199229327c2279a `Intel`<http://www.intel.com> Check that animation-name applies to the ::before pseudo element.
|
||||||
animation-play-state-001 animation-play-state - paused animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state 64af3a1bf0816b76b3ac6f15ad15e6cc6c7ccfb3 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.
|
animation-play-state-001 animation-play-state - paused animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state fa1757a1db5df36ac679d7e00c8c2f399caa03fa `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.
|
||||||
animation-play-state-002 animation-play-state - running animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-play-state is set to running, animation will proceed as normal.
|
animation-play-state-002 animation-play-state - running animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state 22aac25e6c5bc4fccf865d0843e7f97e05ff72e0 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-play-state is set to running, animation will proceed as normal.
|
||||||
animation-play-state-003 animation-play-state - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state 1dca5c63b44436557a976a9d2f26755fefb6ade5 `Intel`<http://www.intel.com> Check that animation-play-state applies to the ::after pseudo element.
|
animation-play-state-003 animation-play-state - ::after animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state 1dca5c63b44436557a976a9d2f26755fefb6ade5 `Intel`<http://www.intel.com> Check that animation-play-state applies to the ::after pseudo element.
|
||||||
animation-play-state-004 animation-play-state - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state 5047e6044f322dd9211c9c3ffc4655b4d6c50540 `Intel`<http://www.intel.com> Check that animation-play-state applies to the ::before pseudo element.
|
animation-play-state-004 animation-play-state - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-play-state 5047e6044f322dd9211c9c3ffc4655b4d6c50540 `Intel`<http://www.intel.com> Check that animation-play-state applies to the ::before pseudo element.
|
||||||
|
@ -55,9 +55,9 @@ animation-shorthand-003 animation shorthand - ::before animated https://drafts.
|
||||||
animation-timing-function-001 animation-timing-function - cubic-bezier with parameters (0,0,1,1) animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function f9aadf639f98f9795400a5218e8540c08366e8cd `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.
|
animation-timing-function-001 animation-timing-function - cubic-bezier with parameters (0,0,1,1) animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function f9aadf639f98f9795400a5218e8540c08366e8cd `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.
|
||||||
animation-timing-function-002 animation-timing-function - ease animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 7527eff75562c5f49d9599e7495c47aa9bd9f414 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.
|
animation-timing-function-002 animation-timing-function - ease animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 7527eff75562c5f49d9599e7495c47aa9bd9f414 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.
|
||||||
animation-timing-function-003 animation-timing-function - ease-in animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 214819b56e1e46f9c7aa07d0ce144830ac65e924 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.
|
animation-timing-function-003 animation-timing-function - ease-in animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 214819b56e1e46f9c7aa07d0ce144830ac65e924 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.
|
||||||
animation-timing-function-004 animation-timing-function - ease-in-out animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 4064198bc4b46aaf5eb99144c7343655485b86a9 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.
|
animation-timing-function-004 animation-timing-function - ease-in-out animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 7ca5efa977158b094c81822126677f226ccda72b `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.
|
||||||
animation-timing-function-005 animation-timing-function - ease-out animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 5a29c60d50b81071e5c7d9d5d75aacbf7fd56fe5 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.
|
animation-timing-function-005 animation-timing-function - ease-out animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function ba7606126d68f12b031748490229155c91a67be8 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.
|
||||||
animation-timing-function-006 animation-timing-function - linear animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 2bb42397e46fd890be8f37a020d4febef34c5b96 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.
|
animation-timing-function-006 animation-timing-function - linear animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 011ab23fe72cbde801ee40a3e7ac9f8c4cdfd31f `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.
|
||||||
animation-timing-function-007 animation-timing-function - step-start animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode,https://drafts.csswg.org/css-animations-1/#animation-timing-function ffbe76fc315f072878076a7bf711ac9a891eba52 `Intel`<http://www.intel.com> When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.
|
animation-timing-function-007 animation-timing-function - step-start animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode,https://drafts.csswg.org/css-animations-1/#animation-timing-function ffbe76fc315f072878076a7bf711ac9a891eba52 `Intel`<http://www.intel.com> When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.
|
||||||
animation-timing-function-008 animation-timing-function - step-end animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 4fbb8d08f0f4b411101c203fc66f72d222df7f44 `Intel`<http://www.intel.com> When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.
|
animation-timing-function-008 animation-timing-function - step-end animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function 4fbb8d08f0f4b411101c203fc66f72d222df7f44 `Intel`<http://www.intel.com> When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.
|
||||||
animation-timing-function-009 animation-timing-function - steps with parameters (<number>, start) animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode,https://drafts.csswg.org/css-animations-1/#animation-timing-function 0c8dd1d5b92dfaeb20edb3ff4f3287bb06ecff30 `Intel`<http://www.intel.com> When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.
|
animation-timing-function-009 animation-timing-function - steps with parameters (<number>, start) animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-fill-mode,https://drafts.csswg.org/css-animations-1/#animation-timing-function 0c8dd1d5b92dfaeb20edb3ff4f3287bb06ecff30 `Intel`<http://www.intel.com> When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.
|
||||||
|
@ -66,7 +66,7 @@ animation-timing-function-011 animation-timing-function - ::after animated http
|
||||||
animation-timing-function-012 animation-timing-function - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function d6a471751d34018dfc5e91a83592e896d8e6e5b5 `Intel`<http://www.intel.com> Check that animation-timing-function applies to the ::before pseudo element.
|
animation-timing-function-012 animation-timing-function - ::before animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#animation-timing-function d6a471751d34018dfc5e91a83592e896d8e6e5b5 `Intel`<http://www.intel.com> Check that animation-timing-function applies to the ::before pseudo element.
|
||||||
animationevent-interface AnimationEvent interface script https://drafts.csswg.org/css-animations-1/#interface-dom a1e39dcdabe246037312ac3a8bab7bf3fe904a79 `Intel`<http://www.intel.com>
|
animationevent-interface AnimationEvent interface script https://drafts.csswg.org/css-animations-1/#interface-dom a1e39dcdabe246037312ac3a8bab7bf3fe904a79 `Intel`<http://www.intel.com>
|
||||||
animationevent-types AnimationEvnt types - animationstart, animationend,animationiteration script https://drafts.csswg.org/css-animations-1/#event-animationevent 11cda4945e4216dee93775c6217d3ce303ea04a9 `Intel`<http://www.intel.com>
|
animationevent-types AnimationEvnt types - animationstart, animationend,animationiteration script https://drafts.csswg.org/css-animations-1/#event-animationevent 11cda4945e4216dee93775c6217d3ce303ea04a9 `Intel`<http://www.intel.com>
|
||||||
animations-001 reference/animations-001-ref CSS Regions: animating content flowed into a region ahem,animated http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#flow-from,http://www.w3.org/TR/css-transforms-1/#transform-functions,http://www.w3.org/TR/css3-animations/#animations d58c2e2ae3f483272798693240d821a63d066892 `Mihai Balan`<mailto:mibalan@adobe.com> Test checks that content that has an animated 3D transform renders and animates when flowed in a region.
|
animations-001 reference/animations-001-ref CSS Regions: animating content flowed into a region ahem,animated http://www.w3.org/TR/css3-regions/#the-flow-into-property,http://www.w3.org/TR/css3-regions/#flow-from,http://www.w3.org/TR/css-transforms-1/#transform-functions,http://www.w3.org/TR/css3-animations/#animations a4cee4791955488eed14303cedc0330b0531f6f5 `Mihai Balan`<mailto:mibalan@adobe.com> Test checks that content that has an animated 3D transform renders and animates when flowed in a region.
|
||||||
animationstart-and-animationend-events animation events - animationstart and animationend animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#events 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.
|
animationstart-and-animationend-events animation events - animationstart and animationend animated https://drafts.csswg.org/css-animations-1/#animation-name,https://drafts.csswg.org/css-animations-1/#animation-duration,https://drafts.csswg.org/css-animations-1/#events 8faa1d6d24026a7e26d4c00bc57b7f70d4042146 `Nokia Inc.`<http://www.nokia.com>,`Intel`<http://www.intel.com> Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.
|
||||||
css-filters-animation-blur reference/css-filters-animation-blur-ref CSS Filters Animation: Blur http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-blur,http://www.w3.org/TR/css3-animations/#animations 53622387367e3daa90b9880e22ff9548665f4883 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be 10px blurred
|
css-filters-animation-blur reference/css-filters-animation-blur-ref CSS Filters Animation: Blur http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-blur,http://www.w3.org/TR/css3-animations/#animations 53622387367e3daa90b9880e22ff9548665f4883 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be 10px blurred
|
||||||
css-filters-animation-brightness reference/css-filters-animation-brightness-ref CSS Filters Animation: Brightness http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-brightness,http://www.w3.org/TR/css3-animations/#animations 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be dark blue
|
css-filters-animation-brightness reference/css-filters-animation-brightness-ref CSS Filters Animation: Brightness http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-brightness,http://www.w3.org/TR/css3-animations/#animations 6ef87e3d77b51aaa2d33c91de5b6c84e96b41eae `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be dark blue
|
||||||
|
@ -79,6 +79,6 @@ css-filters-animation-invert reference/css-filters-animation-invert-ref CSS Filt
|
||||||
css-filters-animation-opacity reference/css-filters-animation-opacity-ref CSS Filters Animation: Opacity http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-opacity,http://www.w3.org/TR/css3-animations/#animations c280f619d6a33d5953c6bde268ba7b0813467b70 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The black square should be gray
|
css-filters-animation-opacity reference/css-filters-animation-opacity-ref CSS Filters Animation: Opacity http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-opacity,http://www.w3.org/TR/css3-animations/#animations c280f619d6a33d5953c6bde268ba7b0813467b70 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The black square should be gray
|
||||||
css-filters-animation-saturate reference/css-filters-animation-saturate-ref CSS Filters Animation: Saturate http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-saturate,http://www.w3.org/TR/css3-animations/#animations 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be light-blue
|
css-filters-animation-saturate reference/css-filters-animation-saturate-ref CSS Filters Animation: Saturate http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-saturate,http://www.w3.org/TR/css3-animations/#animations 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be light-blue
|
||||||
css-filters-animation-sepia reference/css-filters-animation-sepia-ref CSS Filters Animation: Sepia http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-sepia,http://www.w3.org/TR/css3-animations/#animations 36a7316bfb518ea1cdefd38151449383c02b57a0 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be half-sepia
|
css-filters-animation-sepia reference/css-filters-animation-sepia-ref CSS Filters Animation: Sepia http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-sepia,http://www.w3.org/TR/css3-animations/#animations 36a7316bfb518ea1cdefd38151449383c02b57a0 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be half-sepia
|
||||||
vh-interpolate-pct reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations fd47cb04c7042f6379b2664b7742a5a01ea9d1a0 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
vh-interpolate-pct reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations ceef2964c18d7fd3cab6f5923fa60a633ec97442 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
vh-interpolate-px reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations 41a610e2dd418e47f56d88171dd0c52a57e06b5e `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
vh-interpolate-px reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations ade4e7b3374856c99aa9515a936630f49c5c44fb `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
vh-interpolate-vh reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations 42ccc23cc2f90272644bd0188261dacba081ccb2 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
vh-interpolate-vh reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations 9a46dd5fa51b77278d6d50f7c7f862592aea3413 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
||||||
|
|
|
@ -10,9 +10,9 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-iteration-count" rel="help" />
|
||||||
<meta content="animated" name="flags" />
|
<meta content="animated" name="flags" />
|
||||||
<meta content="When animation-direction is set to alternate,
|
<meta content="When animation-direction is set to alternate,
|
||||||
animation cycle will iteration that are
|
animation cycle will iteration that are
|
||||||
odd counts are played in the normal direction,
|
odd counts are played in the normal direction,
|
||||||
and the animation cycle iterations that are
|
and the animation cycle iterations that are
|
||||||
even counts are played in a reverse direction." name="assert" />
|
even counts are played in a reverse direction." name="assert" />
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
animation-duration: 10s;
|
animation-duration: 10s;
|
||||||
animation-direction: normal;
|
animation-direction: normal;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
<div>Filler Text</div>
|
<div>Filler Text</div>
|
||||||
<script>
|
<script>
|
||||||
var div = document.getElementsByTagName("div");
|
var div = document.getElementsByTagName("div");
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
div[0].style.display = "none";
|
div[0].style.display = "none";
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
animation-name: sample;
|
animation-name: sample;
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-fill-mode: none;
|
animation-fill-mode: none;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -7,15 +7,15 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-fill-mode" rel="help" />
|
||||||
<meta content="animated" name="flags" />
|
<meta content="animated" name="flags" />
|
||||||
<meta content="When animation-fill-mode is set to forwards,
|
<meta content="When animation-fill-mode is set to forwards,
|
||||||
animation will apply the property values for the time the amination ended
|
animation will apply the property values for the time the amination ended
|
||||||
after the animation ends." name="assert" />
|
after the animation ends." name="assert" />
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
animation-name: sample;
|
animation-name: sample;
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-delay: 5s;
|
animation-delay: 5s;
|
||||||
animation-fill-mode: backwards;
|
animation-fill-mode: backwards;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
animation-duration: 5s;
|
animation-duration: 5s;
|
||||||
animation-delay: 5s;
|
animation-delay: 5s;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
|
|
||||||
background-color: blue;
|
background-color: blue;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
</head><body>
|
</head><body>
|
||||||
<p>
|
<p>
|
||||||
Test passes if there is a filled blue square with 'Filler Text',
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
which starts moving right to left along the yellow bar,
|
which starts moving right to left along the yellow bar,
|
||||||
and pauses in the middle after about 2 seconds' animation.
|
and pauses in the middle after about 2 seconds' animation.
|
||||||
</p>
|
</p>
|
||||||
<div id="test-animation-paused">Filler Text</div>
|
<div id="test-animation-paused">Filler Text</div>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
|
||||||
<meta content="animated" name="flags" />
|
<meta content="animated" name="flags" />
|
||||||
<meta content="Check that animation-timing-function is set to ease-in-out,
|
<meta content="Check that animation-timing-function is set to ease-in-out,
|
||||||
animation will start slow, gain acceleration in the middel
|
animation will start slow, gain acceleration in the middel
|
||||||
and again slow down at the end." name="assert" />
|
and again slow down at the end." name="assert" />
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
|
||||||
<meta content="animated" name="flags" />
|
<meta content="animated" name="flags" />
|
||||||
<meta content="Check that animation-timing-function is set to ease-out,
|
<meta content="Check that animation-timing-function is set to ease-out,
|
||||||
animation will start with higher (than the normal) speed
|
animation will start with higher (than the normal) speed
|
||||||
and relatively slow down as time progresses." name="assert" />
|
and relatively slow down as time progresses." name="assert" />
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
@ -35,7 +35,7 @@
|
||||||
</head><body>
|
</head><body>
|
||||||
<p>
|
<p>
|
||||||
Test passes if there is a filled blue square with 'Filler Text',
|
Test passes if there is a filled blue square with 'Filler Text',
|
||||||
which starts moving from right to left; animation starts and relatively
|
which starts moving from right to left; animation starts and relatively
|
||||||
slows down as time progresses.
|
slows down as time progresses.
|
||||||
</p>
|
</p>
|
||||||
<div>Filler Text</div>
|
<div>Filler Text</div>
|
||||||
|
|
|
@ -8,8 +8,8 @@
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-duration" rel="help" />
|
||||||
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
|
<link href="https://drafts.csswg.org/css-animations-1/#animation-timing-function" rel="help" />
|
||||||
<meta content="animated" name="flags" />
|
<meta content="animated" name="flags" />
|
||||||
<meta content="When animation-timing-function is set to linear,
|
<meta content="When animation-timing-function is set to linear,
|
||||||
animation will progress over one cycle of its duration
|
animation will progress over one cycle of its duration
|
||||||
with constant speed." name="assert" />
|
with constant speed." name="assert" />
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
|
<p>Test passes if you see a green square rotating once on top of a static blue square and no red.</p>
|
||||||
|
|
||||||
<div class="region">
|
<div class="region">
|
||||||
<p> </p>
|
<p> </p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -50,4 +50,5 @@
|
||||||
xxxxx<br />
|
xxxxx<br />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -23,7 +23,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
<p>Test passes if you see a rotating green square on top of a static blue square and no red.</p>
|
||||||
|
|
||||||
<div class="region">
|
<div class="region">
|
||||||
<div class="transformed flow rotate once">
|
<div class="transformed flow rotate once">
|
||||||
xxxxx<br />
|
xxxxx<br />
|
||||||
|
@ -34,4 +34,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -2,35 +2,35 @@
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>
|
<title>
|
||||||
CSS Values and Units Test:
|
CSS Values and Units Test:
|
||||||
Viewport units are interpolated correctly
|
Viewport units are interpolated correctly
|
||||||
</title>
|
</title>
|
||||||
<meta content="
|
<meta content="
|
||||||
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
" name="assert" />
|
" name="assert" />
|
||||||
|
|
||||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" />
|
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" />
|
||||||
|
|
||||||
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" />
|
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" />
|
||||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" />
|
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" />
|
||||||
|
|
||||||
<link href="reference/all-green.xht" rel="match" />
|
<link href="reference/all-green.xht" rel="match" />
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
||||||
@keyframes anim {
|
@keyframes anim {
|
||||||
from { width: 0%; height: 0%; }
|
from { width: 0%; height: 0%; }
|
||||||
to { width: 200vw; height: 200vh; }
|
to { width: 200vw; height: 200vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
@ -2,35 +2,35 @@
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>
|
<title>
|
||||||
CSS Values and Units Test:
|
CSS Values and Units Test:
|
||||||
Viewport units are interpolated correctly
|
Viewport units are interpolated correctly
|
||||||
</title>
|
</title>
|
||||||
<meta content="
|
<meta content="
|
||||||
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
" name="assert" />
|
" name="assert" />
|
||||||
|
|
||||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" />
|
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" />
|
||||||
|
|
||||||
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" />
|
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" />
|
||||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" />
|
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" />
|
||||||
|
|
||||||
<link href="reference/all-green.xht" rel="match" />
|
<link href="reference/all-green.xht" rel="match" />
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
||||||
@keyframes anim {
|
@keyframes anim {
|
||||||
from { width: 0px; height: 0px; }
|
from { width: 0px; height: 0px; }
|
||||||
to { width: 200vw; height: 200vh; }
|
to { width: 200vw; height: 200vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
@ -2,35 +2,35 @@
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>
|
<title>
|
||||||
CSS Values and Units Test:
|
CSS Values and Units Test:
|
||||||
Viewport units are interpolated correctly
|
Viewport units are interpolated correctly
|
||||||
</title>
|
</title>
|
||||||
<meta content="
|
<meta content="
|
||||||
The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
||||||
" name="assert" />
|
" name="assert" />
|
||||||
|
|
||||||
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" />
|
<link href="mailto:fremycompany.developer@yahoo.fr" rel="author" title="François REMY" />
|
||||||
|
|
||||||
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" />
|
<link href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths" rel="help" />
|
||||||
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" />
|
<link href="http://www.w3.org/TR/css3-animations/#animations" rel="help" />
|
||||||
|
|
||||||
<link href="reference/all-green.xht" rel="match" />
|
<link href="reference/all-green.xht" rel="match" />
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
||||||
@keyframes anim {
|
@keyframes anim {
|
||||||
from { width: 75vw; height: 75vh; }
|
from { width: 75vw; height: 75vh; }
|
||||||
to { width: 125vw; height: 125vh; }
|
to { width: 125vw; height: 125vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
#outer { animation: anim 2000000s; animation-delay: -1000000s; }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
|
@ -23,37 +23,37 @@
|
||||||
assert_equals(cs.getPropertyValue("background-image"),
|
assert_equals(cs.getPropertyValue("background-image"),
|
||||||
"none", "background initial value for background-image");
|
"none", "background initial value for background-image");
|
||||||
}, "background_initial_image");
|
}, "background_initial_image");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-position"),
|
assert_equals(cs.getPropertyValue("background-position"),
|
||||||
"0% 0%", "background initial value for background-position");
|
"0% 0%", "background initial value for background-position");
|
||||||
}, "background_initial_position");
|
}, "background_initial_position");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-size"),
|
assert_equals(cs.getPropertyValue("background-size"),
|
||||||
"auto", "background initial value for background-size");
|
"auto", "background initial value for background-size");
|
||||||
}, "background_initial_size");
|
}, "background_initial_size");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-repeat"),
|
assert_equals(cs.getPropertyValue("background-repeat"),
|
||||||
"repeat", "background initial value for background-repeat");
|
"repeat", "background initial value for background-repeat");
|
||||||
}, "background_initial_repeat");
|
}, "background_initial_repeat");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-attachment"),
|
assert_equals(cs.getPropertyValue("background-attachment"),
|
||||||
"scroll", "background initial value for background-attachment");
|
"scroll", "background initial value for background-attachment");
|
||||||
}, "background_initial_attachment");
|
}, "background_initial_attachment");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-origin"),
|
assert_equals(cs.getPropertyValue("background-origin"),
|
||||||
"padding-box", "background initial value for background-origin");
|
"padding-box", "background initial value for background-origin");
|
||||||
}, "background_initial_origin");
|
}, "background_initial_origin");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-clip"),
|
assert_equals(cs.getPropertyValue("background-clip"),
|
||||||
"border-box", "background initial value for background-clip");
|
"border-box", "background initial value for background-clip");
|
||||||
}, "background_initial_clip");
|
}, "background_initial_clip");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-color"),
|
assert_equals(cs.getPropertyValue("background-color"),
|
||||||
"transparent", "background initial value for background-color");
|
"transparent", "background initial value for background-color");
|
||||||
|
|
|
@ -23,37 +23,37 @@
|
||||||
assert_equals(cs.getPropertyValue("background-image"),
|
assert_equals(cs.getPropertyValue("background-image"),
|
||||||
"url(support/60x60-green.png)", "background specified value for background-image");
|
"url(support/60x60-green.png)", "background specified value for background-image");
|
||||||
}, "background_specified_image");
|
}, "background_specified_image");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-position"),
|
assert_equals(cs.getPropertyValue("background-position"),
|
||||||
"40% 50%", "background specified value for background-position");
|
"40% 50%", "background specified value for background-position");
|
||||||
}, "background_specified_position");
|
}, "background_specified_position");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-size"),
|
assert_equals(cs.getPropertyValue("background-size"),
|
||||||
"10em 10em", "background specified value for background-size");
|
"10em 10em", "background specified value for background-size");
|
||||||
}, "background_specified_size");
|
}, "background_specified_size");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-repeat"),
|
assert_equals(cs.getPropertyValue("background-repeat"),
|
||||||
"round round", "background specified value for background-repeat");
|
"round round", "background specified value for background-repeat");
|
||||||
}, "background_specified_repeat");
|
}, "background_specified_repeat");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-attachment"),
|
assert_equals(cs.getPropertyValue("background-attachment"),
|
||||||
"fixed", "background specified value for background-attachment");
|
"fixed", "background specified value for background-attachment");
|
||||||
}, "background_specified_attachment");
|
}, "background_specified_attachment");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-origin"),
|
assert_equals(cs.getPropertyValue("background-origin"),
|
||||||
"border-box", "background specified value for background-origin");
|
"border-box", "background specified value for background-origin");
|
||||||
}, "background_specified_origin");
|
}, "background_specified_origin");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-clip"),
|
assert_equals(cs.getPropertyValue("background-clip"),
|
||||||
"border-box", "background specified value for background-clip");
|
"border-box", "background specified value for background-clip");
|
||||||
}, "background_specified_clip");
|
}, "background_specified_clip");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-color"),
|
assert_equals(cs.getPropertyValue("background-color"),
|
||||||
"gray", "background specified value for background-color");
|
"gray", "background specified value for background-color");
|
||||||
|
|
|
@ -23,37 +23,37 @@
|
||||||
assert_equals(cs.getPropertyValue("background-image"),
|
assert_equals(cs.getPropertyValue("background-image"),
|
||||||
"none", "background initial value for background-image");
|
"none", "background initial value for background-image");
|
||||||
}, "background_specified_color_image");
|
}, "background_specified_color_image");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-position"),
|
assert_equals(cs.getPropertyValue("background-position"),
|
||||||
"0% 0%", "background initial value for background-position");
|
"0% 0%", "background initial value for background-position");
|
||||||
}, "background_specified_color_position");
|
}, "background_specified_color_position");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-size"),
|
assert_equals(cs.getPropertyValue("background-size"),
|
||||||
"auto", "background initial value for background-size");
|
"auto", "background initial value for background-size");
|
||||||
}, "background_specified_color_size");
|
}, "background_specified_color_size");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-repeat"),
|
assert_equals(cs.getPropertyValue("background-repeat"),
|
||||||
"repeat", "background initial value for background-repeat");
|
"repeat", "background initial value for background-repeat");
|
||||||
}, "background_specified_color_repeat");
|
}, "background_specified_color_repeat");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-attachment"),
|
assert_equals(cs.getPropertyValue("background-attachment"),
|
||||||
"scroll", "background initial value for background-attachment");
|
"scroll", "background initial value for background-attachment");
|
||||||
}, "background_specified_color_attachment");
|
}, "background_specified_color_attachment");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-origin"),
|
assert_equals(cs.getPropertyValue("background-origin"),
|
||||||
"padding-box", "background initial value for background-origin");
|
"padding-box", "background initial value for background-origin");
|
||||||
}, "background_specified_color_origin");
|
}, "background_specified_color_origin");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-clip"),
|
assert_equals(cs.getPropertyValue("background-clip"),
|
||||||
"border-box", "background initial value for background-clip");
|
"border-box", "background initial value for background-clip");
|
||||||
}, "background_specified_color_clip");
|
}, "background_specified_color_clip");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-color"),
|
assert_equals(cs.getPropertyValue("background-color"),
|
||||||
"red", "background specified value for background-color");
|
"red", "background specified value for background-color");
|
||||||
|
|
|
@ -5,8 +5,8 @@
|
||||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help" title="3.10. Backgrounds Shorthand: the 'background' property">
|
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help" title="3.10. Backgrounds Shorthand: the 'background' property">
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
|
||||||
<!--
|
<!--
|
||||||
http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html
|
http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html
|
||||||
-->
|
-->
|
||||||
<link href="reference/background-334-ref.htm" rel="match">
|
<link href="reference/background-334-ref.htm" rel="match">
|
||||||
<meta content="image" name="flags">
|
<meta content="image" name="flags">
|
||||||
|
|
|
@ -18,12 +18,12 @@
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<script>
|
<script>
|
||||||
var cs = getComputedStyle(document.getElementById("test"), null);
|
var cs = getComputedStyle(document.getElementById("test"), null);
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-origin"),
|
assert_equals(cs.getPropertyValue("background-origin"),
|
||||||
"content-box", "background specified value for background-origin");
|
"content-box", "background specified value for background-origin");
|
||||||
}, "background_specified_box_one_origin");
|
}, "background_specified_box_one_origin");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-clip"),
|
assert_equals(cs.getPropertyValue("background-clip"),
|
||||||
"content-box", "background specified value for background-clip");
|
"content-box", "background specified value for background-clip");
|
||||||
|
|
|
@ -18,12 +18,12 @@
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<script>
|
<script>
|
||||||
var cs = getComputedStyle(document.getElementById("test"), null);
|
var cs = getComputedStyle(document.getElementById("test"), null);
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-origin"),
|
assert_equals(cs.getPropertyValue("background-origin"),
|
||||||
"border-box", "background specified value for background-origin");
|
"border-box", "background specified value for background-origin");
|
||||||
}, "background_specified_box_two_origin");
|
}, "background_specified_box_two_origin");
|
||||||
|
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(cs.getPropertyValue("background-clip"),
|
assert_equals(cs.getPropertyValue("background-clip"),
|
||||||
"padding-box", "background specified value for background-clip");
|
"padding-box", "background specified value for background-clip");
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||||
<title>
|
<title>
|
||||||
CSS Test: 'Background-attachment' with value 'fixed'
|
CSS Test: 'Background-attachment' with value 'fixed'
|
||||||
</title>
|
</title>
|
||||||
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer">
|
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer">
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
|
||||||
|
@ -19,11 +19,11 @@
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
Test passes if the cat image does not move when the blue-bordered containing block or the viewport is scrolled.
|
Test passes if the cat image does not move when the blue-bordered containing block or the viewport is scrolled.
|
||||||
</p>
|
</p>
|
||||||
<div id="test-container">
|
<div id="test-container">
|
||||||
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
|
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
|
||||||
|
|
|
@ -19,19 +19,19 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Test passes if the images of all the cats scroll when the box is scrolled. (Presence of cats behind the double border is UA dependent). </p>
|
<p>Test passes if the images of all the cats scroll when the box is scrolled. (Presence of cats behind the double border is UA dependent). </p>
|
||||||
<div>Filler Text Filler Text
|
<div>Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text Filler Text
|
Filler Text Filler Text Filler Text
|
||||||
Filler Text Filler Text </div>
|
Filler Text Filler Text </div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||||
<title>
|
<title>
|
||||||
CSS Test: 'Background-attachment' with value 'local'
|
CSS Test: 'Background-attachment' with value 'local'
|
||||||
</title>
|
</title>
|
||||||
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer">
|
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer">
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help">
|
||||||
|
@ -19,11 +19,11 @@
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
Test passes if the image of the cat scrolls out of view when the blue-bordered containing block is scrolled.
|
Test passes if the image of the cat scrolls out of view when the blue-bordered containing block is scrolled.
|
||||||
</p>
|
</p>
|
||||||
<div id="test-container">
|
<div id="test-container">
|
||||||
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
|
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
|
||||||
|
|
|
@ -16,19 +16,19 @@
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||||
"border-box", "background-clip initial value");
|
"border-box", "background-clip initial value");
|
||||||
}, "background-clip_initial");
|
}, "background-clip_initial");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundClip = "border-box";
|
document.getElementById("test").style.backgroundClip = "border-box";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||||
"border-box", "background-clip supporting value");
|
"border-box", "background-clip supporting value");
|
||||||
}, "background-clip_border-box");
|
}, "background-clip_border-box");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundClip = "padding-box";
|
document.getElementById("test").style.backgroundClip = "padding-box";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||||
"padding-box", "background-clip supporting value");
|
"padding-box", "background-clip supporting value");
|
||||||
}, "background-clip_padding-box");
|
}, "background-clip_padding-box");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundClip = "content-box";
|
document.getElementById("test").style.backgroundClip = "content-box";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types">
|
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types">
|
||||||
<!--
|
<!--
|
||||||
"
|
"
|
||||||
all properties defined in this specification also accept
|
all properties defined in this specification also accept
|
||||||
the inherit keyword as their property value
|
the inherit keyword as their property value
|
||||||
"
|
"
|
||||||
CSS Backgrounds and Borders Module Level 3
|
CSS Backgrounds and Borders Module Level 3
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<html><head>
|
<html><head>
|
||||||
|
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
<title>CSS Background and Borders Test: background-clip - content-box with background-color</title>
|
<title>CSS Background and Borders Test: background-clip - content-box with background-color</title>
|
||||||
|
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot">
|
||||||
|
@ -33,4 +33,5 @@
|
||||||
<div></div>
|
<div></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -11,7 +11,7 @@
|
||||||
div{
|
div{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#test{
|
#test{
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
border: 5px dotted blue;
|
border: 5px dotted blue;
|
||||||
|
@ -32,6 +32,6 @@
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html><head>
|
<html><head>
|
||||||
<title>CSS Backgrounds and Borders Test: background-clip_border-box</title>
|
<title>CSS Backgrounds and Borders Test: background-clip_border-box</title>
|
||||||
<link href="dajiangxiaoyan@126.com" rel="author" title="Xiaoyan Jiang">
|
<link href="dajiangxiaoyan@126.com" rel="author" title="Xiaoyan Jiang">
|
||||||
<link href="jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang">
|
<link href="jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang">
|
||||||
|
@ -7,7 +7,7 @@
|
||||||
<link href="reference/background_clip_padding-box.htm" rel="match">
|
<link href="reference/background_clip_padding-box.htm" rel="match">
|
||||||
<meta content="Test passes if border is blue and dotted without red background" name="assert">
|
<meta content="Test passes if border is blue and dotted without red background" name="assert">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* Positioned container allows for the self-describing statement to still
|
/* Positioned container allows for the self-describing statement to still
|
||||||
be visible in the case of failure */
|
be visible in the case of failure */
|
||||||
.container {
|
.container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
background-position: 30px 30px, 60px 60px, 90px 90px;
|
background-position: 30px 30px, 60px 60px, 90px 90px;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
#parent
|
#parent
|
||||||
{
|
{
|
||||||
width: 290px;
|
width: 290px;
|
||||||
background: red;
|
background: red;
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
#content {
|
#content {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
font: 100px Ahem;
|
font: 100px Ahem;
|
||||||
}
|
}
|
||||||
#content::first-letter {
|
#content::first-letter {
|
||||||
background-image: url("support/cat.png"); /* 98 w. by 99px h. */
|
background-image: url("support/cat.png"); /* 98 w. by 99px h. */
|
||||||
|
|
|
@ -16,19 +16,19 @@
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||||
"padding-box", "background-origin initial value");
|
"padding-box", "background-origin initial value");
|
||||||
}, "background-origin_initial");
|
}, "background-origin_initial");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundOrigin = "border-box";
|
document.getElementById("test").style.backgroundOrigin = "border-box";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||||
"border-box", "background-origin supporting value");
|
"border-box", "background-origin supporting value");
|
||||||
}, "background-origin_border-box");
|
}, "background-origin_border-box");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundOrigin = "padding-box";
|
document.getElementById("test").style.backgroundOrigin = "padding-box";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||||
"padding-box", "background-origin supporting value");
|
"padding-box", "background-origin supporting value");
|
||||||
}, "background-origin_padding-box");
|
}, "background-origin_padding-box");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundOrigin = "content-box";
|
document.getElementById("test").style.backgroundOrigin = "content-box";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
border: transparent dotted 5px;
|
border: transparent dotted 5px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types">
|
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types">
|
||||||
<!--
|
<!--
|
||||||
"
|
"
|
||||||
all properties defined in this specification also accept
|
all properties defined in this specification also accept
|
||||||
the inherit keyword as their property value
|
the inherit keyword as their property value
|
||||||
"
|
"
|
||||||
CSS Backgrounds and Borders Module Level 3
|
CSS Backgrounds and Borders Module Level 3
|
||||||
|
|
|
@ -14,8 +14,8 @@
|
||||||
background-repeat: round; /* round round */
|
background-repeat: round; /* round round */
|
||||||
height: 220px;
|
height: 220px;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 220px wide by 220px tall.
|
Background positioning area is 220px wide by 220px tall.
|
||||||
So, the height of the image is rounded to 110px, [220px / rounded (220px / 99px)]
|
So, the height of the image is rounded to 110px, [220px / rounded (220px / 99px)]
|
||||||
and the width of the image is rounded to 110px, [220px / rounded (220px / 98px)].
|
and the width of the image is rounded to 110px, [220px / rounded (220px / 98px)].
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
background-image: url("../support/red_space_pb.png");
|
background-image: url("../support/red_space_pb.png");
|
||||||
}
|
}
|
||||||
#test
|
#test
|
||||||
{
|
{
|
||||||
margin-top: -378px;
|
margin-top: -378px;
|
||||||
width: 2.9in;
|
width: 2.9in;
|
||||||
|
|
|
@ -16,115 +16,115 @@
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"auto", "background-size initial value");
|
"auto", "background-size initial value");
|
||||||
}, "background-size_initial");
|
}, "background-size_initial");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "auto";
|
document.getElementById("test").style.backgroundSize = "auto";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"auto", "background-size supporting value");
|
"auto", "background-size supporting value");
|
||||||
}, "background-size_auto");
|
}, "background-size_auto");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "cover";
|
document.getElementById("test").style.backgroundSize = "cover";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"cover", "background-size supporting value");
|
"cover", "background-size supporting value");
|
||||||
}, "background-size_cover");
|
}, "background-size_cover");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "contain";
|
document.getElementById("test").style.backgroundSize = "contain";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"contain", "background-size supporting value");
|
"contain", "background-size supporting value");
|
||||||
}, "background-size_contain");
|
}, "background-size_contain");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "0px";
|
document.getElementById("test").style.backgroundSize = "0px";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"0px", "background-size supporting value");
|
"0px", "background-size supporting value");
|
||||||
}, "background-size_length_zero");
|
}, "background-size_length_zero");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "-0px";
|
document.getElementById("test").style.backgroundSize = "-0px";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"0px", "background-size supporting value");
|
"0px", "background-size supporting value");
|
||||||
}, "background-size_length_negative_zero");
|
}, "background-size_length_negative_zero");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "+0px";
|
document.getElementById("test").style.backgroundSize = "+0px";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"0px", "background-size supporting value");
|
"0px", "background-size supporting value");
|
||||||
}, "background-size_length_positive_zero");
|
}, "background-size_length_positive_zero");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "15px";
|
document.getElementById("test").style.backgroundSize = "15px";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"15px", "background-size supporting value");
|
"15px", "background-size supporting value");
|
||||||
}, "background-size_length_normal");
|
}, "background-size_length_normal");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "0%";
|
document.getElementById("test").style.backgroundSize = "0%";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"0%", "background-size supporting value");
|
"0%", "background-size supporting value");
|
||||||
}, "background-size_percentage_min");
|
}, "background-size_percentage_min");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "50%";
|
document.getElementById("test").style.backgroundSize = "50%";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"50%", "background-size supporting value");
|
"50%", "background-size supporting value");
|
||||||
}, "background-size_percentage_normal");
|
}, "background-size_percentage_normal");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "100%";
|
document.getElementById("test").style.backgroundSize = "100%";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"100%", "background-size supporting value");
|
"100%", "background-size supporting value");
|
||||||
}, "background-size_percentage_max");
|
}, "background-size_percentage_max");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "auto auto";
|
document.getElementById("test").style.backgroundSize = "auto auto";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"auto auto", "background-size supporting value");
|
"auto auto", "background-size supporting value");
|
||||||
}, "background-size_auto_auto");
|
}, "background-size_auto_auto");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "auto 15px";
|
document.getElementById("test").style.backgroundSize = "auto 15px";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"auto 15px", "background-size supporting value");
|
"auto 15px", "background-size supporting value");
|
||||||
}, "background-size_auto_length");
|
}, "background-size_auto_length");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "auto 50%";
|
document.getElementById("test").style.backgroundSize = "auto 50%";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"auto 50%", "background-size supporting value");
|
"auto 50%", "background-size supporting value");
|
||||||
}, "background-size_auto_percentage");
|
}, "background-size_auto_percentage");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "15px auto";
|
document.getElementById("test").style.backgroundSize = "15px auto";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"15px auto", "background-size supporting value");
|
"15px auto", "background-size supporting value");
|
||||||
}, "background-size_length_auto");
|
}, "background-size_length_auto");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "15px 15px";
|
document.getElementById("test").style.backgroundSize = "15px 15px";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"15px 15px", "background-size supporting value");
|
"15px 15px", "background-size supporting value");
|
||||||
}, "background-size_length_length");
|
}, "background-size_length_length");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "15px 50%";
|
document.getElementById("test").style.backgroundSize = "15px 50%";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"15px 50%", "background-size supporting value");
|
"15px 50%", "background-size supporting value");
|
||||||
}, "background-size_length_percentage");
|
}, "background-size_length_percentage");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "50% auto";
|
document.getElementById("test").style.backgroundSize = "50% auto";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"50% auto", "background-size supporting value");
|
"50% auto", "background-size supporting value");
|
||||||
}, "background-size_percentage_auto");
|
}, "background-size_percentage_auto");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "50% 15px";
|
document.getElementById("test").style.backgroundSize = "50% 15px";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
"50% 15px", "background-size supporting value");
|
"50% 15px", "background-size supporting value");
|
||||||
}, "background-size_percentage_length");
|
}, "background-size_percentage_length");
|
||||||
|
|
||||||
document.getElementById("test").style.backgroundSize = "50% 50%";
|
document.getElementById("test").style.backgroundSize = "50% 50%";
|
||||||
test(function() {
|
test(function() {
|
||||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||||
<title>CSS Test: Value of 'auto' is used for y dimension in 'background-size'</title>
|
<title>CSS Test: Value of 'auto' is used for y dimension in 'background-size'</title>
|
||||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
|
<link href="http://www.microsoft.com/" rel="author" title="Microsoft">
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
|
@ -24,9 +24,9 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>Test passes if there is no red visible on the page.</p>
|
<p>Test passes if there is no red visible on the page.</p>
|
||||||
<div class="test"></div>
|
<div class="test"></div>
|
||||||
<div class="reference"></div>
|
<div class="reference"></div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -5,8 +5,8 @@
|
||||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
|
||||||
<!--
|
<!--
|
||||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-008-review.html
|
http://www.gtalbot.org/BrowserBugsSection/review/background-size-008-review.html
|
||||||
-->
|
-->
|
||||||
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
<meta content="image" name="flags">
|
<meta content="image" name="flags">
|
||||||
|
|
|
@ -23,10 +23,10 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
background-size: 45% is relative to the background positioning area
|
background-size: 45% is relative to the background positioning area
|
||||||
which is 100px by 100px in this test.
|
which is 100px by 100px in this test.
|
||||||
*/
|
*/
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<title>CSS Backgrounds and Borders Test: background-size '100% 100%' with background-origin 'content-box'</title>
|
<title>CSS Backgrounds and Borders Test: background-size '100% 100%' with background-origin 'content-box'</title>
|
||||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-09 -->
|
||||||
<!--
|
<!--
|
||||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-021-review.html
|
http://www.gtalbot.org/BrowserBugsSection/review/background-size-021-review.html
|
||||||
-->
|
-->
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
||||||
|
@ -33,8 +33,8 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 100px wide by 100px tall.
|
Background positioning area is 100px wide by 100px tall.
|
||||||
So, the image should be scaled to 100px by 100px.
|
So, the image should be scaled to 100px by 100px.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -22,8 +22,8 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 160px wide by 160px tall.
|
Background positioning area is 160px wide by 160px tall.
|
||||||
So, the image should be scaled to 80px by 80px (near),
|
So, the image should be scaled to 80px by 80px (near),
|
||||||
and repeated once in both horizontally and vertically.
|
and repeated once in both horizontally and vertically.
|
||||||
|
|
|
@ -25,8 +25,8 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background painting area is 150px wide by 150px tall.
|
Background painting area is 150px wide by 150px tall.
|
||||||
So, the image should be scaled to 75px by 75px (near),
|
So, the image should be scaled to 75px by 75px (near),
|
||||||
and repeated once in both horizontally and vertically.
|
and repeated once in both horizontally and vertically.
|
||||||
|
|
|
@ -28,8 +28,8 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 150px wide by 150px tall,
|
Background positioning area is 150px wide by 150px tall,
|
||||||
and background painting area is 100px wide by 100px tall.
|
and background painting area is 100px wide by 100px tall.
|
||||||
So, the image should be scaled to 150px by 150px,
|
So, the image should be scaled to 150px by 150px,
|
||||||
|
|
|
@ -13,20 +13,20 @@
|
||||||
<style>
|
<style>
|
||||||
div {
|
div {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
background-image: url("support/100x100-blue-and-orange.png");
|
background-image: url("support/100x100-blue-and-orange.png");
|
||||||
background-repeat: round; /* round round */
|
background-repeat: round; /* round round */
|
||||||
background-size: auto 61px;
|
background-size: auto 61px;
|
||||||
height: 210px;
|
height: 210px;
|
||||||
width: 210px;
|
width: 210px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 210px wide by 210px tall.
|
Background positioning area is 210px wide by 210px tall.
|
||||||
The set background size height is 61px. But because
|
The set background size height is 61px. But because
|
||||||
background repeat is round, then the background image
|
background repeat is round, then the background image
|
||||||
is rescaled as follows:
|
is rescaled as follows:
|
||||||
Newest height = 210px / (round [210px / 61px]);
|
Newest height = 210px / (round [210px / 61px]);
|
||||||
Newest height = 210px / (round [3.44]);
|
Newest height = 210px / (round [3.44]);
|
||||||
Newest height = 210px / (3);
|
Newest height = 210px / (3);
|
||||||
Newest height = 70px;
|
Newest height = 70px;
|
||||||
|
|
||||||
The width is rescaled to 70px to keep the original aspect ratio.
|
The width is rescaled to 70px to keep the original aspect ratio.
|
||||||
|
|
|
@ -16,8 +16,8 @@
|
||||||
background-size: auto; /* default */
|
background-size: auto; /* default */
|
||||||
height: 198px;
|
height: 198px;
|
||||||
width: 196px;
|
width: 196px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 196px wide by 198px tall.
|
Background positioning area is 196px wide by 198px tall.
|
||||||
So, the image should be repeated twice in horizontal and vertical.
|
So, the image should be repeated twice in horizontal and vertical.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -18,8 +18,8 @@
|
||||||
background-size: 52px auto;
|
background-size: 52px auto;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
width: 156px;
|
width: 156px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 156px wide by 180px tall.
|
Background positioning area is 156px wide by 180px tall.
|
||||||
The width of the background image is 52px.
|
The width of the background image is 52px.
|
||||||
So, the height is rescaled to 52px to keep the original aspect ratio.
|
So, the height is rescaled to 52px to keep the original aspect ratio.
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
height is rescaled as following:
|
height is rescaled as following:
|
||||||
Newest height = 180px / (round [180px / 52px]);
|
Newest height = 180px / (round [180px / 52px]);
|
||||||
Newest height = 180px / (round [3.46]);
|
Newest height = 180px / (round [3.46]);
|
||||||
Newest height = 180px / (3);
|
Newest height = 180px / (3);
|
||||||
Newest height = 60px;
|
Newest height = 60px;
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-15 -->
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-15 -->
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
||||||
<link href="reference/background-size-028-ref.htm" rel="match">
|
<link href="reference/background-size-028-ref.htm" rel="match">
|
||||||
|
|
||||||
<meta content="image" name="flags">
|
<meta content="image" name="flags">
|
||||||
<meta content="Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions." name="assert">
|
<meta content="Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions." name="assert">
|
||||||
<style>
|
<style>
|
||||||
|
@ -17,10 +17,10 @@
|
||||||
background-size: 50px; /* 50px auto */
|
background-size: 50px; /* 50px auto */
|
||||||
height: 200px;
|
height: 200px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 200px wide by 200px tall.
|
Background positioning area is 200px wide by 200px tall.
|
||||||
So, the image should be rescaled to 50px by 50px and
|
So, the image should be rescaled to 50px by 50px and
|
||||||
then be repeated four times in horizontal and vertical directions.
|
then be repeated four times in horizontal and vertical directions.
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,18 +18,18 @@
|
||||||
background-size: 52px auto;
|
background-size: 52px auto;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 180px wide by 180px tall.
|
Background positioning area is 180px wide by 180px tall.
|
||||||
The width of the background image is 52px.
|
The width of the background image is 52px.
|
||||||
But, because background-repeat is set to round repeat, the
|
But, because background-repeat is set to round repeat, the
|
||||||
width is rescaled as following:
|
width is rescaled as following:
|
||||||
Newest width = 180px / (round [180px / 52px]);
|
Newest width = 180px / (round [180px / 52px]);
|
||||||
Newest width = 180px / (round [3.46]);
|
Newest width = 180px / (round [3.46]);
|
||||||
Newest width = 180px / (3);
|
Newest width = 180px / (3);
|
||||||
Newest width = 60px;
|
Newest width = 60px;
|
||||||
|
|
||||||
Then the height is rescaled to from 100px to 60px to keep
|
Then the height is rescaled to from 100px to 60px to keep
|
||||||
the original aspect ratio.
|
the original aspect ratio.
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,8 +17,8 @@
|
||||||
background-size: 25% 25%;
|
background-size: 25% 25%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 200px wide by 200px tall.
|
Background positioning area is 200px wide by 200px tall.
|
||||||
So, the image should be rescaled to 50px by 50px
|
So, the image should be rescaled to 50px by 50px
|
||||||
and be repeated four times in horizontal and vertical.
|
and be repeated four times in horizontal and vertical.
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
#ref-overlapped-red {
|
#ref-overlapped-red {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
#test-overlapping-square {
|
#test-overlapping-square {
|
||||||
background-image: url(support/100x100-blue-and-orange.png);
|
background-image: url(support/100x100-blue-and-orange.png);
|
||||||
|
@ -23,9 +23,9 @@
|
||||||
bottom: 150px;
|
bottom: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
Background positioning area is 250px wide by 150px tall.
|
Background positioning area is 250px wide by 150px tall.
|
||||||
The width of the background image is 20% of 250px == 50px.
|
The width of the background image is 20% of 250px == 50px.
|
||||||
The height is rescaled to 30% of 150px == 45px.
|
The height is rescaled to 30% of 150px == 45px.
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
height is rescaled as following:
|
height is rescaled as following:
|
||||||
Newest height = 150px / (round [150px / 45px]);
|
Newest height = 150px / (round [150px / 45px]);
|
||||||
Newest height = 150px / (round [3.33]);
|
Newest height = 150px / (round [3.33]);
|
||||||
Newest height = 150px / (3);
|
Newest height = 150px / (3);
|
||||||
Newest height = 50px;
|
Newest height = 50px;
|
||||||
*/
|
*/
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -9,8 +9,8 @@
|
||||||
<meta content="image" name="flags">
|
<meta content="image" name="flags">
|
||||||
<meta content="Check if background-size is able to apply to the ::first-letter pseudo-element." name="assert">
|
<meta content="Check if background-size is able to apply to the ::first-letter pseudo-element." name="assert">
|
||||||
<style>
|
<style>
|
||||||
div {color: white;}
|
div {color: white;}
|
||||||
|
|
||||||
div::first-letter {
|
div::first-letter {
|
||||||
background-image: url(support/blue96x96.png);
|
background-image: url(support/blue96x96.png);
|
||||||
background-repeat: repeat no-repeat;
|
background-repeat: repeat no-repeat;
|
||||||
|
|
|
@ -9,8 +9,8 @@
|
||||||
<meta content="image" name="flags">
|
<meta content="image" name="flags">
|
||||||
<meta content="Check if background-size is able to apply to the ::first-line pseudo-element." name="assert">
|
<meta content="Check if background-size is able to apply to the ::first-line pseudo-element." name="assert">
|
||||||
<style>
|
<style>
|
||||||
div {color: white;}
|
div {color: white;}
|
||||||
|
|
||||||
div::first-line {
|
div::first-line {
|
||||||
background-image: url(support/blue96x96.png);
|
background-image: url(support/blue96x96.png);
|
||||||
background-repeat: repeat no-repeat;
|
background-repeat: repeat no-repeat;
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
#ref-overlapped-red {
|
#ref-overlapped-red {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
#test-overlapping-green {
|
#test-overlapping-green {
|
||||||
background-image: url(support/50x50-green.png);
|
background-image: url(support/50x50-green.png);
|
||||||
|
@ -25,7 +25,7 @@
|
||||||
bottom: 100px;
|
bottom: 100px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<meta content="" name="flags">
|
<meta content="" name="flags">
|
||||||
<meta content="If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored." name="assert">
|
<meta content="If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored." name="assert">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
.reference
|
.reference
|
||||||
{
|
{
|
||||||
width: 1in;
|
width: 1in;
|
||||||
height: 1in;
|
height: 1in;
|
||||||
|
@ -40,4 +40,5 @@
|
||||||
<div class="test1"></div>
|
<div class="test1"></div>
|
||||||
<div class="test2"></div>
|
<div class="test2"></div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -5,9 +5,9 @@
|
||||||
<title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title>
|
<title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title>
|
||||||
|
|
||||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-08 -->
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-08 -->
|
||||||
<!--
|
<!--
|
||||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-001-review.html
|
http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-001-review.html
|
||||||
-->
|
-->
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property">
|
||||||
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
{
|
{
|
||||||
background-color: red;
|
background-color: red;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#test-overlapping-green
|
div#test-overlapping-green
|
||||||
|
@ -32,8 +32,8 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 200px wide by 100px tall.
|
Background positioning area is 200px wide by 100px tall.
|
||||||
So, the image should be scaled to 100px by 100px.
|
So, the image should be scaled to 100px by 100px.
|
||||||
*/
|
*/
|
||||||
|
@ -45,4 +45,5 @@
|
||||||
<div id="ref-overlapped-red"></div>
|
<div id="ref-overlapped-red"></div>
|
||||||
<div id="test-overlapping-green"></div>
|
<div id="test-overlapping-green"></div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -5,7 +5,7 @@
|
||||||
<title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title>
|
<title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title>
|
||||||
|
|
||||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-08 -->
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-08 -->
|
||||||
<!--
|
<!--
|
||||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-002-review.html
|
http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-002-review.html
|
||||||
-->
|
-->
|
||||||
|
@ -19,7 +19,7 @@
|
||||||
{
|
{
|
||||||
background-color: red;
|
background-color: red;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#test-overlapping-green
|
div#test-overlapping-green
|
||||||
|
@ -32,8 +32,8 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area is 100px wide by 200px tall.
|
Background positioning area is 100px wide by 200px tall.
|
||||||
So, the image should be scaled to 100px by 100px.
|
So, the image should be scaled to 100px by 100px.
|
||||||
*/
|
*/
|
||||||
|
@ -45,4 +45,5 @@
|
||||||
<div id="ref-overlapped-red"></div>
|
<div id="ref-overlapped-red"></div>
|
||||||
<div id="test-overlapping-green"></div>
|
<div id="test-overlapping-green"></div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -5,7 +5,7 @@
|
||||||
<title>CSS Backgrounds and Borders Test: background-size - cover keyword value</title>
|
<title>CSS Backgrounds and Borders Test: background-size - cover keyword value</title>
|
||||||
|
|
||||||
<link href="http://www.intel.com" rel="author" title="Intel">
|
<link href="http://www.intel.com" rel="author" title="Intel">
|
||||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-08 -->
|
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot"> <!-- 2012-11-08 -->
|
||||||
<!--
|
<!--
|
||||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-cover-001-review.html
|
http://www.gtalbot.org/BrowserBugsSection/review/background-size-cover-001-review.html
|
||||||
-->
|
-->
|
||||||
|
@ -33,9 +33,9 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area to cover in this
|
Background positioning area to cover in this
|
||||||
test is 100px wide by 50px tall.
|
test is 100px wide by 50px tall.
|
||||||
So, the image should be scaled to 100px by 100px.
|
So, the image should be scaled to 100px by 100px.
|
||||||
*/
|
*/
|
||||||
|
@ -47,4 +47,5 @@
|
||||||
<div id="ref-overlapped-red"></div>
|
<div id="ref-overlapped-red"></div>
|
||||||
<div id="test-overlapping-green"></div>
|
<div id="test-overlapping-green"></div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -33,9 +33,9 @@
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 0px;
|
width: 0px;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Background positioning area to cover in this
|
Background positioning area to cover in this
|
||||||
test is 50px wide by 100px tall.
|
test is 50px wide by 100px tall.
|
||||||
So, the image should be scaled to 100px by 100px.
|
So, the image should be scaled to 100px by 100px.
|
||||||
*/
|
*/
|
||||||
|
@ -47,4 +47,5 @@
|
||||||
<div id="ref-overlapped-red"></div>
|
<div id="ref-overlapped-red"></div>
|
||||||
<div id="test-overlapping-green"></div>
|
<div id="test-overlapping-green"></div>
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
|
@ -16,7 +16,7 @@
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
||||||
<link href="reference/ref-t-lime16x192-aqua16x192.htm" rel="match">
|
<link href="reference/ref-t-lime16x192-aqua16x192.htm" rel="match">
|
||||||
|
|
||||||
<meta content="svg" name="flags">
|
<meta content="svg" name="flags">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -10,16 +10,16 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title>
|
<title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title>
|
||||||
|
|
||||||
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden">
|
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden">
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help">
|
||||||
<link href="reference/background-size-vector-021-ref.htm" rel="match">
|
<link href="reference/background-size-vector-021-ref.htm" rel="match">
|
||||||
|
|
||||||
<meta content="svg" name="flags">
|
<meta content="svg" name="flags">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
|
|
|
@ -10,15 +10,15 @@
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height.svg</title>
|
<title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height.svg</title>
|
||||||
|
|
||||||
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden">
|
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden">
|
||||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
|
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
||||||
<link href="reference/background-size-vector-022-ref.htm" rel="match">
|
<link href="reference/background-size-vector-022-ref.htm" rel="match">
|
||||||
|
|
||||||
<meta content="svg" name="flags">
|
<meta content="svg" name="flags">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help">
|
||||||
<link href="reference/background-size-vector-021-ref.htm" rel="match">
|
<link href="reference/background-size-vector-021-ref.htm" rel="match">
|
||||||
|
|
||||||
<meta content="svg" name="flags">
|
<meta content="svg" name="flags">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
||||||
<link href="reference/background-size-vector-022-ref.htm" rel="match">
|
<link href="reference/background-size-vector-022-ref.htm" rel="match">
|
||||||
|
|
||||||
<meta content="svg" name="flags">
|
<meta content="svg" name="flags">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -16,8 +16,8 @@
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help">
|
||||||
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help">
|
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help">
|
||||||
<link href="reference/ref-t-lime24x192-aqua24x192.htm" rel="match">
|
<link href="reference/ref-t-lime24x192-aqua24x192.htm" rel="match">
|
||||||
|
|
||||||
<meta content="svg" name="flags">
|
<meta content="svg" name="flags">
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using 0 value</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using 0 value</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,24 +10,24 @@
|
||||||
<link rel="match" href="reference/border-radius-001-ref.htm">
|
<link rel="match" href="reference/border-radius-001-ref.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify the border-bottom-left-radius property, when set with 0, works as expected">
|
<meta name="assert" content="To verify the border-bottom-left-radius property, when set with 0, works as expected">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
#test
|
#test
|
||||||
{
|
{
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -38,29 +38,29 @@
|
||||||
<li>PASS if the two boxes below are the same.</li>
|
<li>PASS if the two boxes below are the same.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<div id="reference"></div>
|
<div id="reference"></div>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "0px";
|
var expectedBorderRadius = "0px";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 25px</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 25px</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -9,21 +9,21 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius">
|
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify if border-bottom-left-radius property set to one length value, works as expected">
|
<meta name="assert" content="To verify if border-bottom-left-radius property set to one length value, works as expected">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: 25px;
|
border-bottom-left-radius: 25px;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -34,29 +34,29 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
|
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "25px";
|
var expectedBorderRadius = "25px";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using two length values: 40px 20px</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using two length values: 40px 20px</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,21 +10,21 @@
|
||||||
<link rel="match" href="border-bottom-left-radius-004.htm">
|
<link rel="match" href="border-bottom-left-radius-004.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two length values, works as expected">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to two length values, works as expected">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: 40px 20px;
|
border-bottom-left-radius: 40px 20px;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -35,29 +35,29 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
|
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "40px 20px";
|
var expectedBorderRadius = "40px 20px";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using one percentage value: 20%</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using one percentage value: 20%</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,21 +10,21 @@
|
||||||
<link rel="match" href="border-bottom-left-radius-003.htm">
|
<link rel="match" href="border-bottom-left-radius-003.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to percentage value, works as expected">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to percentage value, works as expected">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: 20%;
|
border-bottom-left-radius: 20%;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -35,29 +35,29 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
|
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "20%";
|
var expectedBorderRadius = "20%";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using two percentage values: 20% 30%</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using two percentage values: 20% 30%</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,21 +10,21 @@
|
||||||
<link rel="match" href="border-bottom-left-radius-006.htm">
|
<link rel="match" href="border-bottom-left-radius-006.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two precentage value, works as expected">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to two precentage value, works as expected">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: 20% 30%;
|
border-bottom-left-radius: 20% 30%;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -35,28 +35,28 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "20% 30%";
|
var expectedBorderRadius = "20% 30%";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 40px 30%</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 40px 30%</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,21 +10,21 @@
|
||||||
<link rel="match" href="border-bottom-left-radius-005.htm">
|
<link rel="match" href="border-bottom-left-radius-005.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different unit, works fine">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different unit, works fine">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: 40px 30%;
|
border-bottom-left-radius: 40px 30%;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -35,28 +35,28 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "40px 30%";
|
var expectedBorderRadius = "40px 30%";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 20% 25px</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 20% 25px</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,21 +10,21 @@
|
||||||
<link rel="match" href="border-bottom-left-radius-009.htm">
|
<link rel="match" href="border-bottom-left-radius-009.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different unit, works fine">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different unit, works fine">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: 20% 25px;
|
border-bottom-left-radius: 20% 25px;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -35,28 +35,28 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "20% 25px";
|
var expectedBorderRadius = "20% 25px";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 4em 30%</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 4em 30%</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -9,21 +9,21 @@
|
||||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius">
|
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different units, works fine">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different units, works fine">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: 4em 30%;
|
border-bottom-left-radius: 4em 30%;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -34,28 +34,28 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "64px 30%";
|
var expectedBorderRadius = "64px 30%";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using "inherit"</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using "inherit"</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,25 +10,25 @@
|
||||||
<link rel="match" href="border-bottom-left-radius-007.htm">
|
<link rel="match" href="border-bottom-left-radius-007.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify if inherit feature works, when assigned to border-bottom-left-radius">
|
<meta name="assert" content="To verify if inherit feature works, when assigned to border-bottom-left-radius">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
body
|
body
|
||||||
{
|
{
|
||||||
border-bottom-left-radius: 20% 25px;
|
border-bottom-left-radius: 20% 25px;
|
||||||
}
|
}
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border-bottom-left-radius: inherit;
|
border-bottom-left-radius: inherit;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -39,28 +39,28 @@
|
||||||
<li>PASS if only bottom left corner is rounded.</li>
|
<li>PASS if only bottom left corner is rounded.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "20% 25px";
|
var expectedBorderRadius = "20% 25px";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 25px 0</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 25px 0</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,24 +10,24 @@
|
||||||
<link rel="match" href="reference/border-radius-001-ref.htm">
|
<link rel="match" href="reference/border-radius-001-ref.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
#test
|
#test
|
||||||
{
|
{
|
||||||
border-bottom-left-radius: 25px 0;
|
border-bottom-left-radius: 25px 0;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -38,29 +38,29 @@
|
||||||
<li>PASS if the two boxes below are the same.</li>
|
<li>PASS if the two boxes below are the same.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<div id="reference"></div>
|
<div id="reference"></div>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "0px";
|
var expectedBorderRadius = "0px";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 0 3em</title>
|
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 0 3em</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
@ -10,24 +10,24 @@
|
||||||
<link rel="match" href="reference/border-radius-001-ref.htm">
|
<link rel="match" href="reference/border-radius-001-ref.htm">
|
||||||
<meta name="flags" content="">
|
<meta name="flags" content="">
|
||||||
<meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine">
|
<meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine">
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
/* */
|
/* */
|
||||||
div
|
div
|
||||||
{
|
{
|
||||||
border:2px solid #a1a1a1;
|
border:2px solid #a1a1a1;
|
||||||
background:#dddddd;
|
background:#dddddd;
|
||||||
width:200px;
|
width:200px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
#test
|
#test
|
||||||
{
|
{
|
||||||
border-bottom-left-radius: 0 3em;
|
border-bottom-left-radius: 0 3em;
|
||||||
}
|
}
|
||||||
/* */
|
/* */
|
||||||
</style>
|
</style>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||||
-->
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p>
|
<p>
|
||||||
|
@ -38,29 +38,29 @@
|
||||||
<li>PASS if the two boxes below are the same.</li>
|
<li>PASS if the two boxes below are the same.</li>
|
||||||
<li>FAIL if the output is not as expected.</li>
|
<li>FAIL if the output is not as expected.</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||||
<div id="test"></div>
|
<div id="test"></div>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
<div id="reference"></div>
|
<div id="reference"></div>
|
||||||
<!--
|
<!--
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/* <![CDATA[ */
|
/* <![CDATA[ */
|
||||||
var expectedBorderRadius = "0px";
|
var expectedBorderRadius = "0px";
|
||||||
|
|
||||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||||
|
|
||||||
// if (testResult.pass)
|
// if (testResult.pass)
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
// else
|
// else
|
||||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
if (top.FrameEnabled) top.fnLog(testResult);
|
if (top.FrameEnabled) top.fnLog(testResult);
|
||||||
|
|
||||||
/* ]]> */
|
/* ]]> */
|
||||||
</script>
|
</script>
|
||||||
-->
|
-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue