mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision 887d08e63a19b14acf3217df77f12c121a792fed
This commit is contained in:
WPT Sync Bot
parent
97ad913dc2
commit
a41065a1f4
65 changed files with 1433 additions and 463 deletions
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
div {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.blue {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>x<span class="blue"></span></div>
|
||||
<div>x<br><span class="blue"></span></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test: Absolutely positioned object in a negative margin box</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos">
|
||||
<link rel="match" href="abspos-negative-margin-001-ref.html">
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.abspos {
|
||||
position:absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>
|
||||
<span>
|
||||
<span style="margin-right: -10px;">
|
||||
x<span class="abspos"></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span style="margin-right: -10px;">
|
||||
x<div class="abspos"></div>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Lists: test the change of list-style-type</title>
|
||||
<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=966750">
|
||||
<style type="text/css">
|
||||
.inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.none2symbol {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.symbol2none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.symbol2symbol {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.symbol2ordinal {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
|
||||
.ordinal2ordinal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul class="inside"><li class="none2symbol">inside: none to square</li></ul>
|
||||
<ul><li class="none2symbol">outside: none to square</li></ul>
|
||||
|
||||
<ul class="inside"><li class="symbol2none">inside: square to none</li></ul>
|
||||
<ul><li class="symbol2none">outside: square to none</li></ul>
|
||||
|
||||
<ul class="inside"><li class="symbol2symbol">inside: disc to square</li></ul>
|
||||
<ul><li class="symbol2symbol">outside: disc to square</li></ul>
|
||||
|
||||
<ul class="inside"><li class="symbol2ordinal">inside: disc to upper-roman</li></ul>
|
||||
<ul><li class="symbol2ordinal">outside: disc to upper-roman</li></ul>
|
||||
|
||||
<ul class="inside"><li class="ordinal2ordinal">inside: upper-roman to decimal</li></ul>
|
||||
<ul><li class="ordinal2ordinal">outside: upper-roman to decimal</li></ul>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Lists: test the change of list-style-type</title>
|
||||
<link rel=help href="https://www.w3.org/TR/CSS22/generate.html#lists">
|
||||
<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=966750">
|
||||
<style type="text/css">
|
||||
.inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.none2symbol {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.symbol2none {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.symbol2symbol {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.symbol2ordinal {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.ordinal2ordinal {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul class="inside"><li class="none2symbol">inside: none to square</li></ul>
|
||||
<ul><li class="none2symbol">outside: none to square</li></ul>
|
||||
|
||||
<ul class="inside"><li class="symbol2none">inside: square to none</li></ul>
|
||||
<ul><li class="symbol2none">outside: square to none</li></ul>
|
||||
|
||||
<ul class="inside"><li class="symbol2symbol">inside: disc to square</li></ul>
|
||||
<ul><li class="symbol2symbol">outside: disc to square</li></ul>
|
||||
|
||||
<ul class="inside"><li class="symbol2ordinal">inside: disc to upper-roman</li></ul>
|
||||
<ul><li class="symbol2ordinal">outside: disc to upper-roman</li></ul>
|
||||
|
||||
<ul class="inside"><li class="ordinal2ordinal">inside: upper-roman to decimal</li></ul>
|
||||
<ul><li class="ordinal2ordinal">outside: upper-roman to decimal</li></ul>
|
||||
|
||||
<script>
|
||||
document.body.offsetLeft;
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.none2symbol {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.symbol2none {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.symbol2symbol {
|
||||
list-style-type: square;
|
||||
}
|
||||
|
||||
.symbol2ordinal {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
|
||||
.ordinal2ordinal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" href="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://crbug.com/970166">
|
||||
<meta name="assert" content="simplified layout calculates correct abspos position with floats">
|
||||
<style>
|
||||
|
||||
#container {
|
||||
position: relative;
|
||||
background: gray;
|
||||
}
|
||||
#container::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear:both;
|
||||
}
|
||||
#target {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="container">
|
||||
<div style="float:left">floatleft</div>
|
||||
<div id="target">
|
||||
<div>text</div>
|
||||
<div id="toggle">toggle</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
document.body.offsetTop;
|
||||
let el = document.querySelector("#toggle");
|
||||
el.style.display = "none";
|
||||
document.body.offsetTop;
|
||||
assert_equals(document.querySelector("#target").offsetTop, 0);
|
||||
}, '#target position is recalculated correctly.');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/971811">
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
const strings = [' ', '\t', '\n', '\f', '\r'];
|
||||
const whitespace_values = ['normal', 'pre', 'nowrap', 'pre-wrap', 'break-spaces', 'pre-line'];
|
||||
const container = document.body;
|
||||
for (let whitespace_value of whitespace_values) {
|
||||
for (let string of strings) {
|
||||
test(() => {
|
||||
let div = document.createElement('div');
|
||||
div.style.whiteSpace = whitespace_value;
|
||||
div.textContent = 'test';
|
||||
container.appendChild(div);
|
||||
container.offsetTop; // Force layout
|
||||
div.appendChild(document.createTextNode(string));
|
||||
container.offsetTop; // Force layout
|
||||
}, `Append ${toCodePoints(string)} to 'white-space: ${whitespace_value}'`);
|
||||
}
|
||||
}
|
||||
|
||||
function toCodePoints(string) {
|
||||
let results = [];
|
||||
for (let ch of string) {
|
||||
let hex = ch.codePointAt(0).toString(16).toUpperCase();
|
||||
hex = ('000' + hex).substr(-4)
|
||||
results.push('U+' + hex);
|
||||
}
|
||||
return results.join(' ');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM View - extensions to the Document interface</title>
|
||||
<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-document-interface">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.map {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.child {
|
||||
width: 183.66px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="map"></div>
|
||||
<div class="box" id="box">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const box = document.getElementById('box');
|
||||
const rect = box.getBoundingClientRect();
|
||||
|
||||
test(() => {
|
||||
assert_equals(document.elementFromPoint(rect.x, rect.y), box);
|
||||
}, 'Hit test top left corner of box');
|
||||
|
||||
test(() => {
|
||||
assert_equals(document.elementFromPoint(rect.x + rect.width - 1, rect.y), box);
|
||||
}, 'Hit test top right corner of box');
|
||||
|
||||
test(() => {
|
||||
assert_equals(document.elementFromPoint(rect.x, rect.y + rect.height - 1), box);
|
||||
}, 'Hit test bottom left corner of box');
|
||||
|
||||
test(() => {
|
||||
assert_equals(document.elementFromPoint(rect.x + rect.width - 1, rect.y + rect.height - 1), box);
|
||||
}, 'Hit test lower left corner of box');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!doctype html>
|
||||
<title>CSSOM test: no side effects from setting "height"</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty">
|
||||
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=107380">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<p>
|
||||
Historically, the Apple Safari web browser has added an "intrinsic margin" to
|
||||
form controls which do not specify a `height`. It removed this margin following
|
||||
modification of the `height`. <a
|
||||
href="https://bugs.webkit.org/show_bug.cgi?id=107380">This non-standard
|
||||
behavior was identified as a source of confusion for web developers.</a>
|
||||
</p>
|
||||
|
||||
<script>
|
||||
function makeElement(tagName) {
|
||||
var element = document.createElement(tagName);
|
||||
document.body.appendChild(element);
|
||||
return element;
|
||||
}
|
||||
function makeInputElement(type) {
|
||||
var element = makeElement('input');
|
||||
element.setAttribute('type', type);
|
||||
return element;
|
||||
}
|
||||
function measure(element) {
|
||||
var computed = getComputedStyle(element);
|
||||
return [computed.marginTop, computed.marginBottom];
|
||||
}
|
||||
|
||||
test(function() {
|
||||
var element = makeInputElement('text');
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'text input element');
|
||||
|
||||
test(function() {
|
||||
var element = makeInputElement('button');
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'button input element');
|
||||
|
||||
test(function() {
|
||||
var element = makeInputElement('submit');
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'submit input element');
|
||||
|
||||
test(function() {
|
||||
var element = makeInputElement('radio');
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'radio input element');
|
||||
|
||||
test(function() {
|
||||
var element = makeInputElement('checkbox');
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'checkbox input element');
|
||||
|
||||
test(function() {
|
||||
var element = makeElement('textarea');
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'textarea element');
|
||||
|
||||
test(function() {
|
||||
var element = makeElement('select');
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'select element');
|
||||
|
||||
test(function() {
|
||||
var element = makeElement('button')
|
||||
var initial = measure(element);
|
||||
|
||||
element.style.setProperty('height', '12px');
|
||||
|
||||
assert_array_equals(measure(element), initial);
|
||||
}, 'button element');
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue