khronosschoty
/
palemoon-dev


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" 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;
}
.wrapper {
	display: grid;
	width: 600px;
	grid-gap: 0px;
	background-color: #f00;
}
.grid1 {
	grid-template-columns: 50px 0px repeat(auto-fit, 100px);
}
.grid2 {
	grid-template-columns: 50px 0px [real-before] repeat(auto-fit, [before] 100px [after]) [real-after] 0px [final];
}
.grid3 {
	grid-template-columns: repeat(3, 66px) [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
}
.grid4 {
	grid-template-columns: repeat(2, 100px) repeat(auto-fill, 50px);
}
.grid5 {
	grid-template-columns: [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
}
.grid6 {
	grid-template-columns: [first] 0px [real-before] repeat(auto-fit, [before] 100px [after]) [real-after];
}
.grid7 {
	grid-template-columns: [real-before] repeat(auto-fit, [before] 100px [after]) [real-after] 0px [final];
}
.grid8 {
	grid-template-columns: [real-before] repeat(auto-fit, [before] 1000px [after]) [real-after];
}
.grid9 {
	grid-template-columns: [real-before] repeat(auto-fit, 100px [after]) [real-after];
}
.grid10 {
	grid-template-columns: [real-before] repeat(auto-fit, [before] 100px) [real-after];
}
.box {
	background-color: #444;
	color: #fff;
}
.a {
	grid-column: auto;
}
.b {
	grid-column: 4;
}
.c {
	grid-column: 6;
}
.d {
	grid-column: 7;
}
.e {
	grid-column: 5;
}

</style>

<script>
'use strict';

SimpleTest.waitForExplicitFinish();

function testLines(elementName, grid, expectedValues) {
	for (let i = 0; i < grid.cols.lines.length; i++) {
		is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number.");
		is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start.");
		is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth.");
		is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names.");
	}
}

function runTests() {
	let wrapper = document.getElementById("wrapper1");
	let grid = wrapper.getGridFragments()[0];

	// test auto-fit count
	is(grid.cols.tracks.length, 7, "Grid column track array reports removed auto-fit columns.");

	// test resolved value of grid-template-columns
	let templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
	is(templateColumnsText, "50px 0px 0px 100px 0px 0px 0px",
		"Resolved value of grid-template-columns reports removed auto-fits as '0px'.");

	// test starts, breadths, and states
	let expectedValues = [
		{ "start": 0,
		  "breadth": 50,
		  "state": "static" },
		{ "start": 50,
		  "breadth": 0,
		  "state": "static" },
		{ "start": 50,
		  "breadth": 0,
		  "state": "removed" },
		{ "start": 50,
		  "breadth": 100,
		  "state": "repeat" },
		{ "start": 150,
		  "breadth": 0,
		  "state": "removed" },
		{ "start": 150,
		  "breadth": 0,
		  "state": "removed" },
		{ "start": 150,
		  "breadth": 0,
		  "state": "removed" },
	];
	for (let i = 0; i < grid.cols.tracks.length; i++) {
		is(grid.cols.tracks[i].start, expectedValues[i].start, "Column " + (i + 1) + " has expected start.");
		is(grid.cols.tracks[i].breadth, expectedValues[i].breadth, "Column " + (i + 1) + " has expected breadth.");
		is(grid.cols.tracks[i].state, expectedValues[i].state, "Column " + (i + 1) + " has expected state.");
	}


	wrapper = document.getElementById("wrapper2");
	grid = wrapper.getGridFragments()[0];

	// test auto-fit count
	is(grid.cols.lines.length, 9, "Grid column line array reports removed auto-fit columns.");

	// test resolved value of grid-template-columns
	templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
	is(templateColumnsText, "50px 0px [real-before before] 0px [after before] 100px [after before] 0px [after before] 100px [after before] 0px [after real-after] 0px [final]",
		"Resolved value of grid-template-columns reports lines for removed tracks.");

	// test starts and names
	expectedValues = [
		{ "start": 0,
		  "names": "" },
		{ "start": 50,
		  "names": "" },
		{ "start": 50,
		  "names": "real-before,before" },
		{ "start": 50,
		  "names": "after,before" },
		{ "start": 150,
		  "names": "after,before" },
		{ "start": 150,
		  "names": "after,before" },
		{ "start": 250,
		  "names": "after,before" },
		{ "start": 250,
		  "names": "after,real-after" },
		{ "start": 250,
		  "names": "final" },
	];
	testLines("wrapper2", grid, expectedValues);


	wrapper = document.getElementById("wrapper3");
	grid = wrapper.getGridFragments()[0];

	// test resolved value of grid-template-columns
	templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
	is(templateColumnsText, "66px 66px 66px [real-before before] 100px [after before] 0px [after before] 100px [after before] 100px [after real-after]",
		"Resolved value of grid-template-columns reports lines for removed tracks.");


	wrapper = document.getElementById("wrapper4");
	grid = wrapper.getGridFragments()[0];

	// test auto-fill count of tracks
	is(grid.cols.tracks.length, 10, "Grid column track array respects auto-fill columns.");

	if (grid.cols.tracks.length == 10) {
		// test for static and repeat
		is(grid.cols.tracks[1].state, "static", "Grid column track 2 is marked as static.");
		is(grid.cols.tracks[2].state, "repeat", "Grid column track 3 is marked as repeat.");
	}


	wrapper = document.getElementById("wrapper5");
	grid = wrapper.getGridFragments()[0];

	// test resolved value of grid-template-columns
	templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns;
	is(templateColumnsText, "[real-before before] 0px [after before] 0px [after before] 0px [after before] 0px [after before] 0px [after before] 0px [after real-after]", "Resolved value of grid-template-columns no longer lists 'none' when all auto-fit tracks are empty.");


	wrapper = document.getElementById("wrapper6");
	grid = wrapper.getGridFragments()[0];

	// test starts and names
	expectedValues = [
		{ "start": 0,
		  "names": "first" },
		{ "start": 0,
		  "names": "real-before,before" },
		{ "start": 0,
		  "names": "after,before" },
		{ "start": 0,
		  "names": "after,before" },
		{ "start": 100,
		  "names": "after,before" },
		{ "start": 100,
		  "names": "after,before" },
		{ "start": 100,
		  "names": "after,before" },
		{ "start": 100,
		  "names": "after,real-after" },
	];
	testLines("wrapper6", grid, expectedValues);


	wrapper = document.getElementById("wrapper7");
	grid = wrapper.getGridFragments()[0];

	// test starts and names
	expectedValues = [
		{ "start": 0,
		  "names": "real-before,before" },
		{ "start": 0,
		  "names": "after,before" },
		{ "start": 0,
		  "names": "after,before" },
		{ "start": 0,
		  "names": "after,before" },
		{ "start": 100,
		  "names": "after,before" },
		{ "start": 100,
		  "names": "after,before" },
		{ "start": 100,
		  "names": "after,real-after" },
		{ "start": 100,
		  "names": "final" },
	];
	testLines("wrapper7", grid, expectedValues);


	wrapper = document.getElementById("wrapper8");
	grid = wrapper.getGridFragments()[0];

	// test starts and names
	expectedValues = [
		{ "start": 0,
		  "names": "real-before,before" },
		{ "start": 0,
		  "names": "after,real-after" },
	];
	testLines("wrapper8", grid, expectedValues);


	wrapper = document.getElementById("wrapper9");
	grid = wrapper.getGridFragments()[0];

	// test starts and names
	expectedValues = [
		{ "start": 0,
		  "names": "real-before" },
		{ "start": 0,
		  "names": "after" },
		{ "start": 0,
		  "names": "after" },
		{ "start": 0,
		  "names": "after" },
		{ "start": 100,
		  "names": "after" },
		{ "start": 200,
		  "names": "after" },
		{ "start": 200,
		  "names": "after,real-after" },
	];
	testLines("wrapper9", grid, expectedValues);


	wrapper = document.getElementById("wrapper10");
	grid = wrapper.getGridFragments()[0];

	// test starts and names
	expectedValues = [
		{ "start": 0,
		  "names": "real-before,before" },
		{ "start": 0,
		  "names": "before" },
		{ "start": 0,
		  "names": "before" },
		{ "start": 0,
		  "names": "before" },
		{ "start": 100,
		  "names": "before" },
		{ "start": 200,
		  "names": "before" },
		{ "start": 200,
		  "names": "real-after" },
	];
	testLines("wrapper10", grid, expectedValues);

	SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">

	<div id="wrapper1" class="wrapper grid1">
		<div id="boxB" class="box b">B</div>
	</div>

	<br/>
	<div id="wrapper2" class="wrapper grid2">
		<div id="boxB" class="box b">B</div>
		<div id="boxC" class="box c">C</div>
	</div>

	<br/>
	<div id="wrapper3" class="wrapper grid3">
		<div id="boxB" class="box b">B</div>
		<div id="boxC" class="box c">C</div>
		<div id="boxD" class="box d">D</div>
	</div>

	<br/>
	<div id="wrapper4" class="wrapper grid4">
		<div id="boxA" class="box a">A</div>
	</div>

	<br/>
	<div id="wrapper5" class="wrapper grid5">
	</div>

	<br/>
	<div id="wrapper6" class="wrapper grid6">
		<div id="boxB" class="box b">B</div>
	</div>

	<br/>
	<div id="wrapper7" class="wrapper grid7">
		<div id="boxB" class="box b">B</div>
	</div>

	<br/>
	<div id="wrapper8" class="wrapper grid8">
	</div>

	<br/>
	<div id="wrapper9" class="wrapper grid9">
		<div id="boxB" class="box b">B</div>
		<div id="boxE" class="box e">E</div>
	</div>

	<br/>
	<div id="wrapper10" class="wrapper grid10">
		<div id="boxB" class="box b">B</div>
		<div id="boxE" class="box e">E</div>
	</div>

</body>
</html>