Skip to content
This repository has been archived by the owner on Dec 18, 2018. It is now read-only.

Commit

Permalink
Fix tests following Gérard Talbot review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrego
mrego committed Nov 10, 2014
1 parent 93504e0 commit 57cbd02
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 34 deletions.
17 changes: 8 additions & 9 deletions css-grid-1/grid-model/display-grid.xht → ...id-1/grid-model/grid-display-grid-001.xht
View file
@@ -1,13 +1,12 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS Grid Layout: 'grid' value for 'display' property</title>
<title>CSS Grid Layout Test: 'grid' value for 'display' property</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="This test checks that 'grid' value for 'display' property generates a block level containing box." />
<style>
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
Expand All @@ -16,19 +15,19 @@
z-index: -1;
}

.grid-overlapping-green {
.test-grid-overlapping-green {
display: grid;
background-color: green;
width: 100px;
height: 50px;
}
</style>
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div class="grid-overlapping-green"></div>
<div class="grid-overlapping-green"></div>
<div class="test-grid-overlapping-green"></div>
<div class="test-grid-overlapping-green"></div>
</body>
</html>
</html>
15 changes: 7 additions & 8 deletions ...grid-1/grid-model/display-inline-grid.xht → ...id-model/grid-display-inline-grid-002.xht
View file
@@ -1,13 +1,12 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS Grid Layout: 'inline-grid' value for 'display' property</title>
<title>CSS Grid Layout Test: 'inline-grid' value for 'display' property</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="This test checks that 'inline-grid' value for 'display' property generates an inline level containing box." />
<style>
<style type="text/css"><![CDATA[
#reference-overlapped-red {
position: absolute;
background-color: red;
Expand All @@ -16,18 +15,18 @@
z-index: -1;
}

.inline-grid-overlapping-green {
.test-inline-grid-overlapping-green {
display: inline-grid;
background-color: green;
width: 50px;
height: 100px;
}
</style>
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<div id="reference-overlapped-red"></div>
<div class="inline-grid-overlapping-green"></div><div class="inline-grid-overlapping-green"></div>
<div class="test-inline-grid-overlapping-green"></div><div class="test-inline-grid-overlapping-green"></div>
</body>
</html>
</html>
33 changes: 16 additions & 17 deletions ...rid-model/parsing-display-grid-inline.xht → ...1/grid-model/grid-parsing-display-001.xht
View file
@@ -1,23 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>CSS Grid Layout: Parsing 'grid' and 'inline-grid' 'display' values</title>
<title>CSS Grid Layout Test: Parsing 'grid' and 'inline-grid' 'display' values</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" />
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers" />
<meta name="flags" content="dom" />
<meta name="assert" content="This test checks that 'grid' and 'inline-grid' values for 'display' property are parsed correctly. It tests that they work as expected from style attribute, CSS and JavaScrit." />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
<script src="/resources/testharness.js" type="text/javascript"></script>
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
<style type="text/css"><![CDATA[
.grid {
display: grid;
}

.inline-grid {
display: inline-grid;
}
</style>
]]></style>
</head>
<body>
<div id="log"></div>
Expand All @@ -31,50 +30,50 @@
<div id="js-grid"></div>
<div id="js-inline-grid"></div>

<script>
<script type="text/javascript"><![CDATA[
function testStyleDisplay(element, value) {
assert_equals(element.style.display, value, "Style display should be '" + value + "'");
}

function testComptuedStyleDisplay(element, value) {
function testComputedStyleDisplay(element, value) {
assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
}

var styleGrid = document.getElementById("style-grid");
test(function() {
testStyleDisplay(styleGrid, "grid");
testComptuedStyleDisplay(styleGrid, "grid");
testComputedStyleDisplay(styleGrid, "grid");
}, "Test style display 'grid'");

var styleInlineGrid = document.getElementById("style-inline-grid");
test(function() {
testStyleDisplay(styleInlineGrid, "inline-grid");
testComptuedStyleDisplay(styleInlineGrid, "inline-grid");
testComputedStyleDisplay(styleInlineGrid, "inline-grid");
}, "Test style display 'inline-grid'");

var cssGrid = document.getElementById("css-grid");
test(function() {
testComptuedStyleDisplay(cssGrid, "grid");
testComputedStyleDisplay(cssGrid, "grid");
}, "Test CSS display 'grid'");

var cssInlineGrid = document.getElementById("css-inline-grid");
test(function() {
testComptuedStyleDisplay(cssInlineGrid, "inline-grid");
testComputedStyleDisplay(cssInlineGrid, "inline-grid");
}, "Test CSS display 'inline-grid'");

var jsGrid = document.getElementById("js-grid");
jsGrid.style.display = "grid";
test(function() {
testStyleDisplay(jsGrid, "grid");
testComptuedStyleDisplay(jsGrid, "grid");
testComputedStyleDisplay(jsGrid, "grid");
}, "Test JavaScript display 'grid'");

var jsInlineGrid = document.getElementById("js-inline-grid");
jsInlineGrid.style.display = "inline-grid";
test(function() {
testStyleDisplay(jsInlineGrid, "inline-grid");
testComptuedStyleDisplay(jsInlineGrid, "inline-grid");
testComputedStyleDisplay(jsInlineGrid, "inline-grid");
}, "Test JavaScript display 'inline-grid'");
</script>
]]></script>
</body>
</html>
</html>

0 comments on commit 57cbd02

Please sign in to comment.