mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
Update CSS tests to revision d674587d6ae7d2e231d632785559f2613d554eb0
This commit is contained in:
Ms2ger
parent
7c45ff8e05
commit
f235d49372
6623 changed files with 267392 additions and 10061 deletions
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
#cb {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#test {
|
||||
margin-right: 5px;
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background:green;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div id="cb">
|
||||
<div id="test"></div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 700px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 20 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 6 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
body {
|
||||
max-width: 700px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 6 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: 10px;
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
display:inline-block;
|
||||
height: 100px;
|
||||
width: 70px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="mailto:florian@rivoal.net" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
display: inline-block;
|
||||
width: 130px;
|
||||
height: 150px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8">
|
||||
<title>CSS Basic User Interface Reference File</title>
|
||||
<link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
|
||||
<style>
|
||||
div {
|
||||
height: 130px;
|
||||
margin-bottom: 10px;
|
||||
width: 300px;
|
||||
background: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head><body>
|
||||
<p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p>
|
||||
<div></div>
|
||||
<div></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Box Sizing - Border-Box with specified width</title>
|
||||
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 300px;
|
||||
border: 2px solid black;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box-sized {
|
||||
width: 140px;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
border: 5px solid black;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The two divs should be side-by-side, not one on top of another. No red should be visible.
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="box-sized" id="one">LEFT HALF</div>
|
||||
<div class="box-sized" id="two">RIGHT HALF</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Box Sizing - Border-Box with specified width</title>
|
||||
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 300px;
|
||||
border: 2px solid black;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box-sized {
|
||||
width: 120px;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
border: 5px solid black;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The two divs should be side-by-side, not one on top of another. No red should be visible.
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="box-sized" id="one">LEFT HALF</div>
|
||||
<div class="box-sized" id="two">RIGHT HALF</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Box Sizing - Border-Box with specified width/height</title>
|
||||
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
border: 2px solid black;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box-sized {
|
||||
width: 120px;
|
||||
height: 340px;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
border: 5px solid black;
|
||||
padding: 25px 10px;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The two divs should be side-by-side, not one on top of another. No red should be visible.
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="box-sized" id="one">LEFT HALF</div>
|
||||
<div class="box-sized" id="two">RIGHT HALF</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Box Sizing - Border-Box with min/max width/height</title>
|
||||
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
min-width: 500px;
|
||||
max-width: 700px;
|
||||
min-height: 70px;
|
||||
max-height: 90px;
|
||||
border: 2px solid black;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box-sized {
|
||||
min-width: 240px;
|
||||
max-width: 340px;
|
||||
min-height: 60px;
|
||||
max-height: 80px;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
border: 5px solid black;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The two divs should be side-by-side, not one on top of another. No red should be visible.
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="box-sized" id="one">LEFT HALF</div>
|
||||
<div class="box-sized" id="two">RIGHT HALF</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Box Sizing - Content-Box with specified width/height</title>
|
||||
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 110px;
|
||||
border: 2px solid black;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box-sized {
|
||||
width: 150px;
|
||||
height: 110px;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The two divs should be side-by-side, not one on top of another. No red should be visible.
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="box-sized" id="one">LEFT HALF</div>
|
||||
<div class="box-sized" id="two">RIGHT HALF</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Box Sizing - Content-Box with specified width/height</title>
|
||||
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
border: 2px solid black;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box-sized {
|
||||
width: 140px;
|
||||
height: 90px;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The two divs should be side-by-side, not one on top of another. No red should be visible.
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="box-sized" id="one">LEFT HALF</div>
|
||||
<div class="box-sized" id="two">RIGHT HALF</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Box Sizing - Content-Box with min/max width/height</title>
|
||||
<link rel="author" title="Scott Johnson" href="mailto:sjohnson@mozilla.com">
|
||||
<style type="text/css">
|
||||
.container {
|
||||
min-width: 500px;
|
||||
max-width: 700px;
|
||||
height: 90px;
|
||||
border: 2px solid black;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: 25px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.box-sized {
|
||||
min-width: 250px;
|
||||
max-width: 350px;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#one {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#two {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
The two divs should be side-by-side, not one on top of another. No red should be visible.
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="box-sized" id="one">LEFT HALF</div>
|
||||
<div class="box-sized" id="two">RIGHT HALF</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
|
||||
<link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author">
|
||||
<link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author">
|
||||
<meta content="image" name="flags">
|
||||
<!--
|
||||
<link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
|
||||
-->
|
||||
<style type="text/css">
|
||||
p {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
margin: 0px 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
.with-padding {
|
||||
padding: 5px 5px;
|
||||
}
|
||||
|
||||
#img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>All rectangles should be the same size.</div>
|
||||
<p><img class="with-padding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></p>
|
||||
<p><img id="img" class="with-padding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
|
||||
<link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author">
|
||||
<link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author">
|
||||
<meta content="image" name="flags">
|
||||
<!--
|
||||
<link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
|
||||
-->
|
||||
<style type="text/css">
|
||||
p {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
margin: 0px 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
.with-borderpadding {
|
||||
padding: 5px 5px;
|
||||
border: 5px solid blue;
|
||||
}
|
||||
|
||||
#img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>All rectangles should be the same size.</div>
|
||||
<p><img class="with-borderpadding" src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></p>
|
||||
<p><img id="img" class="with-borderpadding" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference: Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing</title>
|
||||
<link href="http://fantasai.inkedblade.net/contact" title="Elika J. Etemad" rel="author">
|
||||
<link href="mailto:sjohnson@mozilla.com" title="Scott Johnson" rel="author">
|
||||
<meta content="image" name="flags">
|
||||
<!--
|
||||
<link rel="help" href="http://www.w3.org/TR/2012/WD-css3-ui-20120117/#box-sizing">
|
||||
-->
|
||||
<style type="text/css">
|
||||
p {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
margin: 0px 0px;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
#img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>All rectangles should be the same size.</div>
|
||||
<p><img src="support/replaced-min-max.png" alt="FAIL" title="Test 0"></p>
|
||||
<p><img id="img" title="Test 1" alt="FAIL" src="support/replaced-min-max-1.png"></p>
|
||||
<p><img id="img" title="Test 2" alt="FAIL" src="support/replaced-min-max-2.png"></p>
|
||||
<p><img id="img" title="Test 3" alt="FAIL" src="support/replaced-min-max-3.png"></p>
|
||||
<p><img id="img" title="Test 4" alt="FAIL" src="support/replaced-min-max-4.png"></p>
|
||||
<p><img id="img" title="Test 5" alt="FAIL" src="support/replaced-min-max-5.png"></p>
|
||||
<p><img id="img" title="Test 6" alt="FAIL" src="support/replaced-min-max-6.png"></p>
|
||||
<p><img id="img" title="Test 7" alt="FAIL" src="support/replaced-min-max-7.png"></p>
|
||||
<p><img id="img" title="Test 8" alt="FAIL" src="support/replaced-min-max-8.png"></p>
|
||||
<p><img id="img" title="Test 9" alt="FAIL" src="support/replaced-min-max-9.png"></p>
|
||||
<p><img id="img" title="Test 10" alt="FAIL" src="support/replaced-min-max-10.png"></p>
|
||||
<p><img id="img" title="Test 11" alt="FAIL" src="support/replaced-min-max-11.png"></p>
|
||||
<p><img id="img" title="Test 12" alt="FAIL" src="support/replaced-min-max-12.png"></p>
|
||||
<p><img id="img" title="Test 13" alt="FAIL" src="support/replaced-min-max-13.png"></p>
|
||||
<p><img id="img" title="Test 14" alt="FAIL" src="support/replaced-min-max-14.png"></p>
|
||||
<p><img id="img" title="Test 15" alt="FAIL" src="support/replaced-min-max-15.png"></p>
|
||||
<p><img id="img" title="Test 16" alt="FAIL" src="support/replaced-min-max-16.png"></p>
|
||||
<p><img id="img" title="Test 17" alt="FAIL" src="support/replaced-min-max-17.png"></p>
|
||||
<p><img id="img" title="Test 18" alt="FAIL" src="support/replaced-min-max-18.png"></p>
|
||||
<p><img id="img" title="Test 19" alt="FAIL" src="support/replaced-min-max-19.png"></p>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue