LayoutTests/fast/alignment/parse-justify-content.html - Issue 636993002: [CSS Grid Layout] Upgrade justify-content parsing to CSS3 Box Alignment spec.

Side by Side Diff: LayoutTests/fast/alignment/parse-justify-content.html

Issue 636993002: [CSS Grid Layout] Upgrade justify-content parsing to CSS3 Box Alignment spec. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Using a custom CSSValue to simplify parsing and style building. Created 6 years, 1 month 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>

	2 <html>

	3 <head>

	4 <style>

	5 #justifyContentAuto {

	6 justify-content: auto;

	7 }

	8

	9 #justifyContentBaseline {

	10 justify-content: baseline;

	11 }

	12

	13 #justifyContentLastBaseline {

	14 justify-content: last-baseline;

	15 }

	16

	17 #justifyContentSpaceBetween {

	18 justify-content: space-between;

	19 }

	20

	21 #justifyContentSpaceAround {

	22 justify-content: space-around;

	23 }

	24

	25 #justifyContentSpaceEvenly {

	26 justify-content: space-evenly;

	27 }

	28

	29 #justifyContentStretch {

	30 justify-content: stretch;

	31 }

	32

	33 #justifyContentSpaceBetweenSafe {

	34 justify-content: space-between safe;

	35 }

	36

	37 #justifyContentSpaceAroundTrue {

	38 justify-content: space-around true;

	39 }

	40

	41 #justifyContentStretchTrue {

	42 justify-content: stretch true;

	43 }

	44

	45 #justifyContentStart {

	46 justify-content: start;

	47 }

	48

	49 #justifyContentEnd {

	50 justify-content: end;

	51 }

	52

	53 #justifyContentCenter {

	54 justify-content: center;

	55 }

	56

	57 #justifyContentLeft {

	58 justify-content: left;

	59 }

	60

	61 #justifyContentRight {

	62 justify-content: right;

	63 }

	64

	65 #justifyContentFlexStart {

	66 justify-content: flex-start;

	67 }

	68

	69 #justifyContentFlexEnd {

	70 justify-content: flex-end;

	71 }

	72

	73 #justifyContentEndTrue {

	74 justify-content: end true;

	75 }

	76

	77 #justifyContentCenterTrue {

	78 justify-content: center true;

	79 }

	80

	81 #justifyContentRightSafe {

	82 justify-content: right safe;

	83 }

	84

	85 #justifyContentLeftTrue {

	86 justify-content: left true;

	87 }

	88

	89 #justifyContentFlexStartTrue {

	90 justify-content: flex-start true;

	91 }

	92

	93 #justifyContentFlexEndSafe {

	94 justify-content: flex-end safe;

	95 }

	96

	97 #justifyContentSpaceBetweenLeft {

	98 justify-content: space-between left;

	99 }

	100

	101 #justifyContentSpaceAroundCenter {

	102 justify-content: space-around center;

	103 }

	104

	105 #justifyContentSpaceEvenlyRight {

	106 justify-content: space-evenly right;

	107 }

	108

	109 #justifyContentStretchStartSafe {

	110 justify-content: stretch start safe;

	111 }

	112

	113 #justifyContentSpaceAroundEndTrue {

	114 justify-content: space-around end true;

	115 }

	116

	117 #justifyContentSpaceEvenlyFlexStartSafe {

	118 justify-content: space-evenly flex-start safe;

	119 }

	120

	121 </style>

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

	123 </head>

	124 <body>

	125 <div id="justifyContentAuto"></div>

	126 <div id="justifyContentBaseline"></div>

	127 <div id="justifyContentLastBaseline"></div>

	128 <div id="justifyContentSpaceBetween"></div>

	129 <div id="justifyContentSpaceAround"></div>

	130 <div id="justifyContentSpaceEvenly"></div>

	131 <div id="justifyContentStretch"></div>

	132 <div id="justifyContentSpaceBetweenSafe"></div>

	133 <div id="justifyContentSpaceAroundTrue"></div>

	134 <div id="justifyContentStretchTrue"></div>

	135 <div id="justifyContentStretchrue"></div>

	136 <div id="justifyContentStart"></div>

	137 <div id="justifyContentEnd"></div>

	138 <div id="justifyContentCenter"></div>

	139 <div id="justifyContentLeft"></div>

	140 <div id="justifyContentRight"></div>

	141 <div id="justifyContentFlexStart"></div>

	142 <div id="justifyContentFlexEnd"></div>

	143 <div id="justifyContentEndTrue"></div>

	144 <div id="justifyContentCenterTrue"></div>

	145 <div id="justifyContentRightSafe"></div>

	146 <div id="justifyContentLeftTrue"></div>

	147 <div id="justifyContentFlexStartTrue"></div>

	148 <div id="justifyContentFlexEndSafe"></div>

	149 <div id="justifyContentSpaceBetweenLeft"></div>

	150 <div id="justifyContentSpaceAroundCenter"></div>

	151 <div id="justifyContentSpaceEvenlyRight"></div>

	152 <div id="justifyContentStretchStartSafe"></div>

	153 <div id="justifyContentSpaceAroundEndTrue"></div>

	154 <div id="justifyContentSpaceEvenlyFlexStartSafe"></div>

	155

	156 <script src="resources/alignment-parsing-utils.js"></script>

	157 <script>

	158 description('Test that setting and getting justify-content works as expected');

	159

	160 debug("Test getting justify-content set through CSS");

	161 var justifyContentAuto = document.getElementById("justifyContentAuto");

	162 shouldBe("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-con tent')", "'start'");
	Julien - ping for review 2014/10/28 17:23:04 We could use shouldBeEqualToString here, which rem We could use shouldBeEqualToString here, which removes the double quoting on the expected result. jfernandez 2014/10/29 11:03:04 Done. Show quoted text On 2014/10/28 17:23:04, Julien Chaffraix - PST wrote: > We could use shouldBeEqualToString here, which removes the double quoting on the > expected result. Done.
	163

	164 var justifyContentBaseline = document.getElementById("justifyContentBaseline");

	165 shouldBe("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify -content')", "'baseline'");

	166

	167 var justifyContentLastBaseline = document.getElementById("justifyContentLastBase line");

	168 shouldBe("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('jus tify-content')", "'last-baseline'");

	169

	170 var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBet ween");

	171 shouldBe("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('jus tify-content')", "'space-between'");

	172

	173 var justifyContentSpaceAround = document.getElementById("justifyContentSpaceArou nd");

	174 shouldBe("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('just ify-content')", "'space-around'");

	175

	176 var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEven ly");

	177 shouldBe("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('just ify-content')", "'space-evenly'");

	178

	179 var justifyContentStretch = document.getElementById("justifyContentStretch");

	180 shouldBe("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify- content')", "'stretch'");

	181

	182 var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpac eBetweenSafe");

	183 shouldBe("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue( 'justify-content')", "'space-between safe'");

	184

	185 var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpace AroundTrue");

	186 shouldBe("getComputedStyle(justifyContentSpaceAroundTrue, '').getPropertyValue(' justify-content')", "'space-around true'");

	187

	188 var justifyContentStretchTrue = document.getElementById("justifyContentStretchTr ue");

	189 shouldBe("getComputedStyle(justifyContentStretchTrue, '').getPropertyValue('just ify-content')", "'stretch true'");

	190

	191 var justifyContentStart = document.getElementById("justifyContentStart");

	192 shouldBe("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-co ntent')", "'start'");

	193

	194 var justifyContentEnd = document.getElementById("justifyContentEnd");

	195 shouldBe("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-cont ent')", "'end'");

	196

	197 var justifyContentCenter = document.getElementById("justifyContentCenter");

	198 shouldBe("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-c ontent')", "'center'");

	199

	200 var justifyContentLeft = document.getElementById("justifyContentLeft");

	201 shouldBe("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-con tent')", "'left'");

	202

	203 var justifyContentRight = document.getElementById("justifyContentRight");

	204 shouldBe("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-co ntent')", "'right'");

	205

	206 var justifyContentFlexStart = document.getElementById("justifyContentFlexStart") ;

	207 shouldBe("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justif y-content')", "'flex-start'");

	208

	209 var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");

	210 shouldBe("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify- content')", "'flex-end'");

	211

	212 var justifyContentEndTrue = document.getElementById("justifyContentEndTrue");

	213 shouldBe("getComputedStyle(justifyContentEndTrue, '').getPropertyValue('justify- content')", "'end true'");

	214

	215 var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue ");

	216 shouldBe("getComputedStyle(justifyContentCenterTrue, '').getPropertyValue('justi fy-content')", "'center true'");

	217

	218 var justifyContentRightSafe = document.getElementById("justifyContentRightSafe") ;

	219 shouldBe("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justif y-content')", "'right safe'");

	220

	221 var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue");

	222 shouldBe("getComputedStyle(justifyContentLeftTrue, '').getPropertyValue('justify -content')", "'left true'");

	223

	224 var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexSta rtTrue");

	225 shouldBe("getComputedStyle(justifyContentFlexStartTrue, '').getPropertyValue('ju stify-content')", "'flex-start true'");

	226

	227 var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSa fe");

	228 shouldBe("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('just ify-content')", "'flex-end safe'");

	229

	230 var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpac eBetweenLeft");

	231 shouldBe("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue( 'justify-content')", "'space-between left'");

	232

	233 var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpa ceAroundCenter");

	234 shouldBe("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue ('justify-content')", "'space-around center'");

	235

	236 var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpac eEvenlyRight");

	237 shouldBe("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue( 'justify-content')", "'space-evenly right'");

	238

	239 var justifyContentStretchStartSafe = document.getElementById("justifyContentStre tchStartSafe");

	240 shouldBe("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue( 'justify-content')", "'stretch start safe'");

	241

	242 var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSp aceAroundEndTrue");

	243 shouldBe("getComputedStyle(justifyContentSpaceAroundEndTrue, '').getPropertyValu e('justify-content')", "'space-around end true'");

	244

	245 var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyCon tentSpaceEvenlyFlexStartSafe");

	246 shouldBe("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getProper tyValue('justify-content')", "'space-evenly flex-start safe'");

	247

	248 debug("");

	249 debug("Test initial value of justify-content through JS");

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

	251 document.body.appendChild(element);

	252 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-content')", "' start'");

	253

	254 debug("");

	255 debug("Test getting and setting justify-content through JS");

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

	257 document.body.appendChild(element);

	258 element.style.justifyContent = "center";

	259 checkValues(element, "justifyContent", "justify-content", "center", "center");

	260

	261 element.style.justifyContent = "true start";

	262 checkValues(element, "justifyContent", "justify-content", "start true", "start true");

	263

	264 element.style.justifyContent = "flex-end safe";

	265 checkValues(element, "justifyContent", "justify-content", "flex-end safe", "fle x-end safe");

	266

	267 element.style.justifyContent = "space-between right safe";

	268 checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe");

	269

	270 element.style.justifyContent = "stretch center";

	271 checkValues(element, "justifyContent", "justify-content", "stretch center", "st retch center");

	272

	273 element.style.justifyContent = "true space-around";

	274 checkValues(element, "justifyContent", "justify-content", "space-around true", "space-around true");

	275

	276 element.style.justifyContent = "auto";

	277 checkValues(element, "justifyContent", "justify-content", "auto", "start");

	278

	279 element.style.display = "flex";

	280 element.style.justifyContent = "auto";

	281 checkValues(element, "justifyContent", "justify-content", "auto", "flex-start") ;

	282

	283 element.style.display = "grid";

	284 element.style.justifyContent = "auto";

	285 checkValues(element, "justifyContent", "justify-content", "auto", "start");

	286

	287 element.style.justifyContent = "flex-end";

	288 checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end ");

	289

	290 debug("");

	291 debug("Test bad combinations of justify-content");

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

	293 document.body.appendChild(element);

	294

	295 checkBadValues(element, "justifyContent", "justify-content", "");

	296 checkBadValues(element, "justifyContent", "justify-content", "true auto");

	297 checkBadValues(element, "justifyContent", "justify-content", "auto safe");

	298 checkBadValues(element, "justifyContent", "justify-content", "auto left");

	299 checkBadValues(element, "justifyContent", "justify-content", "baseline safe");

	300 checkBadValues(element, "justifyContent", "justify-content", "last baseline cen ter");

	301 checkBadValues(element, "justifyContent", "justify-content", "true true");

	302 checkBadValues(element, "justifyContent", "justify-content", "true safe");

	303 checkBadValues(element, "justifyContent", "justify-content", "center start");

	304 checkBadValues(element, "justifyContent", "justify-content", "baseline safe");

	305 checkBadValues(element, "justifyContent", "justify-content", "true baseline");

	306 checkBadValues(element, "justifyContent", "justify-content", "true safe left");

	307 checkBadValues(element, "justifyContent", "justify-content", "true left safe");

	308 checkBadValues(element, "justifyContent", "justify-content", "left safe true sa fe");

	309 checkBadValues(element, "justifyContent", "justify-content", "start space-betwe en");

	310 checkBadValues(element, "justifyContent", "justify-content", "safe end stretch" );

	311 checkBadValues(element, "justifyContent", "justify-content", "space-around stre tch");

	312 checkBadValues(element, "justifyContent", "justify-content", "end start");

	313 checkBadValues(element, "justifyContent", "justify-content", "right safe space- evenly");

	314 checkBadValues(element, "justifyContent", "justify-content", "true");

	315 checkBadValues(element, "justifyContent", "justify-content", "safe");

	316

	317 debug("");

	318 debug("Test the value 'initial'");

	319 element.style.display = "";

	320 checkInitialValues(element, "justifyContent", "justify-content", "stretch center ", "start");

	321

	322 debug("");

	323 debug("Test the value 'initial' for grid containers");

	324 element.style.display = "grid";

	325 checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start");

	326

	327 debug("");

	328 debug("Test the value 'initial' for flex containers");

	329 element.style.display = "flex";

	330 checkInitialValues(element, "justifyContent", "justify-content", "right true", " flex-start");

	331

	332 debug("");

	333 debug("Test the value 'inherit'");

	334 checkInheritValues("justifyContent", "justify-content", "end");

	335 checkInheritValues("justifyContent", "justify-content", "left safe");

	336 checkInheritValues("justifyContent", "justify-content", "stretch center");

	337

	338 </script>

	339 </body>

	340 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-content-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')