diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-align/content-distribution | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-align/content-distribution')
18 files changed, 549 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-001.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-001.html new file mode 100644 index 0000000000..c5cd4254f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: align-content - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "alignContent" + key; + document.body.appendChild(element); + test(function() { + if (specifiedValue === "first baseline") + checkValues(element, "alignContent", "align-content", "", "baseline"); + else + checkValues(element, "alignContent", "align-content", "", specifiedValue); + }, "Checking align-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-002.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-002.html new file mode 100644 index 0000000000..5d20062074 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: align-content - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "alignContent", "align-content", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "alignContent", "align-content", "center", "normal"); +}, "Test align-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "alignContent", "align-content", "safe start", "normal"); +}, "Test grid items align-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "alignContent", "align-content", "unsafe end", "normal"); +}, "Test flex items align-content: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "alignContent", "align-content", "start", "normal"); +}, "Test absolute positioned elements align-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "alignContent", "align-content", "end", "normal"); +}, "Test absolute positioned grid items align-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "alignContent", "align-content", "end", "normal"); +}, "Test absolute positioned flex items align-content: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-003.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-003.html new file mode 100644 index 0000000000..b0da3588bf --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Disrtribution: align-content - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, + baselineClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.alignContent = ""; + element.style.alignContent = specifiedValue; + if (specifiedValue === "first baseline") + checkValues(element, "alignContent", "align-content", "baseline", "baseline"); + else + checkValues(element, "alignContent", "align-content", specifiedValue, specifiedValue); + }, "Checking align-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-004.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-004.html new file mode 100644 index 0000000000..6a6f5b9c76 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: align-content - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "legacy", "self-start", "left", "safe right"].concat(invalidPositionValues, invalidDistributionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "alignContent", "align-content", value); + }, "Checking invalid combination - align-content: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-005.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-005.html new file mode 100644 index 0000000000..fd4fa3c452 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-align-content-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distibution: align-content - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("alignContent", "align-content", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("alignContent", "align-content", "safe start"); +}, "Test the value 'inherit' overrides current value ('safe start')"); +test(function() { + checkInheritValues("alignContent", "align-content", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-001.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-001.html new file mode 100644 index 0000000000..df06ca920b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: justify-content - setting values via CSS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<link rel="stylesheet" href="../../support/alignment.css" > +<meta name="assert" content="Check that the computed value is the specified value and the JS value is empty."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, + distributionClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + element = document.createElement("div"); + element.className = "justifyContent" + key; + document.body.appendChild(element); + test(function() { + checkValues(element, "justifyContent", "justify-content", "", specifiedValue); + }, "Checking justify-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-002.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-002.html new file mode 100644 index 0000000000..3f48a2ac0c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: justify-content - 'initial' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<link rel="help" href="https://drafts.csswg.org/css-cascade/#initial-values" /> +<meta name="assert" content="Check the 'initial' value in diferent scenarios."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +container = document.createElement("div"); +element = document.createElement("div"); +container.appendChild(element); +document.body.appendChild(container); + +test(function() { + element = document.createElement("div"); + document.body.appendChild(element); + checkValues(element, "justifyContent", "justify-content", "", "normal"); +}, "Test 'initial' value when nothing is specified"); + +test(function() { + container.style.display = ""; + checkInitialValues(element, "justifyContent", "justify-content", "center", "normal"); +}, "Test justify-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + checkInitialValues(element, "justifyContent", "justify-content", "safe start", "normal"); +}, "Test grid items justify-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + checkInitialValues(element, "justifyContent", "justify-content", "unsafe end", "normal"); +}, "Test flex items justify-content: 'initial'"); + +test(function() { + container.style.display = ""; + element.style.position = "absolute"; + checkInitialValues(element, "justifyContent", "justify-content", "start", "normal"); +}, "Test absolute positioned elements justify-content: 'initial'"); + +test(function() { + container.style.display = "grid"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyContent", "justify-content", "end", "normal"); +}, "Test absolute positioned grid items justify-content: 'initial'"); + +test(function() { + container.style.display = "flex"; + element.style.position = "absolute"; + checkInitialValues(element, "justifyContent", "justify-content", "end", "normal"); +}, "Test absolute positioned flex items justify-content: 'initial'"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-003.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-003.html new file mode 100644 index 0000000000..0dea6e55f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Disrtribution: justify-content - setting values via JS</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-overflow-position" /> +<meta name="assert" content="Check that the computed value is the specified value and the same than the JS value."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let classes = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, + distributionClasses, overflowClasses); + + for (var key in classes) { + let specifiedValue = classes[key]; + test(function() { + element.style.justifyContent = ""; + element.style.justifyContent = specifiedValue; + checkValues(element, "justifyContent", "justify-content", specifiedValue, specifiedValue); + }, "Checking justify-content: " + specifiedValue); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-004.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-004.html new file mode 100644 index 0000000000..22e78f84ae --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-004.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distribution: justify-content - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<meta name="assert" content="Check bad combinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + element = document.createElement("div"); + document.body.appendChild(element); + + let values = ["auto", "legacy", "self-start", "baseline", "first baseline", "last baseline"].concat(invalidPositionValues, invalidDistributionValues); + + values.forEach(function(value) { + test(function() { + checkBadValues(element, "justifyContent", "justify-content", value); + }, "Checking invalid combination - justify-content: " + value); + }); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-005.html b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-005.html new file mode 100644 index 0000000000..32949e88a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/parse-justify-content-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Content Distibution: justify-content - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution" /> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" /> +<meta name="assert" content="Check bad cobinations of specified values."/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> +test(function() { + checkInheritValues("justifyContent", "justify-content", "end"); +}, "Test the value 'inherit' overrides current value ('end')"); +test(function() { + checkInheritValues("justifyContent", "justify-content", "safe left"); +}, "Test the value 'inherit' overrides current value ('safe left')"); +test(function() { + checkInheritValues("justifyContent", "justify-content", "unsafe center"); +}, "Test the value 'inherit' overrides current value ('unsafe center')"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-001.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-001.html new file mode 100644 index 0000000000..150633360d --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - single values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that setting a single value to place-content expands to such value set in both 'align-content' and 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, overflowClasses); + for (var key in classes) { + let value = classes[key]; + test(function() { + checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", value); + }, "Checking place-content: " + value); + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-002.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-002.html new file mode 100644 index 0000000000..589feff0c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - multiple values specified</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that setting two values to place-content sets the first one to 'align-content' and the second one to 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses, + overflowClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, + distributionClasses); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + test(function() { + checkPlaceShorhandLonghands("place-content", "align-content", "justify-content", alignValue, justifyValue); + }, "Checking place-content: " + alignValue + " " + justifyValue); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-003.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-003.html new file mode 100644 index 0000000000..137094eb2a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - initial value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that place-content's 'initial' value expands to 'align-content' and 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + var div = document.createElement("div"); + document.body.appendChild(div); + div.style["align-content"] = "start"; + div.style["justify-content"] = "end"; + div.setAttribute("style", "place-content: initial"); + + test(function() { + assert_equals(div.style["align-content"], + "initial", "place-content specified value for align-content"); + }, "Check place-content: initial - align-content expanded value"); + + test(function() { + assert_equals(div.style["justify-content"], + "initial", "place-content specified value for justify-content"); + }, "Check place-content: initial - justify-content expanded value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-004.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-004.html new file mode 100644 index 0000000000..f43741035a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-004.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - invalid values</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that place-content's invalid values are properly detected at parsing time." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<script> + function checkInvalidValues(value) + { + checkPlaceShorthandInvalidValues("place-content", "align-content", "justify-content", value); + } + + test(function() { + checkInvalidValues("center space-between start") + }, "Verify fallback values are invalid"); + + test(function() { + checkInvalidValues("left") + checkInvalidValues("left start") + checkInvalidValues("right center") + }, "Verify 'left' and 'right' values are invalid for block/cross axis alignment"); + + test(function() { + checkInvalidValues("start baseline") + checkInvalidValues("end last baseline") + }, "Verify <baseline-position> values are invalid for the justify-content property"); + + test(function() { + checkInvalidValues("10px end") + checkInvalidValues("start 10%") + }, "Verify numeric values are invalid"); + + test(function() { + checkInvalidValues("auto") + checkInvalidValues("auto right") + checkInvalidValues("auto auto") + checkInvalidValues("start auto") + }, "Verify 'auto' values are invalid"); + + test(function() { + checkInvalidValues("self-start") + checkInvalidValues("center self-end") + checkInvalidValues("self-end start") + }, "Verify self-position values are invalid"); + + test(function() { + checkInvalidValues("") + }, "Verify empty declaration is invalid"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-005.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-005.html new file mode 100644 index 0000000000..d683ce4aaa --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-005.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - inherit value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check that place-content's 'inherit' value expands to 'align-content' and 'justify-content'." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #test { + place-content: start end; + } +</style> +<div id="log"></div> +<div id="test"></div> +<script> + var child = document.createElement("div"); + document.getElementById("test").appendChild(child); + child.setAttribute("style", "place-content: inherit"); + var style = getComputedStyle(child); + + test(function() { + assert_equals(style.getPropertyValue("align-content"), + "start", "place-content resolved value for align-content"); + }, "Check place-content: inherit - align-content resolved value"); + + test(function() { + assert_equals(style.getPropertyValue("justify-content"), + "end", "place-content resolved value for justify-content"); + }, "Check place-content: inherit - justify-content resolved value"); +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-006.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-006.html new file mode 100644 index 0000000000..2a5056d413 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Box Alignment: place-content shorthand - Shorthand 'specified' and 'resolved' value</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com" /> +<link rel="help" href="http://www.w3.org/TR/css3-align/#propdef-place-content" /> +<meta name="assert" content="Check the place-content's 'specified' and 'resolved' values serialization." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/css-align/resources/alignment-parsing-utils.js"></script> +<div id="log"></div> +<div id="test"></div> +<script> + let classes = Object.assign({"Normal":"normal"}, contentPositionClasses, distributionClasses, baselineClasses); + for (var key1 in classes) { + let alignValue = classes[key1]; + let classes2 = Object.assign({"Normal":"normal", "Left":"left", "Right":"right"}, contentPositionClasses, distributionClasses); + for (var key2 in classes2) { + let justifyValue = classes2[key2]; + var value = (alignValue + " " + justifyValue).trim(); + test(function() { + checkPlaceShorhand("place-content", value, alignValue, justifyValue) + }, "Checking place-content: " + value); + } + } +</script> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html new file mode 100644 index 0000000000..67727f4fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +div { + width: 400px; + height: 400px; + background: blue; + position: relative; +} +span { + background: green; + width: 200px; + height: 200px; + position: absolute; + bottom: 0; + left: 100px; +} +</style> +Should see a green square centered and at the bottom of the blue square. +<div><span></span></div> diff --git a/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007.html b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007.html new file mode 100644 index 0000000000..be954c9712 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/content-distribution/place-content-shorthand-007.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment: place-content shorthand with fallback</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-align/#propdef-place-content"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1430622"> +<link rel="match" href="place-content-shorthand-007-ref.html"> +<style> +div { + display: grid; + grid: 200px / 200px; + width: 400px; + height: 400px; + background: blue; + place-content: end space-evenly; +} +span { + background: green; +} +</style> +Should see a green square centered and at the bottom of the blue square. +<div><span></span></div> |