LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html - Issue 176853007: [CSS Grid Layout] Implementation of the grid shorthand.

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html

Issue 176853007: [CSS Grid Layout] Implementation of the grid shorthand. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Fixed compilation error in debug. Created 6 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

	2 <html>

	3 <head>

	4 <link href="resources/grid.css" rel="stylesheet">

	5 <style>

	6 #gridWithNone {

	7 grid: none;

	8 }

	9 #gridWithTemplate {

	10 grid: 15px / 10px;

	11 }

	12 #gridWithAutoFlowAndColumns {

	13 grid: row 10px;

	14 }

	15 #gridWithAutoFlowNone {

	16 grid: none 10px;

	17 }

	18 #gridWithAutoFlowAndColumnsAndRows {

	19 grid: column 10px / 20px;

	20 }

	21

	22 /* Bad values. */

	23

	24 #gridWithExplicitAndImplicit {

	25 grid: 10px / 20px column;

	26 }

	27 #gridWithMisplacedNone1 {

	28 grid: column 10px / none 20px;

	29 }

	30 #gridWithMisplacedNone2 {

	31 grid: 10px / 20px none;

	32 }

	33 </style>

	34 <script src="../../resources/js-test.js"></script>

	35 </head>

	36 <body>

	37 <div class="grid" id="gridWithNone"></div>

	38 <div class="grid" id="gridWithTemplate"></div>

	39 <div class="grid" id="gridWithAutoFlowAndColumns"></div>

	40 <div class="grid" id="gridWithAutoFlowNone"></div>

	41 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>

	42 <div class="grid" id="gridWithExplicitAndImplicit"></div>

	43 <div class="grid" id="gridWithMisplacedNone1"></div>

	44 <div class="grid" id="gridWithMisplacedNone2"></div>

	45 <script src="resources/grid-shorthand-parsing-utils.js"></script>

	46 <script>

	47 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned.");

	48

	49 debug("Test getting the longhand values when shorthand is set through CSS.") ;

	50 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "none", "auto", "auto");

	51 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "none", "auto", "auto");

	52 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn s"), "none", "none", "none", "row", "10px", "10px");

	53 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "none", "10px", "10px");

	54 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn sAndRows"), "none", "none", "none", "column", "10px", "20px");

	55

	56 debug("");

	57 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')");

	58 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "none", "auto", "auto");

	59 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "none", "auto", "auto");

	60 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "none", "auto", "auto");

	61

	62 debug("");

	63 debug("Test getting and setting 'grid' shorthand through JS");

	64 testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "none" , "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");

	65 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p x", "\"a\"", "none", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", "initial", "initial");

	66 testGridDefinitionsSetJSValues("row 20px", "none", "none", "none", "row", "2 0px", "20px", "initial", "initial", "initial", "row", "20px", "20px");

	67 testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "1 0px");

	68

	69 debug("");

	70 debug("Test the initial value");

	71 var element = document.createElement("div");

	72 document.body.appendChild(element);

	73 testGridDefinitionsValues(element, "none", "none", "none", "none", "auto", " auto");

	74 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'");

	75 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");

	76 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");

	77 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'none'");

	78 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns' )", "'auto'");

	79 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");

	80

	81 debug("");

	82 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS");

	83 testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "2 0px");

	84 testGridDefinitionsSetJSValues("none", "none", "none", "none", "none", "auto ", "auto", "none", "none", "none", "initial", "initial", "initial");

	85

	86 </script>

	87 </body>

	88 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt » ('j') | no next file with comments »