mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -32,26 +32,26 @@
|
|||
/*
|
||||
|
||||
0.5in : top
|
||||
+
|
||||
+
|
||||
auto (solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (solve) : margin-bottom
|
||||
+
|
||||
0.5in : bottom
|
||||
=============
|
||||
3.0in : height of containing block
|
||||
3.0in : height of containing block
|
||||
|
||||
So, margin-bottom and margin-top must use 0.5in so that the equation gets balanced.
|
||||
So, margin-bottom and margin-top must use 0.5in so that the equation gets balanced.
|
||||
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -32,26 +32,26 @@
|
|||
/*
|
||||
|
||||
0.5in : top
|
||||
+
|
||||
+
|
||||
auto (solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in: height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
0.5in : margin-bottom
|
||||
+
|
||||
0.5in : bottom
|
||||
=============
|
||||
3.0in : height of containing block
|
||||
3.0in : height of containing block
|
||||
|
||||
So, margin-top must use 0.5in so that the equation gets balanced.
|
||||
So, margin-top must use 0.5in so that the equation gets balanced.
|
||||
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -32,26 +32,26 @@
|
|||
/*
|
||||
|
||||
0.5in : top
|
||||
+
|
||||
+
|
||||
0.5in : margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in: height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (solve) : margin-bottom
|
||||
+
|
||||
0.5in : bottom
|
||||
=============
|
||||
3.0in : height of containing block
|
||||
3.0in : height of containing block
|
||||
|
||||
So, margin-bottom must use 0.5in so that the equation gets balanced.
|
||||
So, margin-bottom must use 0.5in so that the equation gets balanced.
|
||||
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: Absolutely positioned, non-replaced elements, over-constrained</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-08-27 -->
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-08-27 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">
|
||||
<link rel="match" href="reference/absolute-non-replaced-height-006-ref.htm">
|
||||
|
||||
|
|
@ -36,31 +36,31 @@
|
|||
/*
|
||||
|
||||
50px : top
|
||||
+
|
||||
+
|
||||
50px : margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
150px : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
50px : margin-bottom
|
||||
+
|
||||
50px : bottom
|
||||
=============
|
||||
350px while the height of containing block is only 300px.
|
||||
|
||||
So, here we definitely have an overconstrained situation. In which
|
||||
350px while the height of containing block is only 300px.
|
||||
|
||||
So, here we definitely have an overconstrained situation. In which
|
||||
case the spec clearly states
|
||||
"If the values are over-constrained, ignore the value for 'bottom'
|
||||
"If the values are over-constrained, ignore the value for 'bottom'
|
||||
and solve for that value."
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
|
||||
|
||||
|
||||
So, here, the used value for bottom will be 0px so that the equation
|
||||
gets balanced.
|
||||
|
||||
|
|
|
|||
|
|
@ -33,56 +33,56 @@
|
|||
/*
|
||||
|
||||
auto (to solve) : top
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
auto (to solve) : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-bottom
|
||||
+
|
||||
200px : bottom
|
||||
=============
|
||||
300px : height of containing block
|
||||
|
||||
|
||||
"
|
||||
'top' and 'height' are 'auto' and 'bottom' is not 'auto',
|
||||
then the height is based on the content per 10.6.7,
|
||||
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
and solve for 'top'
|
||||
'top' and 'height' are 'auto' and 'bottom' is not 'auto',
|
||||
then the height is based on the content per 10.6.7,
|
||||
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
and solve for 'top'
|
||||
"
|
||||
|
||||
so this brings:
|
||||
|
||||
|
||||
|
||||
auto (to solve) : top
|
||||
+
|
||||
+
|
||||
0 (solved): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
100px (solved: based on content) : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
0 (solved) : margin-bottom
|
||||
+
|
||||
200px : bottom
|
||||
=============
|
||||
300px : height of containing block
|
||||
|
||||
so top will use 0px
|
||||
|
||||
so top will use 0px
|
||||
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -28,24 +28,24 @@
|
|||
top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
auto (to solve) : top
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-bottom
|
||||
+
|
||||
auto (to solve) : bottom
|
||||
|
|
@ -54,37 +54,37 @@
|
|||
|
||||
|
||||
"
|
||||
'top' and 'bottom' are 'auto' and 'height' is not 'auto',
|
||||
then set 'top' to the static position,
|
||||
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
'top' and 'bottom' are 'auto' and 'height' is not 'auto',
|
||||
then set 'top' to the static position,
|
||||
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
and solve for 'bottom'
|
||||
"
|
||||
|
||||
so this brings:
|
||||
|
||||
|
||||
0 (solved static position) : top
|
||||
+
|
||||
+
|
||||
0 (solved): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
0 (solved): margin-bottom
|
||||
+
|
||||
auto (to solve) : bottom
|
||||
=============
|
||||
3in : height of containing block
|
||||
|
||||
|
||||
So, bottom must use 2in in order to balance the equation
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -30,18 +30,18 @@
|
|||
|
||||
<!--
|
||||
"
|
||||
height' and 'bottom' are 'auto' and 'top' is not 'auto',
|
||||
then the height is based on the content per 10.6.7,
|
||||
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
height' and 'bottom' are 'auto' and 'top' is not 'auto',
|
||||
then the height is based on the content per 10.6.7,
|
||||
set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
and solve for 'bottom'
|
||||
"
|
||||
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
|
||||
|
||||
In this test,
|
||||
|
||||
In this test,
|
||||
top used value will be 25px
|
||||
height used value will be 100px
|
||||
vertical margins will be 0px
|
||||
bottom used value will be -125px
|
||||
bottom used value will be -125px
|
||||
because the computed height of containing block is 0px.
|
||||
-->
|
||||
|
||||
|
|
|
|||
|
|
@ -32,19 +32,19 @@
|
|||
/*
|
||||
|
||||
auto (to solve) : top
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
|
|
@ -53,36 +53,36 @@
|
|||
|
||||
|
||||
"
|
||||
'top' is 'auto', 'height' and 'bottom' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
'top' is 'auto', 'height' and 'bottom' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
and solve for 'top'
|
||||
"
|
||||
|
||||
so this brings:
|
||||
|
||||
|
||||
auto (to solve) : top
|
||||
+
|
||||
+
|
||||
0 (set): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
0 (set): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
=============
|
||||
3in : height of containing block
|
||||
|
||||
|
||||
So, top must use 1in in order to balance the equation
|
||||
|
||||
|
||||
|
||||
|
||||
*/
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -32,19 +32,19 @@
|
|||
/*
|
||||
|
||||
1in : top
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
auto (to solve) : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
|
|
@ -53,35 +53,35 @@
|
|||
|
||||
|
||||
"
|
||||
'height' is 'auto', 'top' and 'bottom' are not 'auto',
|
||||
then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
|
||||
'height' is 'auto', 'top' and 'bottom' are not 'auto',
|
||||
then 'auto' values for 'margin-top' and 'margin-bottom' are set to 0
|
||||
and solve for 'height'
|
||||
"
|
||||
|
||||
so this brings:
|
||||
|
||||
|
||||
1in : top
|
||||
+
|
||||
+
|
||||
0 (set): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
auto (to solve) : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
0 (set): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
=============
|
||||
3in : height of containing block
|
||||
|
||||
|
||||
So, height must use 1in in order to balance the equation
|
||||
|
||||
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -28,14 +28,14 @@
|
|||
background: blue;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
"
|
||||
'bottom' is 'auto', 'top' and 'height' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0
|
||||
"
|
||||
'bottom' is 'auto', 'top' and 'height' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0
|
||||
and solve for 'bottom'
|
||||
"
|
||||
|
||||
|
||||
Therefore, bottom used value must be 1in
|
||||
*/
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,19 +33,19 @@
|
|||
/*
|
||||
|
||||
auto (to solve) : top
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
2in : height (will be constrained to use 1in by max-height)
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
|
|
@ -54,35 +54,35 @@
|
|||
|
||||
|
||||
"
|
||||
'top' is 'auto', 'height' and 'bottom' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
'top' is 'auto', 'height' and 'bottom' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
and solve for 'top'
|
||||
"
|
||||
|
||||
so this brings:
|
||||
|
||||
|
||||
auto (to solve) : top
|
||||
+
|
||||
+
|
||||
0 (set): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in (constrained) : height
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
0 (set): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
=============
|
||||
3in : height of containing block
|
||||
|
||||
|
||||
So, top must use 1in in order to balance the equation
|
||||
|
||||
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -34,19 +34,19 @@
|
|||
/*
|
||||
|
||||
1in : top
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
auto (to solve) : height (may be constrained to use 0.5in by max-height)
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
|
|
@ -55,69 +55,69 @@
|
|||
|
||||
|
||||
"
|
||||
'top' is 'auto', 'height' and 'bottom' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
'top' is 'auto', 'height' and 'bottom' are not 'auto',
|
||||
then set 'auto' values for 'margin-top' and 'margin-bottom' to 0,
|
||||
and solve for 'top'
|
||||
"
|
||||
|
||||
so this brings:
|
||||
|
||||
|
||||
1in : top
|
||||
+
|
||||
+
|
||||
0 (set): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
1in (not constrained) : height (must be constrained to use 0.5in by max-height)
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
0 (set): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
=============
|
||||
3in : height of containing block
|
||||
|
||||
|
||||
So, here, we must reenter the algorithm since height is
|
||||
constrained and is no longer 'auto'.
|
||||
|
||||
|
||||
"
|
||||
If none of the three [top, height, bottom] are 'auto':
|
||||
If both 'margin-top' and 'margin-bottom' are 'auto',
|
||||
solve the equation under the extra constraint that
|
||||
If none of the three [top, height, bottom] are 'auto':
|
||||
If both 'margin-top' and 'margin-bottom' are 'auto',
|
||||
solve the equation under the extra constraint that
|
||||
the two margins get equal values.
|
||||
"
|
||||
|
||||
so this brings:
|
||||
|
||||
|
||||
1in : top
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-top
|
||||
+
|
||||
+
|
||||
0 : border-top-width
|
||||
+
|
||||
+
|
||||
0 : padding-top
|
||||
+
|
||||
+
|
||||
0.5in (constrained) : height (constrained by max-height)
|
||||
+
|
||||
0 : padding-bottom
|
||||
+
|
||||
+
|
||||
0 : border-bottom-width
|
||||
+
|
||||
+
|
||||
auto (to solve): margin-bottom
|
||||
+
|
||||
1in : bottom
|
||||
=============
|
||||
3in : height of containing block
|
||||
|
||||
|
||||
So, here, margin-top must use 0.25in and margin-bottom must use 0.25in
|
||||
so that the equation remains balanced.
|
||||
|
||||
|
||||
So, here, margin-top must use 0.25in and margin-bottom must use 0.25in
|
||||
so that the equation remains balanced.
|
||||
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -19,27 +19,27 @@
|
|||
}
|
||||
div div
|
||||
{
|
||||
/*
|
||||
/*
|
||||
left : 100px
|
||||
+
|
||||
margin-left : solve
|
||||
+
|
||||
+
|
||||
margin-left : solve
|
||||
+
|
||||
border-left-width : 0px
|
||||
+
|
||||
+
|
||||
padding-left : 0px
|
||||
+
|
||||
+
|
||||
width : 100px
|
||||
+
|
||||
+
|
||||
padding-right : 0px
|
||||
+
|
||||
+
|
||||
border-right-width: 0px
|
||||
+
|
||||
+
|
||||
margin-right : solve
|
||||
+
|
||||
+
|
||||
right : -200px
|
||||
=============================
|
||||
width of containing block : 400px
|
||||
|
||||
|
||||
*/
|
||||
|
||||
background: red;
|
||||
|
|
|
|||
|
|
@ -45,12 +45,12 @@
|
|||
|
||||
So, margin-left and margin-right would be each -50px at this point.
|
||||
|
||||
"...unless this would make them (the two margins) negative
|
||||
in which case when direction of the containing block is
|
||||
'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and
|
||||
"...unless this would make them (the two margins) negative
|
||||
in which case when direction of the containing block is
|
||||
'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and
|
||||
solve for 'margin-right' ('margin-left')."
|
||||
|
||||
So, under such extra constraint, 'margin-left' must become 0
|
||||
So, under such extra constraint, 'margin-left' must become 0
|
||||
and 'margin-right' must become -100px.
|
||||
*/
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,14 +43,14 @@
|
|||
====================================
|
||||
width of containing block : 200px
|
||||
|
||||
So, margin-left and margin-right would be each -50px at this point.
|
||||
So, margin-left and margin-right would be each -50px at this point.
|
||||
|
||||
"...unless this would make them (the two margins) negative
|
||||
in which case when direction of the containing block is
|
||||
'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and
|
||||
"...unless this would make them (the two margins) negative
|
||||
in which case when direction of the containing block is
|
||||
'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and
|
||||
solve for 'margin-right' ('margin-left')."
|
||||
|
||||
So, under such extra constraint, 'margin-right' must become 0
|
||||
So, under such extra constraint, 'margin-right' must become 0
|
||||
and 'margin-left' must become -100px.
|
||||
*/
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
{
|
||||
background-color: red;
|
||||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
the left-hand side of document box (at body's margin-left)
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
the left-hand side of document box (at body's margin-left)
|
||||
*/
|
||||
position: absolute;
|
||||
right: auto;
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
{
|
||||
background-color: red;
|
||||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
the left-hand side of document box (at body's margin-left)
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
the left-hand side of document box (at body's margin-left)
|
||||
*/
|
||||
position: absolute;
|
||||
right: auto;
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@
|
|||
{
|
||||
background-color: red;
|
||||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
the left-hand side of document box (at body's margin-left)
|
||||
*/
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
{
|
||||
background-color: red;
|
||||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
the left-hand side of document box (at body's margin-left)
|
||||
left: auto;
|
||||
/*
|
||||
left is set to static position: it should be 8px from
|
||||
the left-hand side of document box (at body's margin-left)
|
||||
*/
|
||||
position: absolute;
|
||||
right: auto;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
body
|
||||
{
|
||||
direction: rtl;
|
||||
margin: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
p {direction: ltr;}
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
*/
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
body
|
||||
{
|
||||
direction: rtl;
|
||||
margin: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
p {direction: ltr;}
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
*/
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
body
|
||||
{
|
||||
direction: rtl;
|
||||
margin: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
p {direction: ltr;}
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
*/
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
body
|
||||
{
|
||||
direction: rtl;
|
||||
margin: 8px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
p {direction: ltr;}
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
font: 30px/4 Ahem;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
right: auto;
|
||||
/*
|
||||
right is set to static position: it should be 8px from
|
||||
the right-hand side of document box (at body's margin-right)
|
||||
*/
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,12 +29,12 @@
|
|||
/*
|
||||
"
|
||||
(...)
|
||||
the height of the containing block of an absolutely positioned
|
||||
element is independent of the size of the element itself, and thus
|
||||
a percentage height on such an element *_can always be resolved_*.
|
||||
However, it may be that the height is not known until elements
|
||||
the height of the containing block of an absolutely positioned
|
||||
element is independent of the size of the element itself, and thus
|
||||
a percentage height on such an element *_can always be resolved_*.
|
||||
However, it may be that the height is not known until elements
|
||||
that come later in the document have been processed. "
|
||||
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
|
||||
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
|
||||
"
|
||||
*/
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -29,20 +29,20 @@
|
|||
/*
|
||||
"
|
||||
The used value of 'height' is determined as for inline replaced elements.
|
||||
If 'margin-top' or 'margin-bottom' is specified as 'auto'
|
||||
If 'margin-top' or 'margin-bottom' is specified as 'auto'
|
||||
its used value is determined by the rules below.
|
||||
(...)
|
||||
If 'height' and 'width' both have computed values
|
||||
of 'auto' and the element also has an intrinsic height,
|
||||
then that intrinsic height is the used value of 'height'.
|
||||
If 'height' and 'width' both have computed values
|
||||
of 'auto' and the element also has an intrinsic height,
|
||||
then that intrinsic height is the used value of 'height'.
|
||||
(...)
|
||||
If 'bottom' is 'auto', replace any 'auto' on 'margin-top'
|
||||
or 'margin-bottom' with '0'.
|
||||
If at this point there is only one 'auto' left,
|
||||
solve the equation for that value.
|
||||
If 'bottom' is 'auto', replace any 'auto' on 'margin-top'
|
||||
or 'margin-bottom' with '0'.
|
||||
If at this point there is only one 'auto' left,
|
||||
solve the equation for that value.
|
||||
"
|
||||
http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height
|
||||
|
||||
|
||||
In this test, bottom will be -96px because the height of the
|
||||
containing block is 0px.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@
|
|||
<meta name="assert" content="An absolutely positioned inline-block replaced element with a percentage height that cannot be resolved has no intrinsic height.">
|
||||
<!--
|
||||
"
|
||||
(...) the height of the containing block of an absolutely
|
||||
positioned element is independent of the size of the element itself,
|
||||
and thus a percentage height on such an element *_can always be
|
||||
resolved_*. However, it may be that the height is not known until
|
||||
(...) the height of the containing block of an absolutely
|
||||
positioned element is independent of the size of the element itself,
|
||||
and thus a percentage height on such an element *_can always be
|
||||
resolved_*. However, it may be that the height is not known until
|
||||
elements that come later in the document have been processed.
|
||||
"
|
||||
"
|
||||
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
|
||||
-->
|
||||
|
||||
-->
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
{
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
bottom: 1in;
|
||||
/*
|
||||
The equation gets overconstrained; and so, the used value for
|
||||
bottom in that test will be ignored and will be solved
|
||||
as minus (1in + 15px) (-111px) because the height of
|
||||
bottom in that test will be ignored and will be solved
|
||||
as minus (1in + 15px) (-111px) because the height of
|
||||
containing block is 0.
|
||||
*/
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
bottom: 1in;
|
||||
/*
|
||||
The equation gets overconstrained; and so, the used value for
|
||||
bottom in that test will be ignored and will be solved
|
||||
as minus (1in + 1in) (-192px) because the height of
|
||||
bottom in that test will be ignored and will be solved
|
||||
as minus (1in + 1in) (-192px) because the height of
|
||||
containing block is 0.
|
||||
*/
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
|
||||
<!--
|
||||
"
|
||||
(...) the height of the containing block of an absolutely
|
||||
positioned element is independent of the size of the element itself,
|
||||
and thus a percentage height on such an element *_can always be
|
||||
resolved_*. However, it may be that the height is not known until
|
||||
(...) the height of the containing block of an absolutely
|
||||
positioned element is independent of the size of the element itself,
|
||||
and thus a percentage height on such an element *_can always be
|
||||
resolved_*. However, it may be that the height is not known until
|
||||
elements that come later in the document have been processed.
|
||||
"
|
||||
"
|
||||
http://www.w3.org/TR/CSS21/visudet.html#the-height-property
|
||||
-->
|
||||
-->
|
||||
|
||||
<style type="text/css">
|
||||
div#containing-block
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
===========
|
||||
207px : height of containing block (15px)
|
||||
|
||||
So, bottom has to be ignored and forced to have the value that
|
||||
So, bottom has to be ignored and forced to have the value that
|
||||
will balance the equation. So, this brings up
|
||||
|
||||
0.5in : 'top'
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
0.5in : top
|
||||
+
|
||||
0.5in : margin-top
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
255px != 0px (height of containing block)
|
||||
Therefore, set bottom value must be ignored and
|
||||
the equation must be solved for bottom.
|
||||
|
||||
|
||||
|
||||
0.5in : top
|
||||
+
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
===========
|
||||
436px : height of containing block (0px)
|
||||
|
||||
So, bottom has to be ignored and forced to have the value that
|
||||
So, bottom has to be ignored and forced to have the value that
|
||||
will balance the equation. So, this brings up
|
||||
|
||||
0.5in : 'top'
|
||||
|
|
|
|||
|
|
@ -56,9 +56,9 @@
|
|||
================
|
||||
342px : height of containing block (192px)
|
||||
|
||||
So, bottom has to be ignored and forced to have the value that
|
||||
So, bottom has to be ignored and forced to have the value that
|
||||
will balance the equation. So, this brings up
|
||||
|
||||
|
||||
|
||||
0.5in : 'top'
|
||||
+
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
(solve) : 'bottom'
|
||||
================
|
||||
-246px : height of containing block (192px)
|
||||
|
||||
|
||||
So, the solved bottom value should be -54px .
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: Absolutely positioned inline replaced element and 'auto' specified for 'margin-left', 'margin-right' and width set to a percentage</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width">
|
||||
<link rel="match" href="reference/absolute-replaced-width-006-ref.htm">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: Absolutely positioned replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and intrinsic width</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width">
|
||||
<link rel="match" href="reference/absolute-replaced-width-015-ref.htm">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'left', 'right' and width set to a percentage</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width">
|
||||
<link rel="match" href="reference/absolute-replaced-width-020-ref.htm">
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: Absolutely positioned inline replaced element with 'direction' as left-to-right, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic width</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width">
|
||||
<link rel="match" href="reference/absolute-replaced-width-022-ref.htm">
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
1in : left
|
||||
0px (set) : margin-left
|
||||
1in : width (intrinsic width)
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
(solve) : right
|
||||
=========================
|
||||
2in : width of containing block (2in)
|
||||
|
||||
|
||||
Therefore , the used right offset must be 0px
|
||||
so that the contraining equation gets balanced.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>CSS Test: Absolutely positioned inline replaced element with 'direction' as right-to-left, 'auto' specified for 'margin-left', 'margin-right', 'right' and intrinsic width</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-09-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width">
|
||||
<link rel="match" href="reference/absolute-replaced-width-022-ref.htm">
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
/*
|
||||
|
||||
|
||||
1in : left
|
||||
0px (set) : margin-left
|
||||
1in : width (intrinsic width)
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
(solve) : right
|
||||
=========================
|
||||
2in : width of containing block (2in)
|
||||
|
||||
|
||||
Therefore , the used right offset must be 0px
|
||||
so that the contraining equation gets balanced.
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,6 @@
|
|||
<p class="description">The word PASS should appear at the bottom right of this document.</p>
|
||||
<p class="control">FAIL</p>
|
||||
<table class="test"><tbody><tr><td>PASS</td></tr></tbody></table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -24,6 +24,6 @@
|
|||
<div class="control"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>CSS Test: Shrink wrapping of absolute positioned blocks</title>
|
||||
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
|
||||
<link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
|
|
@ -8,12 +8,12 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">
|
||||
<link rel="match" href="reference/abspos-008-ref.htm">
|
||||
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
.container { font-size: 100px; position: relative; border-top: 10px solid white; }
|
||||
.outer { position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
.inner { background: green; color: white; float: left; }
|
||||
.control { float: left; color: yellow; background: red; }
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
|
|
@ -25,6 +25,6 @@
|
|||
</div>
|
||||
<div class="control">X X1</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>CSS Test: Right alignment with position:right</title>
|
||||
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
|
|
@ -15,12 +15,12 @@
|
|||
.test { position: absolute; width: 10em; height: 1em;
|
||||
right: 0; margin: auto;
|
||||
background: green; color: white; }
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green stripe on the right and <strong>no red</strong>.</p>
|
||||
<div class="test"></div>
|
||||
<div class="control"></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<p>_##_ _A__</p>
|
||||
<p>___# __SS</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="a">FAIL</div>
|
||||
<div class="b">This block should be green.</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="b">This block should be green.</div>
|
||||
<div class="a">FAIL</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="a">FAIL</div>
|
||||
<div class="b">This block should be green.</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="b">This block should be green.</div>
|
||||
<div class="a">FAIL</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="a">FAIL</div>
|
||||
<div class="b">This block should be green.</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="b">This block should be green.</div>
|
||||
<div class="a">FAIL</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="a">FAIL</div>
|
||||
<div class="b">This block should be green.</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<body>
|
||||
<div class="b">This block should be green.</div>
|
||||
<div class="a">FAIL</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="b">This block should be green.</div>
|
||||
<div class="a">FAIL</div>
|
||||
<div class="c4"></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -20,6 +20,6 @@
|
|||
<p>Test passes if there is a green stripe on the right and <strong>no red</strong>.</p>
|
||||
<div class="test"></div>
|
||||
<div class="control"></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -18,6 +18,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a green square and <strong>no red</strong>. <img src="support/swatch-green.png" alt="FAIL"></p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<body>
|
||||
<p>Test passes if there is a green square and <strong>no red</strong>. <img src="support/swatch-red.png" alt="FAIL"></p>
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
#inner {
|
||||
position: absolute; /* relative to the viewport, not that it matters */
|
||||
z-index: -1; /* this should have no effect, as the element is fully transparent anyway */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
width: 20em;
|
||||
background: white;
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
<style type="text/css">
|
||||
div:after
|
||||
{
|
||||
content: "Filler\A0text";
|
||||
/* Without a table box, the table-caption may shrink to minimum
|
||||
content width (MCW), thus the no-breaking-space (in utf-8)
|
||||
content: "Filler\A0text";
|
||||
/* Without a table box, the table-caption may shrink to minimum
|
||||
content width (MCW), thus the no-breaking-space (in utf-8)
|
||||
addition to avoid line-wrapping causing 2 lines. */
|
||||
display: table-caption;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="paged">
|
||||
<style type="text/css">
|
||||
html, body { height: 100%; line-height: 1; font-size: 20px; margin: 0; padding: 0; }
|
||||
|
||||
|
||||
* {page-break-inside: auto;}
|
||||
div.spacer {
|
||||
height: 50%;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
page-break-after: always;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
|
||||
div {
|
||||
widows: 1;
|
||||
orphans: 1;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
widows: 3;
|
||||
orphans: 3;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: blue;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
page-break-inside: avoid;
|
||||
widows: 30;
|
||||
orphans: 30;
|
||||
font-size:
|
||||
font-size:
|
||||
}
|
||||
span {
|
||||
font-size: 1in;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
</head>
|
||||
<body>
|
||||
This should be green
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="A percentage right margin in the @page context applies to the page box and is relative to the width of the page box. A percentage top margin in the @page context applies to the page box and is relative to the height of the page box.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
margin-top: 50%;
|
||||
margin-right: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<meta name="flags" content="paged">
|
||||
<meta name="assert" content="A margin declaration within the @page context applies to the page box.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
margin: 3cm;
|
||||
}
|
||||
html, body {background: #ccc;}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<meta name="assert" content="Percentage values on right and left margins are relative to the page box width.">
|
||||
<meta name="assert" content="Percentage values on top and bottom margins are relative to the page box height.">
|
||||
<style type="text/css">
|
||||
@page {
|
||||
@page {
|
||||
margin-bottom: 50%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>CSS Test: lang attribute selector - att=val</title>
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com">
|
||||
|
|
@ -15,27 +15,27 @@
|
|||
em[lang = "de"] { color:white;background-color:green; }
|
||||
div[lang = "ch"] { color:white;background-color:green; }
|
||||
div[lang=" no"] { color:white;background-color:green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div lang="es">This line should be green</div>
|
||||
<div lang="es">This line should be green</div>
|
||||
<div lang="ES">This line should be green</div>
|
||||
|
||||
<div lang="en-GB">This line should be green</div>
|
||||
|
||||
<div lang="ES">This line should be green</div>
|
||||
|
||||
<div lang="en-GB">This line should be green</div>
|
||||
|
||||
<p lang="es">This line should be green <em>and this should also be green</em></p>
|
||||
|
||||
<div lang="no">This line should NOT be green</div>
|
||||
<div lang="es-MX">This line should NOT be green</div>
|
||||
<div lang="no">This line should NOT be green</div>
|
||||
<div lang="es-MX">This line should NOT be green</div>
|
||||
<div lang="MX-es">This line should NOT be green</div>
|
||||
<div lang="en-GB-scouse">This line should NOT be green</div>
|
||||
<div lang="en-US">This line should NOT be green</div>
|
||||
<div lang="en-GB-scouse">This line should NOT be green</div>
|
||||
<div lang="en-US">This line should NOT be green</div>
|
||||
<div lang="en">This line should NOT be green</div>
|
||||
<div lang="fr">This line should NOT be green<p>This line should NOT be green</p></div>
|
||||
<p lang="de">This line should NOT be green <em>and this should not be green either</em></p>
|
||||
<div lang="fr">This line should NOT be green<p>This line should NOT be green</p></div>
|
||||
<p lang="de">This line should NOT be green <em>and this should not be green either</em></p>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: lang attribute selector - att |= val</title>
|
||||
<head>
|
||||
<title>CSS Test: lang attribute selector - att |= val</title>
|
||||
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
|
||||
<link rel="author" title="Eira Monstad, Opera Software ASA" href="mailto:public-testsuites@opera.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#attribute-selectors">
|
||||
|
|
@ -16,26 +16,26 @@
|
|||
div[xml:lang |= "it"] { color:white;background-color:green; }
|
||||
div[lang |= "ch"] { color:white;background-color:green; }
|
||||
div[lang=" no"] { color:white;background-color:green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div lang="es">This line should be green</div>
|
||||
<div lang="es-MX">This line should be green</div>
|
||||
<div lang="ES">This line should be green</div>
|
||||
|
||||
<div lang="es">This line should be green</div>
|
||||
<div lang="es-MX">This line should be green</div>
|
||||
<div lang="ES">This line should be green</div>
|
||||
|
||||
<div lang="en-GB">This line should be green</div>
|
||||
<div lang="en-GB-scouse">This line should be green</div>
|
||||
<div lang="en-GB-scouse">This line should be green</div>
|
||||
|
||||
<p lang="es">This line should be green <em>and this should be green too</em></p>
|
||||
|
||||
<div lang="no">This line should NOT be green</div>
|
||||
<div lang="no">This line should NOT be green</div>
|
||||
<div lang="MX-es">This line should NOT be green</div>
|
||||
|
||||
<div lang="en-US">This line should NOT be green</div>
|
||||
<div lang="en-US">This line should NOT be green</div>
|
||||
<div lang="en">This line should NOT be green</div>
|
||||
|
||||
<div lang="fr">This line should NOT be green<p>This line should NOT be green</p></div>
|
||||
|
||||
<div lang="fr">This line should NOT be green<p>This line should NOT be green</p></div>
|
||||
<p lang="de">This line should NOT be green <em>and this should not be green either</em></p>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,10 +7,10 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" title="14.2.1 Background properties">
|
||||
|
||||
|
||||
<meta content="image" name="flags">
|
||||
<meta content="A 'background-image' is rendered on top of 'background-color'. Therefore, the background-color (blue in this test) should be visible in the transparent parts of a background-image (orange text)." name="assert">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<body>
|
||||
|
||||
<p>Test passes if there is the word "PASS" in orange inside a filled blue rectangle.</p>
|
||||
|
||||
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-04-17 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
|
||||
<link rel="match" href="reference/background-030-ref.htm">
|
||||
<link rel="match" href="reference/background-030-ref.htm">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Background with (repeat color attachment position) sets the background of the element to the color specified. Repeat, position, and attachment only apply if image is set.">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<p>This document has a white background overlayed with an image with a multi-bit alpha channel.</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -15,6 +15,6 @@
|
|||
<body>
|
||||
<p>This document has a white background overlayed with an image with a multi-bit alpha channel. In the middle of the page is a box with height 60% with the same background, centered.</p>
|
||||
<div>
|
||||
|
||||
|
||||
</div></body>
|
||||
</html>
|
||||
|
|
@ -15,6 +15,6 @@
|
|||
<body>
|
||||
<p>This document has a white background overlayed with an image with a multi-bit alpha channel. In the middle of the page is a square div with a height the size of two tiles, with the same background.</p>
|
||||
<div>
|
||||
|
||||
|
||||
</div></body>
|
||||
</html>
|
||||
|
|
@ -15,6 +15,6 @@
|
|||
<body>
|
||||
<p>This document has a white background overlayed with a fixed-positioned image with a multi-bit alpha channel. In the middle of the page is a square div with a height the size of two tiles, with the same background, but scrolling.</p>
|
||||
<div>
|
||||
|
||||
|
||||
</div></body>
|
||||
</html>
|
||||
|
|
@ -15,6 +15,6 @@
|
|||
<body>
|
||||
<p>This document has a white background overlayed with a fixed-positioned image with a multi-bit alpha channel. In the middle of the page is a square div with a height the size of two tiles, with the same background, also fixed. This should have the effect of darkening the transparent area with the colour splodges.</p>
|
||||
<div>
|
||||
|
||||
|
||||
</div></body>
|
||||
</html>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<body>
|
||||
<p>There should be an animated construction sign below.</p>
|
||||
<div></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
table-layout: fixed;
|
||||
width: 1in;
|
||||
}
|
||||
|
||||
|
||||
.col
|
||||
{
|
||||
display: table-column;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<div>
|
||||
<span id="inline-block">
|
||||
<span class="block-descendant">a</span>
|
||||
<span class="block-descendant">a</span>
|
||||
<span class="block-descendant">b</span>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
As you
|
||||
|
||||
scroll
|
||||
scroll
|
||||
|
||||
this
|
||||
page
|
||||
|
|
@ -29,9 +29,9 @@ down, you
|
|||
|
||||
see the
|
||||
|
||||
mow mow
|
||||
mow mow
|
||||
|
||||
get
|
||||
get
|
||||
bigger
|
||||
|
||||
in flashes.
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-row-group'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-header-group'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-footer-group'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-row'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-column-group'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-column'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#test
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-cell'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'block'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
span
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'inline-block'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
div
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#table
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'inline-table'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#table
|
||||
{
|
||||
background-color: orange;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<meta name="assert" content="The 'background-attachment' property applies to elements with 'display' set to 'table-caption'.">
|
||||
<style type="text/css">
|
||||
p {font: 1em/1.25 serif;}
|
||||
|
||||
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/bg-pos-2.html" type="text/html">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
|
||||
<link rel="match" href="reference/background-bg-pos-204-ref.htm">
|
||||
<link rel="match" href="reference/background-bg-pos-204-ref.htm">
|
||||
<style type="text/css">
|
||||
html { background: bottom right url(support/diamond.png) scroll white no-repeat; color: black; height: 100%; }
|
||||
html, body { margin: 0; border: 0; padding: 0; }
|
||||
|
|
|
|||
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