Add reftest for CSS 2.1, section 10.3.3.
BIN
layout/reftests/box-properties/CSS21-t100303-green-in-170px.png
Normal file
After Width: | Height: | Size: 90 B |
BIN
layout/reftests/box-properties/CSS21-t100303-green-in-334px.png
Normal file
After Width: | Height: | Size: 90 B |
BIN
layout/reftests/box-properties/CSS21-t100303-green-in-340px.png
Normal file
After Width: | Height: | Size: 90 B |
BIN
layout/reftests/box-properties/CSS21-t100303-green-in-344px.png
Normal file
After Width: | Height: | Size: 90 B |
BIN
layout/reftests/box-properties/CSS21-t100303-green-in-350px.png
Normal file
After Width: | Height: | Size: 89 B |
BIN
layout/reftests/box-properties/CSS21-t100303-green-in-458px.png
Normal file
After Width: | Height: | Size: 90 B |
After Width: | Height: | Size: 90 B |
After Width: | Height: | Size: 90 B |
After Width: | Height: | Size: 90 B |
After Width: | Height: | Size: 90 B |
After Width: | Height: | Size: 89 B |
After Width: | Height: | Size: 90 B |
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript">
|
||||
<script type="text/javascript">
|
||||
|
||||
var gWidth = 1024;
|
||||
var gHeight = 1;
|
||||
var gBarriers = [ 170, 334, 340, 344, 350, 458 ];
|
||||
|
||||
var gColors = [ "green", "red" ];
|
||||
|
||||
function append_url(filename, contents_url) {
|
||||
var p = document.createElement("p");
|
||||
var a = document.createElement("a");
|
||||
a.href = contents_url;
|
||||
var t = document.createTextNode("CSS21-t100303-" + filename);
|
||||
a.appendChild(t);
|
||||
p.appendChild(a);
|
||||
document.body.appendChild(p);
|
||||
}
|
||||
|
||||
function run() {
|
||||
var canvas = document.getElementById("canvas");
|
||||
var cx = canvas.getContext("2d");
|
||||
for (var i in gBarriers) {
|
||||
var barrier = gBarriers[i];
|
||||
|
||||
cx.fillStyle = gColors[1];
|
||||
cx.fillRect(0, 0, gWidth, gHeight);
|
||||
cx.fillStyle = gColors[0];
|
||||
cx.fillRect(0, 0, barrier, gHeight);
|
||||
append_url(gColors[0] + "-in-" + barrier + "px.png",
|
||||
canvas.toDataURL("image/png"));
|
||||
|
||||
cx.fillStyle = gColors[0];
|
||||
cx.fillRect(0, 0, gWidth, gHeight);
|
||||
cx.fillStyle = gColors[1];
|
||||
cx.fillRect(0, 0, barrier, gHeight);
|
||||
append_url(gColors[0] + "-outside-" + barrier + "px.png",
|
||||
canvas.toDataURL("image/png"));
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="run()">
|
||||
|
||||
<canvas width="1024" height="1" id="canvas"></canvas>
|
||||
|
||||
</body>
|
||||
</html>
|
26
layout/reftests/box-properties/CSS21-t100303-ref.xhtml
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 2.1: Block-level, non-replaced elements in normal flow</title>
|
||||
<link rel="author" title="L. David Baron" href="http://dbaron.org/" />
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
|
||||
<meta name="flags" content="" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
||||
body { direction: ltr; }
|
||||
|
||||
body > div {
|
||||
margin-left: 3px;
|
||||
width: 669px;
|
||||
height: 96px;
|
||||
background: green;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
191
layout/reftests/box-properties/CSS21-t100303.xhtml
Normal file
@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS 2.1: Block-level, non-replaced elements in normal flow</title>
|
||||
<link rel="author" title="L. David Baron" href="http://dbaron.org/" />
|
||||
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
|
||||
<meta name="flags" content="" />
|
||||
<style type="text/css"><![CDATA[
|
||||
|
||||
body { direction: ltr; }
|
||||
div { height: 1px; }
|
||||
|
||||
/* containing block */
|
||||
body > div {
|
||||
margin: 0 17px 0 3px;
|
||||
border: medium solid transparent;
|
||||
border-width: 0 154px 0 157px;
|
||||
padding: 0 6px 0 2px;
|
||||
width: 350px;
|
||||
}
|
||||
/* parent that is not containing block */
|
||||
body > div > div { display: inline; }
|
||||
/* test element */
|
||||
body > div > div > div {
|
||||
margin: 0 10px 0 6px;
|
||||
border: medium solid transparent;
|
||||
border-width: 0 12px 0 5px;
|
||||
padding: 0 17px 0 9px;
|
||||
}
|
||||
|
||||
body > div, body > div > div, body > div > div > div { direction: ltr; }
|
||||
body > div.trtl > div > div { direction: rtl; }
|
||||
body > div.prtl > div { direction: rtl; }
|
||||
body > div.cbrtl { direction: rtl; }
|
||||
body > div.mlauto > div > div { margin-left: auto; }
|
||||
body > div.mrauto > div > div { margin-right: auto; }
|
||||
|
||||
body > div.wauto > div > div { width: auto; }
|
||||
body > div.wnarrow > div > div { width: 127px; }
|
||||
body > div.wwide > div > div { width: 415px; }
|
||||
|
||||
/*
|
||||
* make a background on the containing block that is red
|
||||
* everywhere except where the test should draw its background
|
||||
*/
|
||||
body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); }
|
||||
body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); }
|
||||
body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); }
|
||||
body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); }
|
||||
body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); }
|
||||
body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); }
|
||||
|
||||
/*
|
||||
* The only results in the markup rather than using selectors
|
||||
* are whether the div ends up aligned to the left edge (atl),
|
||||
* the right edge (atr), or centered (atc). Things with auto
|
||||
* widths always count as atl, to make the style rules simpler
|
||||
* (though they abut both edges).
|
||||
*/
|
||||
body > div.atl { background-position: 8px 0; }
|
||||
body > div.atl.mlauto { background-position: 2px 0; }
|
||||
|
||||
body > div.atr.wnarrow { background-position: 172px 0; }
|
||||
body > div.atr.wnarrow.mrauto { background-position: 182px 0; }
|
||||
body > div.atr.wwide { background-position: -116px 0; }
|
||||
body > div.atr.wwide.mrauto { background-position: -106px 0; }
|
||||
|
||||
/* Can only be atc when mlauto and mrauto and wnarrow. */
|
||||
body > div.atc.wnarrow { background-position: 92px 0; }
|
||||
|
||||
/*
|
||||
* make a background on the test div that is green only within
|
||||
* its desired width and red elsewhere
|
||||
*/
|
||||
body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); }
|
||||
body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); }
|
||||
body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); }
|
||||
body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); }
|
||||
body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); }
|
||||
body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); }
|
||||
/* move position to border-edge */
|
||||
body > div > div > div { background-position: -5px 0; }
|
||||
|
||||
/* for debugging */
|
||||
/* body > div { background: transparent ! important; } */
|
||||
/* body > div > div > div { background: orange ! important; } */
|
||||
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="atl wauto"><div><div></div></div></div>
|
||||
<div class="atl wauto trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atl wauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow"><div><div></div></div></div>
|
||||
<div class="atl wnarrow trtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow prtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow prtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow cbrtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto trtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto prtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto trtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto prtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide"><div><div></div></div></div>
|
||||
<div class="atl wwide trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide prtl"><div><div></div></div></div>
|
||||
<div class="atl wwide prtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide cbrtl"><div><div></div></div></div>
|
||||
<div class="atr wwide cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto prtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto prtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto mlauto"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div>
|
||||
<div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div>
|
||||
<div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
@ -18,3 +18,4 @@
|
||||
== box-sizing-4.html box-sizing-4-ref.html
|
||||
== abspos-non-replaced-width-offset-margin.html abspos-non-replaced-width-offset-margin-ref.html
|
||||
== abspos-replaced-width-offset-margin.html abspos-replaced-width-offset-margin-ref.html
|
||||
fails == CSS21-t100303.xhtml CSS21-t100303-ref.xhtml # bug 423306
|
||||
|