mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 150px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -44,4 +44,5 @@
|
|||
<div class="blue line-left"></div>
|
||||
<div class="blue line-right"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="zoltan@adobe.com" rel="author" title="Zoltan Horvath" />
|
||||
<link href="mailto:zoltan@adobe.com" rel="author" title="Zoltan Horvath" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<link href="mailto:bjonesbe@adobe.com" rel="author" title="Bem Jones-Bey" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 150px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<link href="mailto:hmuller@adobe.com" rel="author" title="Hans Muller" />
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -31,4 +31,5 @@
|
|||
<div class="green"></div>
|
||||
<div class="blue"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin-left: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin-right: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, border-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; left: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="height: 24px; top: 20px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; left: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; left: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; left: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, border-box, border-radius, no margin reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, border-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; right: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="height: 24px; top: 20px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; right: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; right: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; right: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, border-box, border-radius, no margin reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float right, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float right, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-rl, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-rl, float right, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, border-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-top-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, border-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-bottom-right-radius: 60px 40px;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
block-size: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="offset-block-start: 0; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="offset-block-start: 140px; offset-inline-start: 0;" class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(50% at left top) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; left: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 36px; left: 48px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 48px; left: 36px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 60px; top: 60px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; left: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 156px; left: 48px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 168px; left: 36px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(50% at right bottom) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; left: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; left: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle(50% at right top) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; right: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 36px; right: 48px;" class="box"></div>
|
||||
<div style="height: 12px; top: 48px; right: 36px;" class="box"></div>
|
||||
<div style="height: 60px; top: 60px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; right: 60px;" class="box"></div>
|
||||
<div style="height: 12px; top: 156px; right: 48px;" class="box"></div>
|
||||
<div style="height: 12px; top: 168px; right: 36px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(50% at left bottom) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; right: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; right: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(0%) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, circle(100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle(0%) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(0%) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 0px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, circle(100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 12px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float left, circle(50% at left 40px top 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left 40px top 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 28px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float right, circle(50% at left 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 28px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float left, circle(50% at right 40px top 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px top 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float right, circle(50% at right 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, circle(50% at right 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float right, circle(50% at right 40px top 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px top 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 140px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 100px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the left of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: horizontal-tb, float left, circle(50% at left 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at left 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: horizontal-tb, float right, circle(50% at right 40px bottom 40px) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: horizontal-tb;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: circle(50% at right 40px bottom 40px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin-inline-start: 20px;
|
||||
margin-inline-start: 20px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
inline-size: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;" class="long box"></div> <!-- Fill the border area due to the circle shifted -->
|
||||
<div style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;" class="box"></div>
|
||||
<div style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;" class="long box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, content-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: content-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding-left: 25px;
|
||||
border-left: 25px solid lightgreen;
|
||||
margin-left: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, content-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: content-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding-right: 25px;
|
||||
border-right: 25px solid lightgreen;
|
||||
margin-right: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the padding space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, content-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: content-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
padding: 10px;
|
||||
border: 5px solid lightgreen;
|
||||
margin: 5px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; left: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; left: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, content-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: content-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
padding: 10px;
|
||||
border: 5px solid lightgreen;
|
||||
margin: 5px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; right: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; right: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(40px 60px at left top)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at left top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; left: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 36px; left: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 60px; top: 60px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; left: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 156px; left: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(40px 60px at right bottom)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at right bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; left: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; left: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; left: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(40px 60px at right top)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at right top);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 36px; top: 0px; right: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 36px; right: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 60px; top: 60px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 120px; right: 40px;" class="box"></div>
|
||||
<div style="height: 24px; top: 156px; right: 32px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(40px 60px at left bottom)</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(40px 60px at left bottom);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.long {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div style="height: 60px; top: 0px; right: 0px;" class="long box"></div> <!-- Fill the space above the first float -->
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div>
|
||||
<div style="height: 60px; top: 120px; right: 0px;" class="long box"></div> <!-- Fill the space between two floats -->
|
||||
<div style="height: 36px; top: 180px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 216px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 228px; right: 120px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(closest-side farthest-side at left 40px top 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(closest-side farthest-side at left 40px top 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse() reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse();
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(closest-side farthest-side at right 40px top 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(closest-side farthest-side at right 40px top 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(0% 0%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(0% 0%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 0px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(0% 0%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(0% 0%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 0px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 0px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 0px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,39 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck" />
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#line {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 168px;
|
||||
width: 2px;
|
||||
height: 200px;
|
||||
border-left: 2px solid blue;
|
||||
}
|
||||
#square {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 170px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: green;
|
||||
}
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
<p>The test passes if there is a green square to the right of the blue line. There should be no red.</p>
|
||||
<div id="container">
|
||||
<div id="line"></div>
|
||||
<div id="square"></div>
|
||||
</div>
|
||||
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, ellipse(100% 100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(100% 100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; left: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 80px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, ellipse(100% 100%) reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(100% 100%);
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 20px 10px;
|
||||
border: solid lightgreen;
|
||||
border-width: 20px 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 24px; right: 80px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 80px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 80px;" class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float left, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-rl, float right, ellipse(farthest-side closest-side at top 40px right 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-rl;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px right 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: vertical-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float left, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: sideways-lr, float right, ellipse(farthest-side closest-side at top 40px left 60px) border-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
writing-mode: sideways-lr;
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
inline-size: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside */
|
||||
clip-path: ellipse(farthest-side closest-side at top 40px left 60px) border-box;
|
||||
box-sizing: content-box;
|
||||
block-size: 40px;
|
||||
inline-size: 40px;
|
||||
padding: 10px 20px;
|
||||
border: solid lightgreen;
|
||||
border-width: 10px;
|
||||
margin-block-end: 20px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
inline-size: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;" class="box"></div>
|
||||
<div style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Reference File</title>
|
||||
<link href="betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<link href="mailto:betravis@adobe.com" rel="author" title="Bear Travis" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, margin-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border: 25px solid lightgreen;
|
||||
margin: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, margin-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 24px; top: 0px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 24px; top: 96px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-top-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, margin-box, border-bottom-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-bottom-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="height: 12px; top: 0px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left in rtl container, margin-box, border-top-right-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.bfc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.container {
|
||||
direction: rtl;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-top-right-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="bfc">
|
||||
<span class="container">
|
||||
<div class="shape"></div>
|
||||
</span>
|
||||
<div style="height: 12px; top: 0px; left: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; left: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; left: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; left: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; left: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right in ltr container, margin-box, border-top-left-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.bfc {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.container {
|
||||
direction: ltr;
|
||||
unicode-bidi: bidi-override;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: margin-box; */
|
||||
border-top-left-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 20px;
|
||||
border: 20px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="bfc">
|
||||
<span class="container">
|
||||
<div class="shape"></div>
|
||||
</span>
|
||||
<div style="height: 12px; top: 0px; right: 96px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 12px; right: 108px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 24px; right: 120px;" class="box"></div>
|
||||
<div style="height: 36px; top: 60px; right: 120px;" class="box"></div>
|
||||
<div style="height: 12px; top: 96px; right: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 12px; top: 108px; right: 120px;" class="box"></div> <!-- Box at corner -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, padding-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: padding-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border-left: 25px solid lightgreen;
|
||||
margin-left: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, padding-box reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
width: 175px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: padding-box; */
|
||||
box-sizing: content-box;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding: 25px;
|
||||
border-right: 25px solid lightgreen;
|
||||
margin-right: 25px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
display: inline-block;
|
||||
width: 175px;
|
||||
height: 25px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="shape"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="longbox"></div> <!-- Saturate the border space -->
|
||||
<div class="longbox"></div> <!-- Saturate the margin space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float left, padding-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: left;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 40px;
|
||||
border: 10px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; left: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; left: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; left: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; left: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
- http://creativecommons.org/publicdomain/zero/1.0/ --><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
|
||||
<title>CSS Shape Test: float right, padding-box, border-radius reference</title>
|
||||
<link href="mailto:tlin@mozilla.com" rel="author" title="Ting-Yu Lin" />
|
||||
<link href="http://www.mozilla.org/" rel="author" title="Mozilla" />
|
||||
<style>
|
||||
.container {
|
||||
direction: rtl;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
float: right;
|
||||
/* Omit shape-outside: border-box; */
|
||||
border-radius: 50%;
|
||||
box-sizing: content-box;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 40px;
|
||||
border: 10px solid lightgreen;
|
||||
margin: 10px;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.longbox {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head><body class="container">
|
||||
<div class="shape"></div>
|
||||
<div style="top: 0; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
<div style="height: 24px; top: 20px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="height: 36px; top: 44px; right: 140px;" class="box"></div>
|
||||
<div style="height: 36px; top: 80px; right: 140px;" class="box"></div>
|
||||
<div style="height: 24px; top: 116px; right: 128px;" class="box"></div> <!-- Box at corner -->
|
||||
<div style="top: 140px; right: 0;" class="longbox"></div> <!-- Saturate the margin and border space -->
|
||||
|
||||
|
||||
</body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue