354 lines
10 KiB
HTML
354 lines
10 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Tests for document.getWireframe()</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
|
|
<script>
|
|
/**
|
|
* This test creates some simple webpages, captures wireframes for them, and
|
|
* then compares them against some expected wireframe structures.
|
|
*/
|
|
|
|
/**
|
|
* Converts some RGB values into the same uint32_t nsColor representation
|
|
* that getWireframe uses.
|
|
*
|
|
* @param {Number} r
|
|
* Red color value.
|
|
* @param {Number} g
|
|
* Green color value.
|
|
* @param {Number} b
|
|
* Blue color value.
|
|
* @returns {Number}
|
|
* The red, green and blue values composed in a single uint32_t-compatible
|
|
* value.
|
|
*/
|
|
function nscolor(r, g, b) {
|
|
return (255 << 24 | b << 16 | g << 8 | r) >>> 0;
|
|
}
|
|
|
|
const WHITE_NSCOLOR = nscolor(255, 255, 255);
|
|
|
|
const RED_RGB = "rgb(255, 0, 0)";
|
|
const RED_NSCOLOR = nscolor(255, 0, 0);
|
|
const GREEN_RGB = "rgb(0, 255, 0)";
|
|
const GREEN_NSCOLOR = nscolor(0, 255, 0);
|
|
const BLUE_RGB = "rgb(0, 0, 255)";
|
|
const BLUE_NSCOLOR = nscolor(0, 0, 255);
|
|
const BLACK_RGB = "rgb(0, 0, 0)";
|
|
const BLACK_NSCOLOR = nscolor(0, 0, 0);
|
|
const BUILDER = "http://mochi.test:8888/document-builder.sjs?html=";
|
|
const TEST_PATH = "http://mochi.test:8888/tests/dom/base/test/";
|
|
|
|
/**
|
|
* This array contains the definition of each test. Each test is an object
|
|
* that expects two properties:
|
|
*
|
|
* {String} html
|
|
* The markup to be loaded in the page iframe that a wireframe will be
|
|
* generated for.
|
|
* {Object} expectedWireframe
|
|
* An approximation of the wireframe that should be generated. The
|
|
* approximation is due to the fact that different platforms and
|
|
* execution environments might produce slightly different positioning
|
|
* of wireframe rects. We skip comparing the position of the rects, and
|
|
* only look at their dimensions (sometimes only one dimension if the
|
|
* other is potentially more variable - for example with text). Properties
|
|
* included in this object will do a strict comparison with the generated
|
|
* wireframe. Properties in the generated wireframe that are not in the
|
|
* expectedWireframe will be ignored.
|
|
*/
|
|
const kTests = [{
|
|
// Base case: a simple solid background with a single character in the
|
|
// foreground.
|
|
html: `
|
|
<html>
|
|
<style>
|
|
body {
|
|
width: 500px;
|
|
height: 500px;
|
|
background-color: ${RED_RGB};
|
|
color: ${BLACK_RGB};
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
<body>x</body>
|
|
</html>
|
|
`,
|
|
expectedWireframe: {
|
|
canvasBackground: RED_NSCOLOR,
|
|
rects: [{
|
|
color: BLACK_NSCOLOR,
|
|
height: 12,
|
|
type: "text",
|
|
}]
|
|
},
|
|
}, {
|
|
// Additional background on top of the main background.
|
|
html: `
|
|
<html>
|
|
<style>
|
|
body {
|
|
background-color: ${RED_RGB};
|
|
color: ${BLACK_RGB};
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
}
|
|
div {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: ${GREEN_RGB};
|
|
}
|
|
</style>
|
|
<body>
|
|
<div>x</div>
|
|
</body>
|
|
</html>
|
|
`,
|
|
expectedWireframe: {
|
|
canvasBackground: RED_NSCOLOR,
|
|
rects: [{
|
|
color: GREEN_NSCOLOR,
|
|
height: 20,
|
|
width: 20,
|
|
type: "background",
|
|
}, {
|
|
color: BLACK_NSCOLOR,
|
|
height: 12,
|
|
type: "text",
|
|
}]
|
|
},
|
|
}, {
|
|
// Image on top of the main background with another background
|
|
// floating in the top right.
|
|
html: `
|
|
<html>
|
|
<style>
|
|
body {
|
|
background-color: ${RED_RGB};
|
|
color: ${BLACK_RGB};
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
}
|
|
div {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: ${GREEN_RGB};
|
|
}
|
|
img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<img src="${TEST_PATH}/green.png"/>
|
|
<div>x</div>
|
|
</body>
|
|
</html>
|
|
`,
|
|
expectedWireframe: {
|
|
canvasBackground: RED_NSCOLOR,
|
|
rects: [{
|
|
color: 0,
|
|
height: 50,
|
|
width: 50,
|
|
type: "image",
|
|
}, {
|
|
color: GREEN_NSCOLOR,
|
|
height: 20,
|
|
width: 20,
|
|
type: "background",
|
|
}, {
|
|
color: BLACK_NSCOLOR,
|
|
height: 12,
|
|
type: "text",
|
|
}]
|
|
},
|
|
}, {
|
|
// Image on top of the main background with another background
|
|
// floating over the image
|
|
html: `
|
|
<html>
|
|
<style>
|
|
body {
|
|
width: 500px;
|
|
height: 500px;
|
|
background-color: ${RED_RGB};
|
|
color: ${BLACK_RGB};
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
}
|
|
div {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: ${BLUE_RGB};
|
|
}
|
|
img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
</style>
|
|
<body>
|
|
<img src="${TEST_PATH}/green.png"/>
|
|
<div>x</div>
|
|
</body>
|
|
</html>
|
|
`,
|
|
expectedWireframe: {
|
|
canvasBackground: RED_NSCOLOR,
|
|
rects: [{
|
|
color: 0,
|
|
height: 50,
|
|
width: 50,
|
|
type: "image",
|
|
}, {
|
|
color: BLUE_NSCOLOR,
|
|
height: 20,
|
|
width: 20,
|
|
type: "background",
|
|
}, {
|
|
color: BLACK_NSCOLOR,
|
|
height: 12,
|
|
type: "text",
|
|
}]
|
|
},
|
|
}, {
|
|
// Bug 1759919 - Transformed items incorrectly causing us to not keep hit
|
|
// testing stuff.
|
|
html: `
|
|
<!doctype html>
|
|
<style>:root { background-color: white; } body { margin: 0 }</style>
|
|
<div style="transform: rotate(90deg); width: 20px; height: 20px; overflow: clip;">
|
|
<div style="width: 100%; height: 100%; background-color: blue;"></div>
|
|
</div>
|
|
<div style="transform: rotate(90deg); width: 20px; height: 20px; overflow: clip;">
|
|
<div style="width: 100%; height: 100%; background-color: red;"></div>
|
|
</div>
|
|
`,
|
|
expectedWireframe: {
|
|
canvasBackground: WHITE_NSCOLOR,
|
|
rects: [{
|
|
color: RED_NSCOLOR,
|
|
height: 20,
|
|
width: 20,
|
|
x: 0,
|
|
y: 0,
|
|
type: "background",
|
|
}, {
|
|
color: BLUE_NSCOLOR,
|
|
height: 20,
|
|
width: 20,
|
|
x: 0,
|
|
y: 20,
|
|
type: "background",
|
|
}],
|
|
}
|
|
}];
|
|
|
|
/**
|
|
* Returns a Promise once page has been loaded in frame.
|
|
*
|
|
* @param {Element} frame
|
|
* The iframe to load the page in.
|
|
* @param {String} page
|
|
* The URL of the page to load in the frame.
|
|
* @returns Promise
|
|
* @resolves undefined
|
|
* Once the load event has fired for the frame.
|
|
*/
|
|
function loadInIframe(frame, page) {
|
|
return new Promise(resolve => {
|
|
frame.addEventListener("load", resolve, { once: true });
|
|
frame.src = page;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Compares a generated wireframe to an Object that contains some or all of
|
|
* the expected structure of the generated wireframe.
|
|
*
|
|
* If the wireframe doesn't contain the expected number of rects, the
|
|
* serialized structure of both the wireframe and approximateWireframe will
|
|
* be dumped to stdout.
|
|
*
|
|
* @param {Wireframe} wireframe
|
|
* A wireframe generated via document.getWireframe()
|
|
* @param {Object} approximateWireframe
|
|
* An object that closely resembles a wireframe but the rects in the
|
|
* rects property do not need to contain all of the properties expected
|
|
* in a WireframeTaggedRect. Skipped properties won't be checked.
|
|
*/
|
|
function assertApproximateWireframe(wireframe, approximateWireframe) {
|
|
is(
|
|
wireframe.canvasBackground,
|
|
approximateWireframe.canvasBackground,
|
|
"Canvas backgrounds match."
|
|
);
|
|
is(
|
|
wireframe.rects.length,
|
|
approximateWireframe.rects.length,
|
|
"Same rect count"
|
|
);
|
|
if (wireframe.rects.length != approximateWireframe.rects.length) {
|
|
dump(
|
|
"Generated wireframe: " + JSON.stringify(wireframe, null, "\t") + "\n"
|
|
);
|
|
dump(
|
|
"Expected approximate wireframe: " +
|
|
JSON.stringify(approximateWireframe, null, "\t") +
|
|
"\n"
|
|
);
|
|
}
|
|
|
|
for (let index = 0; index < approximateWireframe.length; ++index) {
|
|
let wireframeRect = wireframe.rects[index];
|
|
let approximationRect = approximateWireframe.rects[index];
|
|
for (let prop of approximationRect) {
|
|
is(
|
|
wireframeRect[prop],
|
|
approximationRect[prop],
|
|
`Property ${prop} should be equal.`
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
add_task(async () => {
|
|
const iframe = document.getElementById("iframe");
|
|
|
|
for (let testDefinition of kTests) {
|
|
let pageURL = BUILDER + encodeURIComponent(testDefinition.html);
|
|
await loadInIframe(iframe, pageURL);
|
|
let wireframe = SpecialPowers.wrap(
|
|
iframe.contentDocument
|
|
).getWireframe();
|
|
assertApproximateWireframe(wireframe, testDefinition.expectedWireframe);
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test"></pre>
|
|
<iframe id="iframe"></iframe>
|
|
</body>
|
|
</html>
|