Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-07 22:45:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

Browse source
This commit is contained in:
James Graham 2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

89
tests/wpt/css-tests/css-shapes-1_dev/html/shape-outside-006.htm Normal file
View file

@ -0,0 +1,89 @@
<!DOCTYPE html>
<html><head>
<title>CSS Test: shape-outside with open areas on both the left &amp; right of
the float area</title>
<link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
<link href="http://www.w3.org/TR/css-shapes-1/#relation-to-box-model-and-float-behavior" rel="help">
<link href="http://www.w3.org/TR/css-shapes-1/#supported-basic-shapes" rel="help">
<link href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property" rel="help">
<link href="reference/shape-outside-006-ref.htm" rel="match">
<meta content="ahem" name="flags">
<meta content="This test verifies that content wraps only on one side of
the float even though there is open area on both the left
and right sides of the float." name="assert">
<!-- This test is derived from Example 4 in this version of the spec:
http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/ -->
<style type="text/css">
.container {
width: 250px;
font-family: Ahem;
font-size: 20px;
line-height: 1.5em;
border: 1px solid black;
padding-top: 5px;
}
#test {
color: green;
}
#test-float-left {
shape-outside: polygon(50px 0px, 100px 100px, 0px 100px);
float: left;
width: 100px;
height: 100px;
}
#failure-container {
z-index: -1;
}
#test, #failure-container {
position: absolute;
top: 70px;
}
.fail {
position: absolute;
height: 20px;
background-color: red;
}
#bar-1 {
top: 11px;
left: 66px;
width: 160px;
}
#bar-2 {
top: 41px;
left: 81px;
width: 140px;
}
#bar-3 {
top: 71px;
left: 96px;
width: 120px;
}
#triangle {
position: absolute;
top: 70px;
width: 100px;
height: 100px;
background-color: lightblue;
clip-path: polygon(50px 0px, 100px 100px, 0px 100px);
}
</style>
</head>
<body>
<p>
The test passes if all there are three green horizontal bars to the right of the
triangle that are all inside the rectangle and there should be no green to the left
of the triangle. There should be no red.
</p>
<div class="container" id="test">
<div id="test-float-left"></div>
XXXXXXXX XXXXXXX XXXXXX
</div>
<div id="failure-container">
<div class="fail" id="bar-1"></div>
<div class="fail" id="bar-2"></div>
<div class="fail" id="bar-3"></div>
</div>
<div id="triangle"></div>
</body></html>