зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1123851 - 2 - Tests for the element geometry highlighter; r=bgrins
This commit is contained in:
Patrick Brosset
Родитель
ed14d07a08
Коммит
b6f31b8647
|
|
@ -8,6 +8,8 @@ support-files =
|
|||
doc_inspector_gcli-inspect-command.html
|
||||
doc_inspector_highlight_after_transition.html
|
||||
doc_inspector_highlighter-comments.html
|
||||
doc_inspector_highlighter-geometry_01.html
|
||||
doc_inspector_highlighter-geometry_02.html
|
||||
doc_inspector_highlighter_csstransform.html
|
||||
doc_inspector_highlighter.html
|
||||
doc_inspector_highlighter_rect.html
|
||||
|
|
@ -40,6 +42,11 @@ skip-if = e10s # GCLI isn't e10s compatible. See bug 1128988.
|
|||
[browser_inspector_highlighter-comments.js]
|
||||
[browser_inspector_highlighter-csstransform_01.js]
|
||||
[browser_inspector_highlighter-csstransform_02.js]
|
||||
[browser_inspector_highlighter-geometry_01.js]
|
||||
[browser_inspector_highlighter-geometry_02.js]
|
||||
[browser_inspector_highlighter-geometry_03.js]
|
||||
[browser_inspector_highlighter-geometry_04.js]
|
||||
[browser_inspector_highlighter-geometry_05.js]
|
||||
[browser_inspector_highlighter-hover_01.js]
|
||||
[browser_inspector_highlighter-hover_02.js]
|
||||
[browser_inspector_highlighter-hover_03.js]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test the creation of the geometry highlighter elements.
|
||||
|
||||
const TEST_URL = "data:text/html;charset=utf-8," +
|
||||
"<span id='inline'></span>" +
|
||||
"<div id='positioned' style='background:yellow;position:absolute;left:5rem;top:30px;right:300px;bottom:10em;'></div>" +
|
||||
"<div id='sized' style='background:red;width:5em;height:50%;'></div>";
|
||||
const ID = "geometry-editor-";
|
||||
const SIDES = ["left", "right", "top", "bottom"];
|
||||
const SIZES = ["width", "height"];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield hasArrowsAndLabels(highlighter, inspector);
|
||||
yield isHiddenForNonPositionedNonSizedElement(highlighter, inspector);
|
||||
yield sideArrowsAreDisplayedForPositionedNode(highlighter, inspector);
|
||||
yield sizeLabelIsDisplayedForSizedNode(highlighter, inspector);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* hasArrowsAndLabels(highlighterFront, inspector) {
|
||||
info("Checking that the highlighter has the expected arrows and labels");
|
||||
|
||||
for (let name of [...SIDES]) {
|
||||
let value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "class");
|
||||
is(value, ID + "arrow " + name, "The " + name + " arrow exists");
|
||||
|
||||
value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-text-" + name, "class");
|
||||
is(value, ID + "label-text", "The " + name + " label exists");
|
||||
}
|
||||
|
||||
let value = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-text-size", "class");
|
||||
is(value, ID + "label-text", "The size label exists");
|
||||
}
|
||||
|
||||
function* isHiddenForNonPositionedNonSizedElement(highlighterFront, inspector) {
|
||||
info("Asking to show the highlighter on an inline, non positioned element");
|
||||
|
||||
let node = yield getNodeFront("#inline", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
for (let name of [...SIDES]) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
is(hidden, "true", "The " + name + " arrow is hidden");
|
||||
}
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
is(hidden, "true", "The size label is hidden");
|
||||
}
|
||||
|
||||
function* sideArrowsAreDisplayedForPositionedNode(highlighterFront, inspector) {
|
||||
info("Asking to show the highlighter on the positioned node");
|
||||
|
||||
let node = yield getNodeFront("#positioned", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
for (let name of SIDES) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
ok(!hidden, "The " + name + " arrow is visible for the positioned node");
|
||||
}
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
is(hidden, "true", "The size label is hidden");
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighterFront.hide();
|
||||
}
|
||||
|
||||
function* sizeLabelIsDisplayedForSizedNode(highlighterFront, inspector) {
|
||||
info("Asking to show the highlighter on the sized node");
|
||||
|
||||
let node = yield getNodeFront("#sized", inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
ok(!hidden, "The size label is visible");
|
||||
|
||||
for (let name of SIDES) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
is(hidden, "true", "The " + name + " arrow is hidden for the sized node");
|
||||
}
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighterFront.hide();
|
||||
}
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the geometry highlighter labels are correct.
|
||||
|
||||
const TEST_URL = "data:text/html;charset=utf-8," +
|
||||
"<div id='positioned' style='background:yellow;position:absolute;left:5rem;top:30px;right:300px;bottom:10em;'></div>" +
|
||||
"<div id='positioned2' style='background:blue;position:absolute;right:10%;top:5vmin;'>test element</div>" +
|
||||
"<div id='relative' style='background:green;position:relative;top:10px;left:20px;bottom:30px;right:40px;width:100px;height:100px;'></div>" +
|
||||
"<div id='relative2' style='background:grey;position:relative;top:0;bottom:-50px;height:3em;'>relative</div>" +
|
||||
"<div id='sized' style='background:red;width:5em;height:50%;'></div>" +
|
||||
"<div id='sized2' style='background:orange;width:40px;position:absolute;right:0;bottom:0'>wow</div>";
|
||||
const ID = "geometry-editor-";
|
||||
|
||||
const POSITIONED_ELEMENT_TESTS = [{
|
||||
selector: "#positioned",
|
||||
expectedLabels: [
|
||||
{side: "left", visible: true, label: "5rem"},
|
||||
{side: "top", visible: true, label: "30px"},
|
||||
{side: "right", visible: true, label: "300px"},
|
||||
{side: "bottom", visible: true, label: "10em"}
|
||||
]
|
||||
}, {
|
||||
selector: "#positioned2",
|
||||
expectedLabels: [
|
||||
{side: "left", visible: false},
|
||||
{side: "top", visible: true, label: "5vmin"},
|
||||
{side: "right", visible: true, label: "10%"},
|
||||
{side: "bottom", visible: false}
|
||||
]
|
||||
}, {
|
||||
selector: "#sized",
|
||||
expectedLabels: [
|
||||
{side: "left", visible: false},
|
||||
{side: "top", visible: false},
|
||||
{side: "right", visible: false},
|
||||
{side: "bottom", visible: false}
|
||||
]
|
||||
}, {
|
||||
selector: "#relative",
|
||||
expectedLabels: [
|
||||
{side: "left", visible: true, label: "20px"},
|
||||
{side: "top", visible: true, label: "10px"},
|
||||
{side: "right", visible: false},
|
||||
{side: "bottom", visible: false}
|
||||
]
|
||||
}, {
|
||||
selector: "#relative2",
|
||||
expectedLabels: [
|
||||
{side: "left", visible: false},
|
||||
{side: "top", visible: true, label: "0px"},
|
||||
{side: "right", visible: false},
|
||||
{side: "bottom", visible: false}
|
||||
]
|
||||
}];
|
||||
|
||||
const SIZED_ELEMENT_TESTS = [{
|
||||
selector: "#positioned",
|
||||
visible: false
|
||||
}, {
|
||||
selector: "#sized",
|
||||
visible: true,
|
||||
expected: "\u2194 5em \u2195 50%"
|
||||
}, {
|
||||
selector: "#relative",
|
||||
visible: true,
|
||||
expected: "\u2194 100px \u2195 100px"
|
||||
}, {
|
||||
selector: "#relative2",
|
||||
visible: true,
|
||||
expected: "\u2195 3em"
|
||||
}, {
|
||||
selector: "#sized2",
|
||||
visible: true,
|
||||
expected: "\u2194 40px"
|
||||
}];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield positionLabelsAreCorrect(highlighter, inspector);
|
||||
yield sizeLabelIsCorrect(highlighter, inspector);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* positionLabelsAreCorrect(highlighterFront, inspector) {
|
||||
info("Highlight nodes and check position labels");
|
||||
|
||||
for (let {selector, expectedLabels} of POSITIONED_ELEMENT_TESTS) {
|
||||
info("Testing node " + selector);
|
||||
let node = yield getNodeFront(selector, inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
for (let {side, visible, label} of expectedLabels) {
|
||||
let id = ID + "label-" + side;
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront, id, "hidden");
|
||||
if (visible) {
|
||||
ok(!hidden, "The " + side + " label is visible");
|
||||
|
||||
let value = yield getHighlighterNodeTextContent(highlighterFront, id);
|
||||
is(value, label, "The " + side + " label textcontent is correct");
|
||||
} else {
|
||||
is(hidden, "true", "The " + side + " label is hidden");
|
||||
}
|
||||
}
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighterFront.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function* sizeLabelIsCorrect(highlighterFront, inspector) {
|
||||
info("Highlight nodes and check size labels");
|
||||
|
||||
let id = ID + "label-size";
|
||||
for (let {selector, visible, expected} of SIZED_ELEMENT_TESTS) {
|
||||
info("Testing node " + selector);
|
||||
let node = yield getNodeFront(selector, inspector);
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront, id, "hidden");
|
||||
if (!visible) {
|
||||
is(hidden, "true", "The size label is hidden");
|
||||
} else {
|
||||
ok(!hidden, "The size label is visible");
|
||||
|
||||
let label = yield getHighlighterNodeTextContent(highlighterFront, id);
|
||||
is(label, expected, "The size label textcontent is correct");
|
||||
}
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighterFront.hide();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the right arrows/labels are shown even when the css properties are
|
||||
// in several different css rules.
|
||||
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
|
||||
const ID = "geometry-editor-";
|
||||
const PROPS = ["left", "right", "top", "bottom"];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield checkArrowsLabels("#node1", ["size"],
|
||||
highlighter, inspector);
|
||||
|
||||
yield checkArrowsLabels("#node2", ["top", "left", "bottom", "right"],
|
||||
highlighter, inspector);
|
||||
|
||||
yield checkArrowsLabels("#node3", ["top", "left", "size"],
|
||||
highlighter, inspector);
|
||||
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* checkArrowsLabels(selector, expectedProperties, highlighterFront, inspector) {
|
||||
info("Getting node " + selector + " from the page");
|
||||
let node = yield getNodeFront(selector, inspector);
|
||||
|
||||
info("Highlighting the node");
|
||||
yield highlighterFront.show(node);
|
||||
|
||||
for (let name of expectedProperties) {
|
||||
let hidden;
|
||||
if (name === "size") {
|
||||
hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "label-size", "hidden");
|
||||
} else {
|
||||
hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
}
|
||||
ok(!hidden, "The " + name + " arrow/label is visible for node " + selector);
|
||||
}
|
||||
|
||||
// Testing that the other arrows are hidden
|
||||
for (let name of PROPS) {
|
||||
if (expectedProperties.indexOf(name) !== -1) {
|
||||
continue;
|
||||
}
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighterFront,
|
||||
ID + "arrow-" + name, "hidden");
|
||||
is(hidden, "true", "The " + name + " arrow is hidden for node " + selector);
|
||||
}
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighterFront.hide();
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the arrows are positioned correctly and have the right size.
|
||||
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
|
||||
const ID = "geometry-editor-";
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
yield checkArrows(highlighter, inspector, ".absolute-all-4", {
|
||||
"top": {x1: 506, y1: 51, x2: 506, y2: 61},
|
||||
"bottom": {x1: 506, y1: 451, x2: 506, y2: 251},
|
||||
"left": {x1: 401, y1: 156, x2: 411, y2: 156},
|
||||
"right": {x1: 901, y1: 156, x2: 601, y2: 156}
|
||||
});
|
||||
|
||||
yield checkArrows(highlighter, inspector, ".relative", {
|
||||
"top": {x1: 901, y1: 51, x2: 901, y2: 91},
|
||||
"left": {x1: 401, y1: 97, x2: 651, y2: 97}
|
||||
});
|
||||
|
||||
yield checkArrows(highlighter, inspector, ".fixed", {
|
||||
"top": {x1: 25, y1: 0, x2: 25, y2: 400},
|
||||
"left": {x1: 0, y1: 425, x2: 0, y2: 425}
|
||||
});
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighter.hide();
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* checkArrows(highlighter, inspector, selector, arrows) {
|
||||
info("Highlighting the test node " + selector);
|
||||
let node = yield getNodeFront(selector, inspector);
|
||||
yield highlighter.show(node);
|
||||
|
||||
for (let side in arrows) {
|
||||
yield checkArrow(highlighter, side, arrows[side]);
|
||||
}
|
||||
}
|
||||
|
||||
function* checkArrow(highlighter, name, expectedCoordinates) {
|
||||
for (let coordinate in expectedCoordinates) {
|
||||
let value = yield getHighlighterNodeAttribute(highlighter, ID + "arrow-" + name, coordinate);
|
||||
is(Math.floor(value), expectedCoordinates[coordinate],
|
||||
coordinate + " coordinate for arrow " + name + " is correct");
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test that the arrows and offsetparent and currentnode elements of the
|
||||
// geometry highlighter only appear when needed.
|
||||
|
||||
const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter-geometry_02.html";
|
||||
const ID = "geometry-editor-";
|
||||
|
||||
const TEST_DATA = [{
|
||||
selector: "body",
|
||||
isOffsetParentVisible: false,
|
||||
isCurrentNodeVisible: false,
|
||||
hasVisibleArrows: false,
|
||||
isSizeVisible: false
|
||||
}, {
|
||||
selector: "h1",
|
||||
isOffsetParentVisible: false,
|
||||
isCurrentNodeVisible: false,
|
||||
hasVisibleArrows: false,
|
||||
isSizeVisible: false
|
||||
}, {
|
||||
selector: ".absolute",
|
||||
isOffsetParentVisible: false,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: true,
|
||||
isSizeVisible: false
|
||||
}, {
|
||||
selector: "#absolute-container",
|
||||
isOffsetParentVisible: false,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: false,
|
||||
isSizeVisible: true
|
||||
}, {
|
||||
selector: ".absolute-bottom-right",
|
||||
isOffsetParentVisible: true,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: true,
|
||||
isSizeVisible: false
|
||||
}, {
|
||||
selector: ".absolute-width-margin",
|
||||
isOffsetParentVisible: true,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: true,
|
||||
isSizeVisible: true
|
||||
}, {
|
||||
selector: ".absolute-all-4",
|
||||
isOffsetParentVisible: true,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: true,
|
||||
isSizeVisible: false
|
||||
}, {
|
||||
selector: ".relative",
|
||||
isOffsetParentVisible: true,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: true,
|
||||
isSizeVisible: false
|
||||
}, {
|
||||
selector: ".static",
|
||||
isOffsetParentVisible: false,
|
||||
isCurrentNodeVisible: false,
|
||||
hasVisibleArrows: false,
|
||||
isSizeVisible: false
|
||||
}, {
|
||||
selector: ".static-size",
|
||||
isOffsetParentVisible: false,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: false,
|
||||
isSizeVisible: true
|
||||
}, {
|
||||
selector: ".fixed",
|
||||
isOffsetParentVisible: false,
|
||||
isCurrentNodeVisible: true,
|
||||
hasVisibleArrows: true,
|
||||
isSizeVisible: false
|
||||
}];
|
||||
|
||||
add_task(function*() {
|
||||
let {inspector, toolbox} = yield openInspectorForURL(TEST_URL);
|
||||
let front = inspector.inspector;
|
||||
|
||||
let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
|
||||
|
||||
for (let data of TEST_DATA) {
|
||||
yield testNode(inspector, highlighter, data);
|
||||
}
|
||||
|
||||
info("Hiding the highlighter");
|
||||
yield highlighter.hide();
|
||||
yield highlighter.finalize();
|
||||
});
|
||||
|
||||
function* testNode(inspector, highlighter, data) {
|
||||
info("Highlighting the test node " + data.selector);
|
||||
let node = yield getNodeFront(data.selector, inspector);
|
||||
yield highlighter.show(node);
|
||||
|
||||
is((yield isOffsetParentVisible(highlighter)), data.isOffsetParentVisible,
|
||||
"The offset-parent highlighter visibility is correct for node " + data.selector);
|
||||
is((yield isCurrentNodeVisible(highlighter)), data.isCurrentNodeVisible,
|
||||
"The current-node highlighter visibility is correct for node " + data.selector);
|
||||
is((yield hasVisibleArrows(highlighter)), data.hasVisibleArrows,
|
||||
"The arrows visibility is correct for node " + data.selector);
|
||||
is((yield isSizeVisible(highlighter)), data.isSizeVisible,
|
||||
"The size label visibility is correct for node " + data.selector);
|
||||
}
|
||||
|
||||
function* isOffsetParentVisible(highlighter) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "offset-parent", "hidden");
|
||||
return !hidden;
|
||||
}
|
||||
|
||||
function* isCurrentNodeVisible(highlighter) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "current-node", "hidden");
|
||||
return !hidden;
|
||||
}
|
||||
|
||||
function* hasVisibleArrows(highlighter) {
|
||||
for (let side of ["top", "left", "bottom", "right"]) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "arrow-" + side, "hidden");
|
||||
if (!hidden) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function* isSizeVisible(highlighter) {
|
||||
let hidden = yield getHighlighterNodeAttribute(highlighter,
|
||||
ID + "label-size", "hidden");
|
||||
return !hidden;
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>geometry highlighter test page</title>
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.relative-sized-parent {
|
||||
position: relative;
|
||||
border: 2px solid black;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.size {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.positioned-child {
|
||||
position: absolute;
|
||||
background: #f06;
|
||||
}
|
||||
.pos-top-left {
|
||||
top: 30px;
|
||||
left: 25%;
|
||||
}
|
||||
.pos-bottom-right {
|
||||
bottom: 5em;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.inline-positioned {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
#absolute-container {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 400px;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.absolute-all-4 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
bottom: 200px;
|
||||
right: 300px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
height: 10px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 400px;
|
||||
left: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="node1" class="relative-sized-parent size">
|
||||
<div id="node2" class="positioned-child pos-top-left pos-bottom-right">
|
||||
<div id="node3" class="inline-positioned positioned-child pos-top-left" style="width:50px;height:50px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="absolute-container">
|
||||
<div class="absolute-all-4"></div>
|
||||
<div class="relative"></div>
|
||||
</div>
|
||||
|
||||
<div class="fixed"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!doctype html><html><head><meta charset="UTF-8"></head><body class="header">
|
||||
|
||||
<style>
|
||||
.fixed { position: fixed; top: 40px; right: 20px; margin-top: 20px; background: #ccf; }
|
||||
.fixed-bottom-right { position: fixed; bottom: 4em; right: 25%; margin: 20px; background: #ccf; }
|
||||
|
||||
#absolute-container { position: relative; height: 150px; margin: 20px; }
|
||||
.absolute { position: absolute; top: 20px; left: 400px; background: #fcc; }
|
||||
.absolute-bottom-right { position: absolute; bottom: 20px; right: 50px; background: #fcc; }
|
||||
.absolute-all-4 { position: absolute; top: 100px; bottom: 10px; left: 20px; right: 700px; background: #fcc; }
|
||||
.absolute-negative { position: absolute; bottom: -25px; background: #fcc; }
|
||||
.absolute-width-margin { position: absolute; top: 20px; right: 20px; width: 450px; margin: .3em; padding: 10px; border: 2px solid red; box-sizing: border-box; background: #fcc; }
|
||||
|
||||
.relative { position: relative; top: 10px; left: 10px; background: #cfc;}
|
||||
.relative-inline { position: relative; top: 10px; left: 10px; display: inline; background: #cfc;}
|
||||
|
||||
.static { position: static; top: 10px; left: 10px; background: #fcf; }
|
||||
.static-size { position: static; top: 10px; left: 10px; width: 300px; height: 100px; background: #fcf; }
|
||||
|
||||
#sticky-container {
|
||||
margin: 50px;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
padding: 40px;
|
||||
overflow: scroll;
|
||||
}
|
||||
#sticky-container dl {
|
||||
margin: 0;
|
||||
padding: 24px 0 0 0;
|
||||
}
|
||||
|
||||
#sticky-container dt {
|
||||
background: #ffc;
|
||||
border-bottom: 1px solid #989EA4;
|
||||
border-top: 1px solid #717D85;
|
||||
color: #FFF;
|
||||
font: bold 18px/21px Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 2px 0 0 12px;
|
||||
position: sticky;
|
||||
width: 99%;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
#sticky-container dd {
|
||||
font: bold 20px/45px Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0 0 0 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#sticky-container dd + dd {
|
||||
border-top: 1px solid #CCC
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Positioning playground</h1>
|
||||
<p>A demo of various positioning schemes: <a href="http://dev.w3.org/csswg/css-position/#pos-sch">http://dev.w3.org/csswg/css-position/#pos-sch</a>.</p>
|
||||
<p>absolute, static, fixed, relative, sticky</p>
|
||||
|
||||
<h2>Absolute positioning</h2>
|
||||
<div class="absolute">
|
||||
Absolute child with no relative parent
|
||||
</div>
|
||||
<div id="absolute-container">
|
||||
<div class="absolute">
|
||||
Absolute child with a relative parent
|
||||
</div>
|
||||
<div class="absolute-bottom-right">
|
||||
Absolute child with a relative parent, positioned from the bottom right
|
||||
</div>
|
||||
<div class="absolute-all-4">
|
||||
Absolute child with a relative parent, with all 4 positions
|
||||
</div>
|
||||
<div class="absolute-negative">
|
||||
Absolute child with a relative parent, with negative positions
|
||||
</div>
|
||||
<div class="absolute-width-margin">
|
||||
Absolute child with a relative parent, size, margin
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Relative positioning</h2>
|
||||
<div id="relative-container">
|
||||
<div class="relative">
|
||||
Relative child
|
||||
</div>
|
||||
<div style="width: 100px;">
|
||||
<div class="relative-inline">
|
||||
Relative inline child, across multiple lines
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:relative;">
|
||||
<div class="relative">
|
||||
Relative child, in a positioned parent
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Fixed positioning</h2>
|
||||
<div id="fixed-container">
|
||||
<div class="fixed">
|
||||
Fixed child
|
||||
</div>
|
||||
<div class="fixed-bottom-right">
|
||||
Fixed child, bottom right
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Static positioning</h2>
|
||||
<div id="static-container">
|
||||
<div class="static">
|
||||
Static child with no width/height
|
||||
</div>
|
||||
<div class="static-size">
|
||||
Static child with width/height
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Загрузка…
Ссылка в новой задаче