LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html - Issue 14786002: Allow defining named grid lines on the grid element

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

Issue 14786002: Allow defining named grid lines on the grid element (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 7 years, 7 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 | Annotate | Revision Log

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

	2 <html>

	3 <head>

	4 <script>

	5 if (window.testRunner)

	6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);

	7 </script>

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

	9 <style>

	10 .gridWithFixed {

	11 -webkit-grid-columns: "first" 10px;

	12 -webkit-grid-rows: "first" 15px;

	13 }

	14 .gridWithPercent {

	15 -webkit-grid-columns: 53% "last";

	16 -webkit-grid-rows: 27% "last";

	17 }

	18 .gridWithAuto {

	19 -webkit-grid-columns: "first" auto;

	20 -webkit-grid-rows: auto "last";

	21 }

	22 .gridWithMinMax {

	23 -webkit-grid-columns: "first" minmax(10%, 15px);

	24 -webkit-grid-rows: minmax(20px, 50%) "last";

	25 }

	26 .gridWithFixedMultiple {

	27 -webkit-grid-columns: "first" "nav" 10px "last";

	28 -webkit-grid-rows: "first" "nav" 15px "last";

	29 }

	30 .gridWithPercentageSameStringMultipleTimes {

	31 -webkit-grid-columns: "first" "nav" 10% "nav" 15% "last";

	32 -webkit-grid-rows: "first" "nav2" 25% "nav2" 75% "last";

	33 }

	34 </style>

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

	36 </head>

	37 <body>

	38 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>

	39 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>

	40 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>

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

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

	43 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta geSameStringMultipleTimes"></div>

	44 <script>

	45 description('Test that setting and getting grid-columns and grid-rows works as expected');

	46

	47 function testCSSValue(gridElementId, _namedGridColumns, _namedGridRows)
	esprehn 2013/05/03 21:45:58 What's with the _ ? What's with the _ ? Julien - ping for review 2013/05/06 16:22:33 I wanted to differentiate between the argument and Show quoted text On 2013/05/03 21:45:58, esprehn wrote: > What's with the _ ? I wanted to differentiate between the argument and the global variable. It turns out that you can pass the argument as-is so the extra variables are unneeded.
	48 {

	49 this.gridElement = document.getElementById(gridElementId);

	50 this.namedGridColumns = _namedGridColumns;

	51 this.namedGridRows = _namedGridRows;

	52 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-gr id-columns')", namedGridColumns);

	53 shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-gr id-rows')", namedGridRows);

	54 }

	55

	56 debug("Test getting -webkit-grid-columns and -webkit-grid-rows set through C SS");

	57 testCSSValue("gridWithFixedElement", "'first 10px'", "'first 15px'");

	58 testCSSValue("gridWithPercentElement", "'53% last'", "'27% last'");

	59 testCSSValue("gridWithAutoElement", "'first auto'", "'auto last'");

	60 testCSSValue("gridWithMinMax", "'first minmax(10%, 15px)'", "'minmax(20px, 5 0%) last'");

	61 testCSSValue("gridWithFixedMultiple", "'nav first 10px last'", "'nav first 1 5px last'");
	Julien - ping for review 2013/05/06 16:22:33 I am not super happy with the current output of ge I am not super happy with the current output of getComputedStyle because it's super ambiguous. If you get "auto auto auto", you don't know whether it means: * "auto" auto "auto" (1 grid tracks, 2 named grid lines) * auto auto auto (3 grid tracks, no named grid line) * auto "auto" auto (2 grid tracks, 1 named grid line) I will see if I can get a better output Julien - ping for review 2013/05/06 16:58:40 It turns out that forcing a quote would require ha Show quoted text On 2013/05/06 16:22:33, Julien Chaffraix wrote: > I am not super happy with the current output of getComputedStyle because it's > super ambiguous. If you get "auto auto auto", you don't know whether it means: > * "auto" auto "auto" (1 grid tracks, 2 named grid lines) > * auto auto auto (3 grid tracks, no named grid line) > * auto "auto" auto (2 grid tracks, 1 named grid line) > > I will see if I can get a better output It turns out that forcing a quote would require hacking CSSPrimitiveValue: we currently only quote a CSS_STRING if it's not an identifier. I will follow-up with a bug about that (it's probably deeper than just grid).
	62 testCSSValue("gridWithPercentageSameStringMultipleTimes", "'nav first 10% na v 15% last'", "'first nav2 25% nav2 75% last'");

	63

	64 debug("");

	65 debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows t hrough JS");

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

	67 document.body.appendChild(element);

	68 element.style.webkitGridColumns = "'first' 18px";

	69 element.style.webkitGridRows = "66px 'last'";

	70 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first 18px'");

	71 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'66px last'");

	72

	73 element = document.createElement("div");

	74 document.body.appendChild(element);

	75 element.style.webkitGridColumns = "'first' 55%";

	76 element.style.webkitGridRows = "40% 'last'";

	77 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first 55%'");

	78 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'40% last'");

	79

	80 element = document.createElement("div");

	81 document.body.appendChild(element);

	82 element.style.webkitGridColumns = "'first' auto";

	83 element.style.webkitGridRows = "auto 'last'";

	84 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first auto'");

	85 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'auto last'");

	86

	87 element = document.createElement("div");

	88 document.body.appendChild(element);

	89 element.style.webkitGridColumns = "'first' -webkit-min-content";

	90 element.style.webkitGridRows = "-webkit-min-content 'last'";

	91 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first -webkit-min-content'");

	92 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'-webkit-min-content last'");

	93

	94 element = document.createElement("div");

	95 document.body.appendChild(element);

	96 element.style.webkitGridColumns = "'first' -webkit-max-content";

	97 element.style.webkitGridRows = "-webkit-max-content 'last'";

	98 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first -webkit-max-content'");

	99 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'-webkit-max-content last'");

	100

	101 element = document.createElement("div");

	102 document.body.appendChild(element);

	103 element.style.webkitGridColumns = "'first' minmax(55%, 45px)";

	104 element.style.webkitGridRows = "minmax(30px, 40%) 'last'";

	105 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(55%, 45px)'");

	106 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(30px, 40%) last'");

	107

	108 element = document.createElement("div");

	109 document.body.appendChild(element);

	110 element.style.font = "10px Ahem";

	111 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content) ";

	112 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";

	113 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(220px, -webkit-max-content)'");

	114 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(-webkit-max-content, 50px) last'");

	115

	116 element = document.createElement("div");

	117 document.body.appendChild(element);

	118 element.style.font = "10px Ahem";

	119 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content) ";

	120 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'";

	121 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(220px, -webkit-max-content)'");

	122 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(-webkit-max-content, 50px) last'");

	123

	124 element = document.createElement("div");

	125 document.body.appendChild(element);

	126 element.style.webkitGridColumns = "'first' minmax(-webkit-min-content, -webk it-max-content)";

	127 element.style.webkitGridRows = "minmax(-webkit-max-content, -webkit-min-cont ent) 'last'";

	128 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'first minmax(-webkit-min-content, -webkit-max-content)'");

	129 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'minmax(-webkit-max-content, -webkit-min-content) last'");

	130

	131 element = document.createElement("div");

	132 document.body.appendChild(element);

	133 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'";

	134 element.style.webkitGridRows = "'first' 'nav' minmax(-webkit-max-content, -w ebkit-min-content) 'last'";

	135 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'nav first minmax(-webkit-min-content, -webkit-max-content) last'");

	136 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'nav first minmax(-webkit-max-content, -webkit-min-content) last'");

	137

	138 element = document.createElement("div");

	139 document.body.appendChild(element);

	140 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'";

	141 element.style.webkitGridRows = "'first' 'nav2' minmax(-webkit-max-content, - webkit-min-content) 'nav2' minmax(10px, 15px) 'last'";

	142 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'nav first minmax(-webkit-min-content, -webkit-max-content) nav auto las t'");

	143 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10 px, 15px) last'");

	144

	145 element = document.createElement("div");

	146 document.body.appendChild(element);

	147 element.style.webkitGridColumns = "'foo' 'bar' auto 'foo' auto 'bar'";

	148 element.style.webkitGridRows = "'foo' 'bar' auto 'foo' auto 'bar'";

	149 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-colum ns')", "'foo bar auto foo auto bar'");

	150 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows' )", "'foo bar auto foo auto bar'");

	151 </script>

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

	153 </body>

	154 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')