Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-30 16:22:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1648774 Part 2: Add a test that display:flex elements generate computed flex info. r=dholbert

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D84627
This commit is contained in:
Brad Werth 2020-07-23 20:48:04 +00:00
parent b38e6bdb3f
commit 26175c43c6
2 changed files with 133 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dom/flex/test/chrome.ini
View File

@ -3,4 +3,5 @@
[chrome/test_flex_item_rect.html]
[chrome/test_flex_items.html]
[chrome/test_flex_lines.html]
[chrome/test_flex_object.html]
[chrome/test_flex_parent.html]

132
dom/flex/test/chrome/test_flex_object.html Normal file
View File

@ -0,0 +1,132 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<style>
body {
margin: 40px;
}
.flexWrapper {
display: flex;
width: 400px;
}
.nonFlexWrapper {
display: block;
width: 400px;
}
.oh {
overflow: hidden;
}
.box {
background-color: #444;
color: #fff;
}
</style>
<script>
"use strict";
SimpleTest.waitForExplicitFinish();
function runTests() {
// Test 1: elements styled with display:flex
let idsWithFlex = [
"flexDiv",
"flexDivOh",
"flexFieldset",
"flexFieldsetEmpty",
"flexFieldsetOh",
"flexButton",
"flexButtonOh",
];
for (let id of idsWithFlex) {
let wrapper = document.getElementById(id);
// Test that we got a flex info object from the element.
let flex = wrapper.getAsFlexContainer();
ok(flex, `Expected that element id ${id} would have flex info.`);
}
// Test 2: elements styled without display:flex
let idsWithoutFlex = [
"boxA",
"nonFlexFieldset",
"nonFlexFieldsetOh",
"nonFlexButton",
"nonFlexButtonOh",
];
for (let id of idsWithoutFlex) {
let wrapper = document.getElementById(id);
// Test that we didn't get a flex info object from the element.
let flex = wrapper.getAsFlexContainer();
ok(!flex, `Expected that element id ${id} would not have flex info.`);
}
SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">
<div id="flexDiv" class="flexWrapper">
<div id="boxA" class="box">A</div>
</div>
<div id="flexDivOh" class="flexWrapper oh">
<div id="boxAOh" class="box">A</div>
</div>
<fieldset id="flexFieldset" class="flexWrapper">
<legend>a fieldset</legend>
<label for="name">name</label>
<input id="name">
</fieldset>
<fieldset id="flexFieldsetEmpty" class="flexWrapper">
</fieldset>
<fieldset id="flexFieldsetOh" class="flexWrapper oh">
<legend>a fieldset</legend>
<label for="nameOh">name</label>
<input id="nameOh">
</fieldset>
<button id="flexButton" class="flexWrapper">
<span>test</span>
</button>
<button id="flexButtonOh" class="flexWrapper oh">
<span>test</span>
</button>
<fieldset id="nonFlexFieldset" class="nonFlexWrapper">
<legend>a fieldset</legend>
<label for="name">name</label>
<input id="name">
</fieldset>
<fieldset id="nonFlexFieldsetOh" class="nonFlexWrapper oh">
<legend>a fieldset</legend>
<label for="name">name</label>
<input id="name">
</fieldset>
<button id="nonFlexButton" class="nonFlexWrapper">
<span>test</span>
</button>
<button id="nonFlexButtonOh" class="nonFlexWrapper oh">
<span>test</span>
</button>
</body>
</html>