mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision be5419e845d39089ba6dc338c1bd0fa279108317
This commit is contained in:
Josh Matthews
parent
aa199307c8
commit
2b6f573eb5
3440 changed files with 109438 additions and 41750 deletions
|
|
@ -0,0 +1,223 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Tests layout of absolutely positioned modal dialogs.</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
/* Remove body margin and dialog styles for easier positioning expected values */
|
||||
body {
|
||||
height: 10000px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dialog {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#absolute-div {
|
||||
position: absolute;
|
||||
top: 800px;
|
||||
height: 50px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#relative-div {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<dialog >It is my dialog.</dialog>
|
||||
<div id="absolute-div">
|
||||
<div id="relative-div"></div>
|
||||
</div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
function checkNotVerticallyCentered(dialog) {
|
||||
var centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
|
||||
assert_not_equals(dialog.getBoundingClientRect().top, centeredTop);
|
||||
}
|
||||
|
||||
function checkVerticallyCentered(dialog) {
|
||||
var centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
|
||||
assert_equals(dialog.getBoundingClientRect().top, centeredTop);
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (dialog.open)
|
||||
dialog.close();
|
||||
dialog.remove();
|
||||
document.body.appendChild(dialog);
|
||||
window.scroll(0, 500);
|
||||
}
|
||||
|
||||
var dialog = document.querySelector('dialog');
|
||||
var absoluteContainer = document.querySelector('#absolute-div');
|
||||
var relativeContainer = document.querySelector('#relative-div');
|
||||
reset();
|
||||
|
||||
test(function() {
|
||||
dialog.showModal();
|
||||
checkVerticallyCentered(dialog);
|
||||
reset();
|
||||
}, "showModal() should center in the viewport");
|
||||
|
||||
test(function() {
|
||||
assert_equals(window.getComputedStyle(dialog).top, 'auto');
|
||||
assert_equals(window.getComputedStyle(dialog).bottom, 'auto');
|
||||
|
||||
dialog.style.height = '20px';
|
||||
dialog.showModal();
|
||||
|
||||
assert_not_equals(window.getComputedStyle(dialog).top, 'auto');
|
||||
assert_not_equals(window.getComputedStyle(dialog).bottom, 'auto');
|
||||
|
||||
// Set back original value to 'height'.
|
||||
dialog.style.height = 'auto';
|
||||
reset();
|
||||
}, "The dialog is a positioned element, so the top and bottom should not have style auto.");
|
||||
|
||||
test(function() {
|
||||
dialog.showModal();
|
||||
dialog.close();
|
||||
window.scroll(0, 2 * window.scrollY);
|
||||
dialog.showModal();
|
||||
checkVerticallyCentered(dialog);
|
||||
reset();
|
||||
}, "Dialog should be recentered if showModal() is called after close()");
|
||||
|
||||
test(function() {
|
||||
dialog.showModal();
|
||||
var expectedTop = dialog.getBoundingClientRect().top;
|
||||
window.scroll(0, window.scrollY * 2);
|
||||
|
||||
// Trigger relayout
|
||||
document.body.offsetHeight;
|
||||
|
||||
window.scroll(0, window.scrollY / 2);
|
||||
assert_equals(dialog.getBoundingClientRect().top, expectedTop);
|
||||
reset();
|
||||
}, "Dialog should not recenter on relayout.");
|
||||
|
||||
test(function() {
|
||||
dialog.style.height = '20000px';
|
||||
dialog.showModal();
|
||||
assert_equals(dialog.getBoundingClientRect().top, 0);
|
||||
|
||||
// Set back original value to 'height'.
|
||||
dialog.style.height = 'auto';
|
||||
reset();
|
||||
}, "A tall dialog should be positioned at the top of the viewport.");
|
||||
|
||||
test(function() {
|
||||
document.body.style.width = '4000px';
|
||||
dialog.showModal();
|
||||
checkVerticallyCentered(dialog);
|
||||
|
||||
// Set back original value to 'width'.
|
||||
document.body.style.width = 'auto';
|
||||
reset();
|
||||
}, "The dialog should be centered regardless of the presence of a horizontal scrollbar.");
|
||||
|
||||
test(function() {
|
||||
dialog.remove();
|
||||
absoluteContainer.appendChild(dialog);
|
||||
dialog.showModal();
|
||||
checkVerticallyCentered(dialog);
|
||||
dialog.close();
|
||||
|
||||
dialog.remove();
|
||||
relativeContainer.appendChild(dialog);
|
||||
dialog.showModal();
|
||||
checkVerticallyCentered(dialog);
|
||||
|
||||
reset();
|
||||
}, "Centering should work when dialog is inside positioned containers.");
|
||||
|
||||
test(function() {
|
||||
dialog.showModal();
|
||||
var expectedTop = dialog.getBoundingClientRect().top;
|
||||
relativeContainer.style.display = 'none';
|
||||
relativeContainer.style.display = 'block';
|
||||
assert_equals(dialog.getBoundingClientRect().top, expectedTop);
|
||||
|
||||
reset();
|
||||
}, "A centered dialog's position should survive becoming display:none temporarily.");
|
||||
|
||||
test(function() {
|
||||
// Remove and reinsert so that the document position isn't changed by the second remove and reinsert
|
||||
dialog.remove();
|
||||
relativeContainer.appendChild(dialog);
|
||||
|
||||
dialog.showModal();
|
||||
assert_not_equals(dialog.getBoundingClientRect().top, relativeContainer.getBoundingClientRect().top);
|
||||
dialog.remove();
|
||||
|
||||
relativeContainer.appendChild(dialog);
|
||||
assert_equals(dialog.parentNode, relativeContainer);
|
||||
assert_equals(dialog.getBoundingClientRect().top, relativeContainer.getBoundingClientRect().top);
|
||||
|
||||
reset();
|
||||
}, "Dialog should lose centering when removed from the document.");
|
||||
|
||||
test(function() {
|
||||
dialog.showModal();
|
||||
dialog.style.top = '0px';
|
||||
var expectedTop = dialog.getBoundingClientRect().top;
|
||||
dialog.close();
|
||||
dialog.showModal();
|
||||
assert_equals(dialog.getBoundingClientRect().top, expectedTop);
|
||||
|
||||
// Set back original value to 'top'.
|
||||
dialog.style.top = 'auto';
|
||||
reset();
|
||||
}, "Dialog's specified position should survive after close() and showModal().");
|
||||
|
||||
test(function() {
|
||||
dialog.showModal();
|
||||
dialog.removeAttribute('open');
|
||||
window.scroll(0, window.scrollY * 2);
|
||||
checkNotVerticallyCentered(dialog);
|
||||
dialog.showModal();
|
||||
checkVerticallyCentered(dialog);
|
||||
|
||||
reset();
|
||||
}, "Dialog should be recentered if showModal() is called after removing 'open'.");
|
||||
|
||||
test(function() {
|
||||
dialog.remove();
|
||||
absoluteContainer.appendChild(dialog);
|
||||
absoluteContainer.style.display = 'none';
|
||||
dialog.showModal();
|
||||
absoluteContainer.style.display = 'block';
|
||||
// Since dialog's containing block is the ICB, it's statically positioned after <body>.
|
||||
assert_equals(dialog.getBoundingClientRect().top, document.body.getBoundingClientRect().bottom);
|
||||
reset();
|
||||
}, "Dialog should not be centered if showModal() was called when an ancestor had display 'none'.");
|
||||
|
||||
test(function() {
|
||||
var offset = 50;
|
||||
dialog.style.top = offset + 'px';
|
||||
dialog.showModal();
|
||||
assert_equals(dialog.getBoundingClientRect().top + window.scrollY, offset);
|
||||
// Set back original value to 'top'.
|
||||
dialog.style.top = 'auto';
|
||||
reset();
|
||||
}, "A dialog with specified 'top' should be positioned as usual");
|
||||
|
||||
test(function() {
|
||||
var offset = 50;
|
||||
dialog.style.bottom = offset + 'px';
|
||||
dialog.showModal();
|
||||
assert_equals(dialog.getBoundingClientRect().bottom + window.scrollY, window.innerHeight - offset);
|
||||
// Set back original value to 'bottom'.
|
||||
dialog.style.bottom = 'auto';
|
||||
reset();
|
||||
}, "A dialog with specified 'bottom' should be positioned as usual");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding : 0;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body style="height: 10000px; width: 10000px">
|
||||
<div style="position: absolute; top: 5000px; left: 5000px; width: 20px;">
|
||||
<dialog style="top: 1200px; left: 1200px; right: auto; height: 100px; width: 50%;">
|
||||
</dialog>
|
||||
</div>
|
||||
<script>
|
||||
"use strict";
|
||||
function checkPosition(dialog) {
|
||||
assert_equals(dialog.offsetParent, null);
|
||||
assert_equals(dialog.offsetTop, 1200);
|
||||
assert_equals(dialog.offsetLeft, 1200);
|
||||
// Since dialog's 'width' is '50%', the expected width is half of the
|
||||
// viewport width, but viewport width may be odd.
|
||||
var expectedWidth = document.documentElement.clientWidth / 2;
|
||||
assert_approx_equals(dialog.clientWidth, expectedWidth, 0.5);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
// The dialog should be onscreen with a width of 50% of the viewport. It is the child of a
|
||||
// narrow element positioned off screen, but its containing block is the initial containing
|
||||
// block, so its position and percent lengths are relative to that.
|
||||
window.scroll(1000, 1000);
|
||||
var dialog = document.querySelector('dialog');
|
||||
dialog.showModal();
|
||||
checkPosition(dialog);
|
||||
dialog.close();
|
||||
}, "Tests modal dialog's containing block is the initial containing block");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
button {
|
||||
color: green;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.trigger-style-recalc {
|
||||
/* No change, we just need a new style recalculation. */
|
||||
font-weight:bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="color: green">
|
||||
<button>The test passes if this is in green.</button>
|
||||
<dialog></dialog>
|
||||
<script>
|
||||
"use strict";
|
||||
test(function() {
|
||||
document.querySelector('dialog').showModal();
|
||||
var button = document.querySelector('button');
|
||||
button.classList.add('trigger-style-recalc');
|
||||
var color = document.defaultView.getComputedStyle(button).getPropertyValue('color');
|
||||
assert_equals(color, 'rgb(0, 128, 0)');
|
||||
}, "Tests inert elements do not match the :disabled selector.");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body id="body" tabindex="1">
|
||||
<dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
|
||||
<dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
|
||||
<div id="container">
|
||||
<input id="text" type="text">
|
||||
<input id="datetime" type="datetime">
|
||||
<input id="color" type="color">
|
||||
<select id="select">
|
||||
<optgroup id="optgroup">
|
||||
<option id="option">Option</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
<div id="contenteditable-div" contenteditable>I'm editable</div>
|
||||
<span id="tabindex-span" tabindex="0">I'm tabindexed.</div>
|
||||
<embed id="embed" type="application/x-blink-test-plugin" width=100 height=100></embed>
|
||||
<a id="anchor" href="">Link</a>
|
||||
</div>
|
||||
<script>
|
||||
"use strict";
|
||||
// The test passses if only the topmost dialog and its button are focusable.
|
||||
|
||||
function testFocus(element, expectFocus) {
|
||||
var focusedElement = null;
|
||||
element.addEventListener('focus', function() { focusedElement = element; }, false);
|
||||
element.focus();
|
||||
var theElement = element;
|
||||
assert_equals(focusedElement === theElement, expectFocus, element.id);
|
||||
}
|
||||
|
||||
function testTree(element, expectFocus) {
|
||||
if (element.nodeType == Node.ELEMENT_NODE)
|
||||
testFocus(element, expectFocus);
|
||||
var childNodes = element.childNodes;
|
||||
for (var i = 0; i < childNodes.length; i++)
|
||||
testTree(childNodes[i], expectFocus);
|
||||
}
|
||||
|
||||
test(function() {
|
||||
var bottomDialog = document.getElementById('bottom-dialog');
|
||||
bottomDialog.showModal();
|
||||
|
||||
var topDialog = document.getElementById('top-dialog');
|
||||
topDialog.showModal();
|
||||
|
||||
testFocus(document.body, false);
|
||||
testTree(topDialog, true);
|
||||
testTree(bottomDialog, false);
|
||||
testTree(document.getElementById('container'), false);
|
||||
}, "Test that inert nodes are not focusable.");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue