220 lines
9.2 KiB
HTML
220 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>cssom-view - scrolling quirks VS nonquirks mode</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
iframe {
|
|
width: 300px;
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
<iframe id="quirksframe"></iframe>
|
|
<iframe id="nonquirksframe"></iframe>
|
|
<div id="log"></div>
|
|
<script>
|
|
function setBodyContent(body) {
|
|
// Hide scrollbars and remove body margin to make measures more reliable.
|
|
body.style.overflow = "hidden";
|
|
body.style.margin = 0;
|
|
|
|
// Add an orange border to the body.
|
|
body.style.borderWidth = "10px 0px 0px 20px";
|
|
body.style.borderColor = "orange";
|
|
body.style.borderStyle = "solid";
|
|
|
|
// Create a 700x900 box with a green border.
|
|
body.innerHTML = "<div id='content' style='border-width: 30px 0px 0px 40px; border-style: solid; border-color: green; width: 660px; height: 870px; background: linear-gradient(135deg, red, blue);'></div>";
|
|
}
|
|
|
|
var quirksModeTest = async_test("Execution of tests in quirks mode");
|
|
var quirksFrame = document.getElementById("quirksframe");
|
|
quirksFrame.onload = function() {
|
|
var doc = quirksFrame.contentDocument;
|
|
setBodyContent(doc.body);
|
|
var content = doc.getElementById("content");
|
|
|
|
quirksModeTest.step(function () {
|
|
assert_equals(doc.compatMode, "BackCompat", "Should be in quirks mode.");
|
|
});
|
|
|
|
test(function () {
|
|
assert_equals(doc.scrollingElement, doc.body, "scrollingElement should be HTML body");
|
|
}, "scrollingElement in quirks mode");
|
|
|
|
test(function () {
|
|
doc.documentElement.scroll(50, 60);
|
|
assert_equals(doc.documentElement.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(doc.documentElement.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scroll() on the root element in quirks mode");
|
|
|
|
test(function () {
|
|
doc.documentElement.scrollBy(10, 20);
|
|
assert_equals(doc.documentElement.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(doc.documentElement.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scrollBy() on the root element in quirks mode");
|
|
|
|
test(function () {
|
|
doc.documentElement.scrollLeft = 70;
|
|
doc.documentElement.scrollTop = 80;
|
|
assert_equals(doc.documentElement.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(doc.documentElement.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scrollLeft/scrollTop on the root element in quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.documentElement.scrollWidth, 720, "scrollWidth should be 720");
|
|
assert_equals(doc.documentElement.scrollHeight, 910, "scrollHeight should be 910");
|
|
}, "scrollWidth/scrollHeight on the root element in quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.documentElement.clientWidth, 300, "clientWidth should be 300");
|
|
assert_equals(doc.documentElement.clientHeight, 910, "clientHeight should be 910");
|
|
}, "clientWidth/clientHeight on the root element in quirks mode");
|
|
|
|
test(function () {
|
|
doc.body.scroll(90, 100);
|
|
assert_equals(doc.body.scrollLeft, 90, "scrollLeft should be 90");
|
|
assert_equals(doc.body.scrollTop, 100, "scrollTop should be 100");
|
|
}, "scroll() on the HTML body element in quirks mode");
|
|
|
|
test(function () {
|
|
doc.body.scrollBy(10, 20);
|
|
assert_equals(doc.body.scrollLeft, 100, "scrollLeft should be 100");
|
|
assert_equals(doc.body.scrollTop, 120, "scrollTop should be 120");
|
|
}, "scrollBy() on the HTML body element in quirks mode");
|
|
|
|
test(function () {
|
|
doc.body.scrollLeft = 120;
|
|
doc.body.scrollTop = 110;
|
|
assert_equals(doc.body.scrollLeft, 120, "scrollLeft should be 120");
|
|
assert_equals(doc.body.scrollTop, 110, "scrollTop should be 110");
|
|
}, "scrollLeft/scrollTop on the HTML body element in quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.body.scrollWidth, 720, "scrollWidth should be 720");
|
|
assert_equals(doc.body.scrollHeight, 910, "scrollHeight should be 910");
|
|
}, "scrollWidth/scrollHeight on the HTML body element in quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.body.clientWidth, 300, "clientWidth should be 300");
|
|
assert_equals(doc.body.clientHeight, 500, "clientHeight should be 500");
|
|
}, "clientWidth/clientHeight on the HTML body element in quirks mode");
|
|
|
|
test(function () {
|
|
doc.scrollingElement.scroll(0, 0);
|
|
content.scrollLeft = 130;
|
|
content.scrollTop = 140;
|
|
assert_equals(content.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(content.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scrollLeft/scrollRight of the content in quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(content.scrollWidth, 660, "scrollWidth should be 660");
|
|
assert_equals(content.scrollHeight, 870, "scrollHeight should be 870");
|
|
}, "scrollWidth/scrollHeight of the content in quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(content.clientWidth, 660, "clientWidth should be 660");
|
|
assert_equals(content.clientHeight, 870, "clientHeight should be 870");
|
|
}, "clientWidth/clientHeight of the content in quirks mode");
|
|
|
|
quirksModeTest.done();
|
|
}
|
|
quirksFrame.src = URL.createObjectURL(new Blob([""], { type: "text/html" }));
|
|
|
|
var nonQuirksModeTest = async_test("Execution of tests in non-quirks mode");
|
|
var nonQuirksFrame = document.getElementById("nonquirksframe");
|
|
nonQuirksFrame.onload = function() {
|
|
var doc = nonQuirksFrame.contentDocument;
|
|
setBodyContent(doc.body);
|
|
var content = doc.getElementById("content");
|
|
|
|
nonQuirksModeTest.step(function() {
|
|
assert_equals(doc.compatMode, "CSS1Compat", "Should be in standards mode.");
|
|
});
|
|
|
|
test(function () {
|
|
assert_equals(doc.scrollingElement, doc.documentElement, "scrollingElement should be documentElement");
|
|
}, "scrollingElement in non-quirks mode");
|
|
|
|
test(function () {
|
|
doc.documentElement.scroll(50, 60);
|
|
assert_equals(doc.documentElement.scrollLeft, 50, "scrollLeft should be 50");
|
|
assert_equals(doc.documentElement.scrollTop, 60, "scrollTop should be 60");
|
|
}, "scroll() on the root element in non-quirks mode");
|
|
|
|
test(function () {
|
|
doc.documentElement.scrollBy(10, 20);
|
|
assert_equals(doc.documentElement.scrollLeft, 60, "scrollLeft should be 60");
|
|
assert_equals(doc.documentElement.scrollTop, 80, "scrollTop should be 80");
|
|
}, "scrollBy() on the root element in non-quirks mode");
|
|
|
|
test(function () {
|
|
doc.documentElement.scrollLeft = 70;
|
|
doc.documentElement.scrollTop = 80;
|
|
assert_equals(doc.documentElement.scrollLeft, 70, "scrollLeft should be 70");
|
|
assert_equals(doc.documentElement.scrollTop, 80, "scrollTop should be 80");
|
|
}, "scrollLeft/scrollTop on the root element in non-quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.documentElement.scrollWidth, 720, "scrollWidth should be 720");
|
|
assert_equals(doc.documentElement.scrollHeight, 910, "scrollHeight should be 910");
|
|
}, "scrollWidth/scrollHeight on the root element in non-quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.documentElement.clientWidth, 300, "clientWidth should be 300");
|
|
assert_equals(doc.documentElement.clientHeight, 500, "clientHeight should be 500");
|
|
}, "clientWidth/clientHeight on the root element in non-quirks mode");
|
|
|
|
test(function () {
|
|
doc.body.scroll(90, 100);
|
|
assert_equals(doc.body.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(doc.body.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scroll() on the HTML body element in non-quirks mode");
|
|
|
|
test(function () {
|
|
doc.body.scrollBy(10, 20);
|
|
assert_equals(doc.body.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(doc.body.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scrollBy() on the HTML body element in non-quirks mode");
|
|
|
|
test(function () {
|
|
doc.body.scrollLeft = 120;
|
|
doc.body.scrollTop = 110;
|
|
assert_equals(doc.body.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(doc.body.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scrollLeft/scrollTop on the HTML body element in non-quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.body.scrollWidth, 700, "scrollWidth should be 700");
|
|
assert_equals(doc.body.scrollHeight, 900, "scrollHeight should be 900");
|
|
}, "scrollWidth/scrollHeight on the HTML body element in non-quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(doc.body.clientWidth, 280, "clientWidth should be 280");
|
|
assert_equals(doc.body.clientHeight, 900, "clientHeight should be 900");
|
|
}, "clientWidth/clientHeight on the HTML body element in non-quirks mode");
|
|
|
|
test(function () {
|
|
doc.scrollingElement.scroll(0, 0);
|
|
content.scrollLeft = 130;
|
|
content.scrollTop = 140;
|
|
assert_equals(content.scrollLeft, 0, "scrollLeft should be 0");
|
|
assert_equals(content.scrollTop, 0, "scrollTop should be 0");
|
|
}, "scrollLeft/scrollRight of the content in non-quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(content.scrollWidth, 660, "scrollWidth should be 660");
|
|
assert_equals(content.scrollHeight, 870, "scrollHeight should be 870");
|
|
}, "scrollWidth/scrollHeight of the content in non-quirks mode");
|
|
|
|
test(function () {
|
|
assert_equals(content.clientWidth, 660, "clientWidth should be ");
|
|
assert_equals(content.clientHeight, 870, "clientHeight should be 870");
|
|
}, "clientWidth/clientHeight of the content in non-quirks mode");
|
|
|
|
nonQuirksModeTest.done();
|
|
}
|
|
nonQuirksFrame.src = URL.createObjectURL(new Blob(["<!doctype html>"], { type: "text/html" }));
|
|
|
|
</script>
|