mirror of
https://github.com/servo/servo.git
synced 2025-08-08 23:15:33 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
#shape {
|
||||
margin-left: 25px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="shape"></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: right float, shape-outside:border-box and shape-margin</title>
|
||||
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verfies a shape with shape-outside:border-box
|
||||
and shape-margin has rounded corners.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#test-container {
|
||||
/* Allow at most 1.5 glyphs to overflow the left edge of #container. */
|
||||
margin-left: -30px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background-color: red;
|
||||
color: green;
|
||||
text-align: right;
|
||||
}
|
||||
#test-shape {
|
||||
float: right;
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
margin: 95px 65px 95px 120px;
|
||||
shape-margin: 70px;
|
||||
shape-outside: border-box;
|
||||
}
|
||||
#static-shape {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 20px;
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
|
||||
<div id="static-shape"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: right float, shape-outside:content-box and shape-margin</title>
|
||||
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verfies a shape with shape-outside:content-box
|
||||
and shape-margin has rounded corners.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#test-container {
|
||||
/* Allow at most 1.5 glyphs to overflow the left edge of #container. */
|
||||
margin-left: -30px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
color: green;
|
||||
background-color: red;
|
||||
text-align: right;
|
||||
}
|
||||
#test-shape {
|
||||
margin-left: 30px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 95px 40px 95px 120px;
|
||||
shape-margin: 70px;
|
||||
shape-outside: content-box;
|
||||
}
|
||||
#static-shape {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 20px;
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
|
||||
<div id="static-shape"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: right float, shape-outside:padding-box and shape-margin</title>
|
||||
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="match" href="reference/shape-outside-padding-box-003-ref.html"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verfies a shape with shape-outside:padding-box
|
||||
and shape-margin has rounded corners.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#test-container {
|
||||
/* Allow at most 1.5 glyphs to overflow the left edge of #container. */
|
||||
margin-left: -30px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background-color: red;
|
||||
color: green;
|
||||
text-align: right;
|
||||
}
|
||||
#test-shape {
|
||||
margin-left: 30px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-width: 95px 40px 95px 120px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
shape-margin: 70px;
|
||||
shape-outside: padding-box;
|
||||
}
|
||||
#static-shape {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 20px;
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
|
||||
<div id="static-shape"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test verifies that shape-outside respects a
|
||||
simple linear gradient."/>
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-8000"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="This test verifies that shape-outside respects a
|
||||
simple linear gradient on a right float."/>
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-7917"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<meta name="assert" content="This test verifies that shape-outside respects a
|
||||
simple linear gradient on a right float with
|
||||
shape-margin applied."/>
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-7917"/>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style type="text/css">
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1758824">
|
||||
|
||||
<style>
|
||||
#a {
|
||||
float: right;
|
||||
padding: 30em;
|
||||
shape-outside: margin-box circle(81% at -1px 0px);
|
||||
}
|
||||
</style>
|
||||
<output>
|
||||
<shadow id="a">
|
||||
<svg>
|
||||
</shadow>
|
||||
<marquee></marquee>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#supported-basic-shapes">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1620671">
|
||||
|
||||
<style>
|
||||
.a {
|
||||
float: left;
|
||||
min-height: 99vw;
|
||||
shape-outside: ellipse(61% 100% at 34% 62%);
|
||||
}
|
||||
</style>
|
||||
<button class="a">
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
float: right;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: green;
|
||||
shape-margin: 10px;
|
||||
shape-outside: inset(60px 10px 60px 110px round 20px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: right float, inset and shape-margin</title>
|
||||
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-inset">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
|
||||
<link rel="match" href="reference/shape-outside-inset-010-ref.html"/>
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="The test verifies a shape with rectangular inset and
|
||||
shape-margin has rounded corners.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
</head>
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
margin-left: 25px;
|
||||
}
|
||||
#test-container {
|
||||
/* allow at most 1.5 glyphs to overflow the left edge of #container. */
|
||||
margin-left: -30px;
|
||||
width: 230px;
|
||||
height: 200px;
|
||||
font: 20px/1 Ahem;
|
||||
background-color: red;
|
||||
color: green;
|
||||
text-align: right;
|
||||
}
|
||||
#test-shape {
|
||||
margin-left: 30px;
|
||||
float: right;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
shape-margin: 70px;
|
||||
shape-outside: inset(95px 40px 95px 150px);
|
||||
}
|
||||
#static-shape {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 20px;
|
||||
width: 150px;
|
||||
height: 160px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div id="container">
|
||||
<div id="test-container">
|
||||
<div id="test-shape"></div>
|
||||
XXXXXXXXXX XXXXX XXXX XXX XXX XXX XXX XXXX XXXXX XXXXXXXXXX
|
||||
</div>
|
||||
<div id="static-shape"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
test(function() {
|
||||
var results = setUpTest("5px", null);
|
||||
assert_equals(results[0], null);
|
||||
assert_equals(results[0], "");
|
||||
assert_equals(results[1], "0px");
|
||||
}, "shape-margin is not inherited and defaults to 0px");
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com"> <!-- 2014-03-04 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
|
||||
<meta name="assert" content="shape-outside can be explictly assigned the default value of none.">
|
||||
<meta name="assert" content="shape-outside can be explicitly assigned the default value of none.">
|
||||
<meta name="flags" content="ahem dom">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ function testShapeMarginInlineStyle(value, expected) {
|
|||
div.style.setProperty('shape-outside', "border-box inset(10px)");
|
||||
div.style.setProperty('shape-margin', value);
|
||||
var actual = div.style.getPropertyValue('shape-margin');
|
||||
actual = roundResultStr(actual);
|
||||
expected = roundResultStr(expected);
|
||||
assert_equals(actual, expected);
|
||||
}
|
||||
|
||||
|
|
@ -322,15 +324,20 @@ function setUnit(str, convert, unit1, unit2, unit3) {
|
|||
return retStr;
|
||||
}
|
||||
|
||||
function roundCssNumber(n) {
|
||||
// See https://drafts.csswg.org/cssom/#serializing-css-values for numbers.
|
||||
return parseFloat(n.toPrecision(6));
|
||||
}
|
||||
|
||||
function convertToPx(origValue) {
|
||||
|
||||
var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%)/g);
|
||||
var valuesToConvert = origValue.match(/[0-9]+(\.[0-9]+)?([a-z]{2,4}|%|)/g);
|
||||
if(!valuesToConvert)
|
||||
return origValue;
|
||||
|
||||
var retStr = origValue;
|
||||
for(var i = 0; i < valuesToConvert.length; i++) {
|
||||
var unit = valuesToConvert[i].match(/[a-z]{2,4}|%/).toString();
|
||||
var unit = (valuesToConvert[i].match(/[a-z]{2,4}|%/) || '').toString();
|
||||
var numberStr = valuesToConvert[i].match(/[0-9]+(\.[0-9]+)?/)[0];
|
||||
|
||||
var number = parseFloat(numberStr);
|
||||
|
|
@ -367,7 +374,7 @@ function convertToPx(origValue) {
|
|||
else {
|
||||
convertedUnit = unit;
|
||||
}
|
||||
number = Math.round(number * 1000) / 1000;
|
||||
number = roundCssNumber(number);
|
||||
var find = valuesToConvert[i];
|
||||
var replace = number.toString() + convertedUnit;
|
||||
retStr = retStr.replace(valuesToConvert[i], number.toString() + convertedUnit);
|
||||
|
|
@ -388,7 +395,7 @@ function roundResultStr(str) {
|
|||
for(var i = 0; i < numbersToRound.length; i++) {
|
||||
num = parseFloat(numbersToRound[i]);
|
||||
if( !isNaN(num) ) {
|
||||
roundedNum = Math.round(num*1000)/1000;
|
||||
roundedNum = roundCssNumber(num);
|
||||
retStr = retStr.replace(numbersToRound[i].toString(), roundedNum.toString());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue