Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(137)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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, 2 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-content-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/alignment/parse-justify-content.html
diff --git a/LayoutTests/fast/alignment/parse-justify-content.html b/LayoutTests/fast/alignment/parse-justify-content.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c266f45b4d8c5d790ae7a23ac4727f725b0b93c
--- /dev/null
+++ b/LayoutTests/fast/alignment/parse-justify-content.html
@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#justifyContentAuto {
+ justify-content: auto;
+}
+
+#justifyContentBaseline {
+ justify-content: baseline;
+}
+
+#justifyContentLastBaseline {
+ justify-content: last-baseline;
+}
+
+#justifyContentSpaceBetween {
+ justify-content: space-between;
+}
+
+#justifyContentSpaceAround {
+ justify-content: space-around;
+}
+
+#justifyContentSpaceEvenly {
+ justify-content: space-evenly;
+}
+
+#justifyContentStretch {
+ justify-content: stretch;
+}
+
+#justifyContentSpaceBetweenSafe {
+ justify-content: space-between safe;
+}
+
+#justifyContentSpaceAroundTrue {
+ justify-content: space-around true;
+}
+
+#justifyContentStretchTrue {
+ justify-content: stretch true;
+}
+
+#justifyContentStart {
+ justify-content: start;
+}
+
+#justifyContentEnd {
+ justify-content: end;
+}
+
+#justifyContentCenter {
+ justify-content: center;
+}
+
+#justifyContentLeft {
+ justify-content: left;
+}
+
+#justifyContentRight {
+ justify-content: right;
+}
+
+#justifyContentFlexStart {
+ justify-content: flex-start;
+}
+
+#justifyContentFlexEnd {
+ justify-content: flex-end;
+}
+
+#justifyContentEndTrue {
+ justify-content: end true;
+}
+
+#justifyContentCenterTrue {
+ justify-content: center true;
+}
+
+#justifyContentRightSafe {
+ justify-content: right safe;
+}
+
+#justifyContentLeftTrue {
+ justify-content: left true;
+}
+
+#justifyContentFlexStartTrue {
+ justify-content: flex-start true;
+}
+
+#justifyContentFlexEndSafe {
+ justify-content: flex-end safe;
+}
+
+#justifyContentSpaceBetweenLeft {
+ justify-content: space-between left;
+}
+
+#justifyContentSpaceAroundCenter {
+ justify-content: space-around center;
+}
+
+#justifyContentSpaceEvenlyRight {
+ justify-content: space-evenly right;
+}
+
+#justifyContentStretchStartSafe {
+ justify-content: stretch start safe;
+}
+
+#justifyContentSpaceAroundEndTrue {
+ justify-content: space-around end true;
+}
+
+#justifyContentSpaceEvenlyFlexStartSafe {
+ justify-content: space-evenly flex-start safe;
+}
+
+</style>
+<script src="../../resources/js-test.js"></script>
+</head>
+<body>
+<div id="justifyContentAuto"></div>
+<div id="justifyContentBaseline"></div>
+<div id="justifyContentLastBaseline"></div>
+<div id="justifyContentSpaceBetween"></div>
+<div id="justifyContentSpaceAround"></div>
+<div id="justifyContentSpaceEvenly"></div>
+<div id="justifyContentStretch"></div>
+<div id="justifyContentSpaceBetweenSafe"></div>
+<div id="justifyContentSpaceAroundTrue"></div>
+<div id="justifyContentStretchTrue"></div>
+<div id="justifyContentStretchrue"></div>
+<div id="justifyContentStart"></div>
+<div id="justifyContentEnd"></div>
+<div id="justifyContentCenter"></div>
+<div id="justifyContentLeft"></div>
+<div id="justifyContentRight"></div>
+<div id="justifyContentFlexStart"></div>
+<div id="justifyContentFlexEnd"></div>
+<div id="justifyContentEndTrue"></div>
+<div id="justifyContentCenterTrue"></div>
+<div id="justifyContentRightSafe"></div>
+<div id="justifyContentLeftTrue"></div>
+<div id="justifyContentFlexStartTrue"></div>
+<div id="justifyContentFlexEndSafe"></div>
+<div id="justifyContentSpaceBetweenLeft"></div>
+<div id="justifyContentSpaceAroundCenter"></div>
+<div id="justifyContentSpaceEvenlyRight"></div>
+<div id="justifyContentStretchStartSafe"></div>
+<div id="justifyContentSpaceAroundEndTrue"></div>
+<div id="justifyContentSpaceEvenlyFlexStartSafe"></div>
+
+<script src="resources/alignment-parsing-utils.js"></script>
+<script>
+description('Test that setting and getting justify-content works as expected');
+
+debug("Test getting justify-content set through CSS");
+var justifyContentAuto = document.getElementById("justifyContentAuto");
+shouldBe("getComputedStyle(justifyContentAuto, '').getPropertyValue('justify-content')", "'start'");
Julien - ping for review 2014/10/28 17:23:04 We could use shouldBeEqualToString here, which rem
jfernandez 2014/10/29 11:03:04 Done.
+
+var justifyContentBaseline = document.getElementById("justifyContentBaseline");
+shouldBe("getComputedStyle(justifyContentBaseline, '').getPropertyValue('justify-content')", "'baseline'");
+
+var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline");
+shouldBe("getComputedStyle(justifyContentLastBaseline, '').getPropertyValue('justify-content')", "'last-baseline'");
+
+var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween");
+shouldBe("getComputedStyle(justifyContentSpaceBetween, '').getPropertyValue('justify-content')", "'space-between'");
+
+var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround");
+shouldBe("getComputedStyle(justifyContentSpaceAround, '').getPropertyValue('justify-content')", "'space-around'");
+
+var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly");
+shouldBe("getComputedStyle(justifyContentSpaceEvenly, '').getPropertyValue('justify-content')", "'space-evenly'");
+
+var justifyContentStretch = document.getElementById("justifyContentStretch");
+shouldBe("getComputedStyle(justifyContentStretch, '').getPropertyValue('justify-content')", "'stretch'");
+
+var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe");
+shouldBe("getComputedStyle(justifyContentSpaceBetweenSafe, '').getPropertyValue('justify-content')", "'space-between safe'");
+
+var justifyContentSpaceAroundTrue = document.getElementById("justifyContentSpaceAroundTrue");
+shouldBe("getComputedStyle(justifyContentSpaceAroundTrue, '').getPropertyValue('justify-content')", "'space-around true'");
+
+var justifyContentStretchTrue = document.getElementById("justifyContentStretchTrue");
+shouldBe("getComputedStyle(justifyContentStretchTrue, '').getPropertyValue('justify-content')", "'stretch true'");
+
+var justifyContentStart = document.getElementById("justifyContentStart");
+shouldBe("getComputedStyle(justifyContentStart, '').getPropertyValue('justify-content')", "'start'");
+
+var justifyContentEnd = document.getElementById("justifyContentEnd");
+shouldBe("getComputedStyle(justifyContentEnd, '').getPropertyValue('justify-content')", "'end'");
+
+var justifyContentCenter = document.getElementById("justifyContentCenter");
+shouldBe("getComputedStyle(justifyContentCenter, '').getPropertyValue('justify-content')", "'center'");
+
+var justifyContentLeft = document.getElementById("justifyContentLeft");
+shouldBe("getComputedStyle(justifyContentLeft, '').getPropertyValue('justify-content')", "'left'");
+
+var justifyContentRight = document.getElementById("justifyContentRight");
+shouldBe("getComputedStyle(justifyContentRight, '').getPropertyValue('justify-content')", "'right'");
+
+var justifyContentFlexStart = document.getElementById("justifyContentFlexStart");
+shouldBe("getComputedStyle(justifyContentFlexStart, '').getPropertyValue('justify-content')", "'flex-start'");
+
+var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd");
+shouldBe("getComputedStyle(justifyContentFlexEnd, '').getPropertyValue('justify-content')", "'flex-end'");
+
+var justifyContentEndTrue = document.getElementById("justifyContentEndTrue");
+shouldBe("getComputedStyle(justifyContentEndTrue, '').getPropertyValue('justify-content')", "'end true'");
+
+var justifyContentCenterTrue = document.getElementById("justifyContentCenterTrue");
+shouldBe("getComputedStyle(justifyContentCenterTrue, '').getPropertyValue('justify-content')", "'center true'");
+
+var justifyContentRightSafe = document.getElementById("justifyContentRightSafe");
+shouldBe("getComputedStyle(justifyContentRightSafe, '').getPropertyValue('justify-content')", "'right safe'");
+
+var justifyContentLeftTrue = document.getElementById("justifyContentLeftTrue");
+shouldBe("getComputedStyle(justifyContentLeftTrue, '').getPropertyValue('justify-content')", "'left true'");
+
+var justifyContentFlexStartTrue = document.getElementById("justifyContentFlexStartTrue");
+shouldBe("getComputedStyle(justifyContentFlexStartTrue, '').getPropertyValue('justify-content')", "'flex-start true'");
+
+var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe");
+shouldBe("getComputedStyle(justifyContentFlexEndSafe, '').getPropertyValue('justify-content')", "'flex-end safe'");
+
+var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft");
+shouldBe("getComputedStyle(justifyContentSpaceBetweenLeft, '').getPropertyValue('justify-content')", "'space-between left'");
+
+var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter");
+shouldBe("getComputedStyle(justifyContentSpaceAroundCenter, '').getPropertyValue('justify-content')", "'space-around center'");
+
+var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight");
+shouldBe("getComputedStyle(justifyContentSpaceEvenlyRight, '').getPropertyValue('justify-content')", "'space-evenly right'");
+
+var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe");
+shouldBe("getComputedStyle(justifyContentStretchStartSafe, '').getPropertyValue('justify-content')", "'stretch start safe'");
+
+var justifyContentSpaceAroundEndTrue = document.getElementById("justifyContentSpaceAroundEndTrue");
+shouldBe("getComputedStyle(justifyContentSpaceAroundEndTrue, '').getPropertyValue('justify-content')", "'space-around end true'");
+
+var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe");
+shouldBe("getComputedStyle(justifyContentSpaceEvenlyFlexStartSafe, '').getPropertyValue('justify-content')", "'space-evenly flex-start safe'");
+
+debug("");
+debug("Test initial value of justify-content through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+shouldBe("getComputedStyle(element, '').getPropertyValue('justify-content')", "'start'");
+
+debug("");
+debug("Test getting and setting justify-content through JS");
+element = document.createElement("div");
+document.body.appendChild(element);
+element.style.justifyContent = "center";
+checkValues(element, "justifyContent", "justify-content", "center", "center");
+
+element.style.justifyContent = "true start";
+checkValues(element, "justifyContent", "justify-content", "start true", "start true");
+
+element.style.justifyContent = "flex-end safe";
+checkValues(element, "justifyContent", "justify-content", "flex-end safe", "flex-end safe");
+
+element.style.justifyContent = "space-between right safe";
+checkValues(element, "justifyContent", "justify-content", "space-between right safe", "space-between right safe");
+
+element.style.justifyContent = "stretch center";
+checkValues(element, "justifyContent", "justify-content", "stretch center", "stretch center");
+
+element.style.justifyContent = "true space-around";
+checkValues(element, "justifyContent", "justify-content", "space-around true", "space-around true");
+
+element.style.justifyContent = "auto";
+checkValues(element, "justifyContent", "justify-content", "auto", "start");
+
+element.style.display = "flex";
+element.style.justifyContent = "auto";
+checkValues(element, "justifyContent", "justify-content", "auto", "flex-start");
+
+element.style.display = "grid";
+element.style.justifyContent = "auto";
+checkValues(element, "justifyContent", "justify-content", "auto", "start");
+
+element.style.justifyContent = "flex-end";
+checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end");
+
+debug("");
+debug("Test bad combinations of justify-content");
+element = document.createElement("div");
+document.body.appendChild(element);
+
+checkBadValues(element, "justifyContent", "justify-content", "");
+checkBadValues(element, "justifyContent", "justify-content", "true auto");
+checkBadValues(element, "justifyContent", "justify-content", "auto safe");
+checkBadValues(element, "justifyContent", "justify-content", "auto left");
+checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
+checkBadValues(element, "justifyContent", "justify-content", "last baseline center");
+checkBadValues(element, "justifyContent", "justify-content", "true true");
+checkBadValues(element, "justifyContent", "justify-content", "true safe");
+checkBadValues(element, "justifyContent", "justify-content", "center start");
+checkBadValues(element, "justifyContent", "justify-content", "baseline safe");
+checkBadValues(element, "justifyContent", "justify-content", "true baseline");
+checkBadValues(element, "justifyContent", "justify-content", "true safe left");
+checkBadValues(element, "justifyContent", "justify-content", "true left safe");
+checkBadValues(element, "justifyContent", "justify-content", "left safe true safe");
+checkBadValues(element, "justifyContent", "justify-content", "start space-between");
+checkBadValues(element, "justifyContent", "justify-content", "safe end stretch");
+checkBadValues(element, "justifyContent", "justify-content", "space-around stretch");
+checkBadValues(element, "justifyContent", "justify-content", "end start");
+checkBadValues(element, "justifyContent", "justify-content", "right safe space-evenly");
+checkBadValues(element, "justifyContent", "justify-content", "true");
+checkBadValues(element, "justifyContent", "justify-content", "safe");
+
+debug("");
+debug("Test the value 'initial'");
+element.style.display = "";
+checkInitialValues(element, "justifyContent", "justify-content", "stretch center", "start");
+
+debug("");
+debug("Test the value 'initial' for grid containers");
+element.style.display = "grid";
+checkInitialValues(element, "justifyContent", "justify-content", "space-between left", "start");
+
+debug("");
+debug("Test the value 'initial' for flex containers");
+element.style.display = "flex";
+checkInitialValues(element, "justifyContent", "justify-content", "right true", "flex-start");
+
+debug("");
+debug("Test the value 'inherit'");
+checkInheritValues("justifyContent", "justify-content", "end");
+checkInheritValues("justifyContent", "justify-content", "left safe");
+checkInheritValues("justifyContent", "justify-content", "stretch center");
+
+</script>
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/alignment/parse-justify-content-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698