mirror of
https://github.com/servo/servo.git
synced 2025-08-24 06:45:33 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
2
tests/wpt/web-platform-tests/css/css-exclusions-1/OWNERS
Normal file
2
tests/wpt/web-platform-tests/css/css-exclusions-1/OWNERS
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@atanassov
|
||||
@astearns
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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 Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid #e0e0e0;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment, #bottom-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#left-fragment, #right-fragment {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div>
|
||||
</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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
|
||||
<link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
|
||||
<meta name="flags" content=""/>
|
||||
<meta name="assert" content=
|
||||
"Tests that wrap-flow:both is implemented. The inline boxes defined in the container
|
||||
with the exclusion element should wrap around the margin edges of the exclusion. Inline boxes
|
||||
are flowing to the left and right of the exclusion element."/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: red;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
wrap-flow: both;
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment, #bottom-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#left-fragment, #right-fragment {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="exclusion"></div><div id="top-fragment"></div><div id="left-fragment"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!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 Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
background: red;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-a {
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-b {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#left-fragment {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
display: inline-block;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
#clear-area {
|
||||
display: inline-block;
|
||||
background: #080;
|
||||
top: 150px;
|
||||
left: 250px;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
|
||||
right of the light green area and to the edge of the black background container. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
|
||||
<link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
|
||||
<meta name="flags" content=""/>
|
||||
<meta name="assert" content=
|
||||
"Tests that wrap-flow:start is implemented. The inline boxes defined in the container
|
||||
with the exclusion element should wrap around the left margin edge of the exclusion but
|
||||
not to the right. Inline boxes
|
||||
are flowing to the left of the exclusion element only."/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
background: red;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-a {
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-b {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#left-fragment {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
position: absolute;
|
||||
wrap-flow: start;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
#clear-area {
|
||||
position: absolute;
|
||||
background: #080;
|
||||
top: 150px;
|
||||
left: 250px;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
|
||||
right of the light green area and to the edge of the black background container. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!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 Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
background: red;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-a {
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-b {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#left-fragment {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
display: inline-block;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
#clear-area {
|
||||
display: inline-block;
|
||||
background: #080;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
|
||||
left of the light green area and to the edge of the black background container. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="top-fragment"></div><div id="clear-area"></div><div id="exclusion"></div><div id="left-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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 Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
|
||||
<link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
|
||||
<meta name="flags" content=""/>
|
||||
<meta name="assert" content=
|
||||
"Tests that wrap-flow:start is implemented. The inline boxes defined in the container
|
||||
with the exclusion element should wrap around the left margin edge of the exclusion but
|
||||
not to the right. Inline boxes
|
||||
are flowing to the left of the exclusion element only."/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
background: red;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-a {
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-b {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#left-fragment {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
position: absolute;
|
||||
wrap-flow: end;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
#clear-area {
|
||||
position: absolute;
|
||||
background: #080;
|
||||
top: 150px;
|
||||
left: 0px;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
|
||||
left of the light green area and to the edge of the black background container. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!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 Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
background: red;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-a {
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-b {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
display: inline-block;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
#clear-area-a, #clear-area-b {
|
||||
display: inline-block;
|
||||
background: #080;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="top-fragment"></div><div id="clear-area-a"></div><div id="exclusion"></div><div id="clear-area-b"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 Test: wrap-flow:none</title>
|
||||
<link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
|
||||
<link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
|
||||
<meta name="flags" content=""/>
|
||||
<meta name="assert" content=
|
||||
"Tests that wrap-flow:start is implemented. The inline boxes defined in the container
|
||||
with the exclusion element should wrap around the left margin edge of the exclusion but
|
||||
not to the right. Inline boxes
|
||||
are flowing to the left of the exclusion element only."/>
|
||||
<style>
|
||||
/*<![CDATA[*/
|
||||
|
||||
#containing-block {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
background: red;
|
||||
font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
|
||||
}
|
||||
|
||||
#top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
|
||||
display: inline-block;
|
||||
background: black;
|
||||
}
|
||||
|
||||
#top-fragment {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-a {
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#bottom-fragment-b {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#exclusion {
|
||||
position: absolute;
|
||||
wrap-flow: clear;
|
||||
top: 150px;
|
||||
left: 150px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #0f0;
|
||||
}
|
||||
|
||||
#clear-area-a, #clear-area-b {
|
||||
position: absolute;
|
||||
background: #080;
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
#clear-area-a {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#clear-area-b {
|
||||
left: 250px;
|
||||
}
|
||||
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p>
|
||||
<div id="containing-block"><div id="exclusion"></div><div id="clear-area-a"></div><div id="clear-area-b"></div><div id="top-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
function checkLinePos(spanID,expectedPos,coordToCheck) {
|
||||
if(coordToCheck == "top")
|
||||
var spanToCheck = document.getElementById(spanID).getBoundingClientRect().top;
|
||||
else if(coordToCheck == "right")
|
||||
var spanToCheck = document.getElementById(spanID).getBoundingClientRect().right;
|
||||
else if(coordToCheck == "left")
|
||||
var spanToCheck = document.getElementById(spanID).getBoundingClientRect().left;
|
||||
else
|
||||
var spanToCheck = document.getElementById(spanID).getBoundingClientRect().bottom;
|
||||
|
||||
/* Verify that the span appears where expected. It should be at expectedPos
|
||||
Test will allow 1/4 line height (3px) of leeway for minor spacing differences */
|
||||
return( (spanToCheck >= expectedPos) && (spanToCheck <= (expectedPos+3)) )
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Exclusions Test: wrap-flow property set to clear</title>
|
||||
<link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="The text should flow above and below the exclusion, and not on either side">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/helper.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.exclusion {
|
||||
wrap-flow: clear;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 50px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
background: blue;
|
||||
}
|
||||
#content {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
line-height: 12px;
|
||||
font: 12px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="exclusion"></div>
|
||||
|
||||
<div id="content"><span id="linesAbove">A<BR>B<BR>C<BR></span><span id="linesBelow">D<BR>E</span>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
test(function() {assert_equals(checkLinePos("linesBelow",150,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Exclusions Test: wrap-flow property set to start</title>
|
||||
<link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="Text should flow from the beginning of the line to the exclusion, as well as above and below">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/helper.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.exclusion {
|
||||
wrap-flow: start;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
background: blue;
|
||||
}
|
||||
#content {
|
||||
width: 400px;
|
||||
line-height: 12px;
|
||||
font: 12px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="exclusion"></div>
|
||||
|
||||
<div id="content">
|
||||
<span id="linesAbove">ethical<BR>beer<BR>craft<BR></span>
|
||||
<span id="lineLeft1">foo</span>
|
||||
<span id="lineLeft2">sed</span>
|
||||
<span id="linesBelow">Vegan<BR>cliche<BR>retro</span>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
test(function() {assert_equals(checkLinePos("lineLeft1",36,"top"), true)}, "Verify top of the 'lineLeft1' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("lineLeft2",48,"top"), true)}, "Verify top of the 'lineLeft2' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("lineLeft2",36,"right"), true)}, "Verify right of the 'lineLeft2' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("linesBelow",65,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Exclusions Test: wrap-flow property set to auto</title>
|
||||
<link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="No exclusion should be created">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/helper.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.exclusion {
|
||||
wrap-flow: auto;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
background: blue;
|
||||
}
|
||||
#content {
|
||||
width: 400px;
|
||||
line-height: 12px;
|
||||
font: 12px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="exclusion"></div>
|
||||
|
||||
<div id="content">
|
||||
<span id="line1">ethical beer craft</span><BR>
|
||||
<span id="line2">Fixie pork belly</span><BR>
|
||||
<span id="line3">food truck in marfa</span><BR>
|
||||
<span id="line4">american apparel squid</span>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
test(function() {assert_equals(checkLinePos("line1",216,"right"), true)}, "Verify right of the 'line1' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line2",192,"right"), true)}, "Verify right of the 'line2' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line3",228,"right"), true)}, "Verify right of the 'line3' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line4",264,"right"), true)}, "Verify right of the 'line4' span is positioned correctly");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Exclusions Test: wrap-flow property set to both</title>
|
||||
<link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="Text should flow on both the left and right side of the exclusion, in addition to above and below">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/helper.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.exclusion {
|
||||
wrap-flow: both;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 70px;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
background: blue;
|
||||
}
|
||||
#content {
|
||||
width: 400px;
|
||||
line-height: 12px;
|
||||
font: 12px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="exclusion"></div>
|
||||
|
||||
<div id="content">
|
||||
<span id="line1">ethical beer craft</span><BR>
|
||||
<span id="line2Left">jean </span><span id="line2Right">vegan</span><BR>
|
||||
<span id="line3Left">fund </span><span id="line3Right">selvage</span><BR>
|
||||
<span id="line4Left">swags </span><span id="line4Right">unami</span><BR>
|
||||
<span id="line5">american apparel squid</span>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* Line 1 */
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify right of the 'line1' span is positioned correctly");
|
||||
/* Line 2 */
|
||||
test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
|
||||
/* Line 3 */
|
||||
test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
|
||||
/* Line 4 */
|
||||
test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line4Right",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
|
||||
/* Line 5 */
|
||||
test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify right of the 'line5' span is positioned correctly");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Exclusions Test: wrap-flow property set to end</title>
|
||||
<link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="Text should flow on the right side of the exclusion, as well as above and below">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/helper.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.exclusion {
|
||||
wrap-flow: end;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 70px;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
background: blue;
|
||||
}
|
||||
#content {
|
||||
width: 400px;
|
||||
line-height: 12px;
|
||||
font: 12px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="exclusion"></div>
|
||||
|
||||
<div id="content">
|
||||
<span id="line1">ethical beer craft</span><BR>
|
||||
<span id="line2">jean</span><BR>
|
||||
<span id="line3">fun</span><BR>
|
||||
<span id="line4">swags</span><BR>
|
||||
<span id="line5">american apparel squid</span>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* Line 1 */
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the 'line1' span is positioned correctly");
|
||||
/* Line 2 */
|
||||
test(function() {assert_equals(checkLinePos("line2",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line2",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
|
||||
/* Line 3 */
|
||||
test(function() {assert_equals(checkLinePos("line3",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line3",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
|
||||
/* Line 4 */
|
||||
test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line4",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
|
||||
/* Line 5 */
|
||||
test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify left of the 'line5' span is positioned correctly");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Exclusions Test: wrap-flow property set to maximum</title>
|
||||
<link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="Text should flow in the left OR right side of the exclusion depending on which has more space, as well as above and below">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/helper.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.exclusion {
|
||||
wrap-flow: maximum;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 60px;
|
||||
height: 25px;
|
||||
background: blue;
|
||||
}
|
||||
#content {
|
||||
width: 400px;
|
||||
line-height: 12px;
|
||||
font: 12px Ahem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="exclusion"></div>
|
||||
|
||||
<div id="content">
|
||||
<span id="line1">ethical<BR>beer<BR>craft<BR></span>
|
||||
<span id="line2">foo</span>
|
||||
<span id="line3">sed</span>
|
||||
<span id="line4">Vegan<BR>cliche<BR>retro</span>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/*Line 1*/
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the 'line1' span is positioned correctly");
|
||||
/*Line 2*/
|
||||
test(function() {assert_equals(checkLinePos("line2",36,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line2",100,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
|
||||
/*Line 3*/
|
||||
test(function() {assert_equals(checkLinePos("line3",48,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line3",100,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
|
||||
/*Line 4*/
|
||||
test(function() {assert_equals(checkLinePos("line4",65,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
|
||||
test(function() {assert_equals(checkLinePos("line4",0,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Exclusions Test: wrap-through property set to none</title>
|
||||
<link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-through-property">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="assert" content="The wrapping context should not be inheritted from the parent node when wrap-through is set to none">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/helper.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.exclusion {
|
||||
wrap-flow: both;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 70px;
|
||||
width: 60px;
|
||||
height: 36px;
|
||||
background: blue;
|
||||
}
|
||||
#content1, #content2 {
|
||||
width: 400px;
|
||||
line-height: 12px;
|
||||
font: 12px Ahem;
|
||||
}
|
||||
#content2 {
|
||||
wrap-through: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="myContainer">
|
||||
<div class="exclusion"></div>
|
||||
|
||||
<div id="content1">
|
||||
<span id="line1">ethical beer craft</span><BR>
|
||||
<span id="line2Left">jean </span><span id="line2Right">vegan</span><BR>
|
||||
<span id="line3Left">fund </span><span id="line3Right">selvage</span><BR>
|
||||
</div>
|
||||
<div id="content2">
|
||||
<span id="line4Left">swags </span><span id="line4Right">unami</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
/* Line 1 */
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the first line above the exclusion");
|
||||
test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the first line above the exclusion");
|
||||
/* Line 2 */
|
||||
test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the second line on the left of the exclusion");
|
||||
test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the second line on the right of the exclusion");
|
||||
/* Line 3 */
|
||||
test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the third line on the left of the exclusion");
|
||||
test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the third line on the right of the exclusion");
|
||||
/* Line 4 */
|
||||
test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the fourth line with no wrapping-through = none");
|
||||
test(function() {assert_equals(checkLinePos("line4Right",72,"left"), true)}, "Verify left of the fourth line with wrapping-through = none");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue