diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-align/gaps')
19 files changed, 1558 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-001.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-001.html new file mode 100644 index 0000000000..03c06249cc --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that column-gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-0-to-100 { + from { column-gap: 0px; } + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "50px"); + }, "column-gap is interpolable"); + </script> +</body> + diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-002.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-002.html new file mode 100644 index 0000000000..133b98a31c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for column-gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-normal-to-100 { + from { column-gap: normal; } + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "column-gap: normal is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-003.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-003.html new file mode 100644 index 0000000000..ef8f0e52e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-animation-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default column-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for column-gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes column-gap-to-100 { + to { column-gap: 100px; } + } + + #target { + animation-name: column-gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "Default column-gap is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html new file mode 100644 index 0000000000..7feeddf851 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/column-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: column-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .columnGapPx { column-gap: 12px; } + #columnGapEm { column-gap: 2em; font: 10px/1 Monospace; } + #columnGapVw { column-gap: 2vw; } + #columnGapPercent { column-gap: 15%; } + #columnGapCalc { column-gap: calc(10px + 4px); } + #columnGapCalcFixedPercent { column-gap: calc(5px + 10%); } + .columnGapInitial { column-gap: initial; } + .columnGapInherit { column-gap: inherit; } + + #invalidColumnGapNegative { column-gap: -10px; } + #invalidColumnGapMaxContent { column-gap: max-content; } + #invalidColumnGapNone { column-gap: none; } + #invalidColumnGapMultiple { column-gap: 10px 1px; } + #invalidColumnGapAngle { column-gap: 3rad; } + #invalidColumnGapResolution { column-gap: 2dpi; } + #invalidColumnGapTime { column-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="columnGapPx" class="columnGapPx"></div> + <div id="columnGapEm"></div> + <div id="columnGapVw"></div> + <div id="columnGapPercent"></div> + <div id="columnGapCalc"></div> + <div id="columnGapCalcFixedPercent"></div> + <div id="columnGapInitial" class="columnGapInitial"></div> + <div class="columnGapPx"> + <div id="columnGapInitialPx" class="columnGapInitial"></div> + </div> + <div id="columnGapInherit" class="columnGapInherit"></div> + <div class="columnGapPx"> + <div id="columnGapInheritPx" class="columnGapInherit"></div> + </div> + + <div id="invalidColumnGapNegative"></div> + <div id="invalidColumnGapMaxContent"></div> + <div id="invalidColumnGapNone"></div> + <div id="invalidColumnGapMultiple"></div> + <div id="invalidColumnGapAngle"></div> + <div id="invalidColumnGapResolution"></div> + <div id="invalidColumnGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("columnGapEm"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "column-gap accepts em"); + test( + function(){ + var target = document.getElementById("columnGapVw"); + // The columnGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap accepts vw"); + test( + function(){ + var target = document.getElementById("columnGapPercent"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "column-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("columnGapCalc"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "column-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("columnGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "column-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("columnGapInitial"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInitialPx"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial column-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("columnGapInherit"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInheritPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "column-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidColumnGapNegative"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMaxContent"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapNone"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMultiple"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "column-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapAngle"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapResolution"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapTime"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time column-gap is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-001.html new file mode 100644 index 0000000000..7ce3b69f6b --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-0-to-100 { + from { gap: 0px; } + to { gap: 100px; } + } + + #target { + animation-name: gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "50px"); + assert_equals(getComputedStyle(target).rowGap, "50px"); + assert_equals(getComputedStyle(target).columnGap, "50px"); + }, "gap is interpolable"); + </script> +</body> + diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-002.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-002.html new file mode 100644 index 0000000000..6056aad674 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-normal-to-100 { + from { gap: normal; } + to { gap: 100px; } + } + + #target { + animation-name: gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "100px"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "gap: normal is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-003.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-003.html new file mode 100644 index 0000000000..2ec4551acb --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-to-100 { + to { gap: 100px; } + } + + #target { + animation-name: gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "100px"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + assert_equals(getComputedStyle(target).columnGap, "100px"); + }, "Default gap is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-animation-004.html b/testing/web-platform/tests/css/css-align/gaps/gap-animation-004.html new file mode 100644 index 0000000000..8b6fbe440f --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-animation-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that gap property is interpolable for each longhand (row-gap and column-gap) independently."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes gap-100-200-to-200-400 { + from { gap: 100px 200px; } + to { gap: 200px 400px; } + } + + #target { + animation-name: gap-100-200-to-200-400; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).gap, "150px 300px"); + assert_equals(getComputedStyle(target).rowGap, "150px"); + assert_equals(getComputedStyle(target).columnGap, "300px"); + }, "gap is interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-normal-computed-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-normal-computed-001.html new file mode 100644 index 0000000000..45b82ac27a --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-normal-computed-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: computed value of normal on *-gap properties</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<meta assert="The computed value of [row-|column-]?gap is normal for all elements it applies to. Checking explicitely because earlier version of the spec called for 0px in some cases."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#col, +#grid, +#flex { + /* Not using the shorthand because that's not what we're interested in, + and there are implementations that support column-gap without supporting the shorthand */ + colum-gap: normal; + row-gap: normal; + float: right; /* for shrinkwrap*/ +} +#col { + column-count: 2; + column-width: 50px; +} +#grid { + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; +} +#flex { + display: flex; +} +#flex * { width: 50px; height: 50px;} +</style> +<body> + <div id="log"></div> + + <div id=col></div> + <div id=grid></div> + <div id=flex><span></span><span></span></div> + + <script> + test( + function(){ + var target = document.getElementById("col"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "colum-gap:normal computes to normal on multicol elements"); + test( + function(){ + var target = document.getElementById("col"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap:normal computes to normal on multicol elements"); + test( + function(){ + var target = document.getElementById("grid"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "colum-gap:normal computes to normal on grid"); + test( + function(){ + var target = document.getElementById("grid"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap:normal computes to normal on grid"); + test( + function(){ + var target = document.getElementById("flex"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "colum-gap:normal (main axis) computes to normal on flexbox"); + test( + function(){ + var target = document.getElementById("flex"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap:normal (cross axis) computes to normal on flexbox"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-001.html new file mode 100644 index 0000000000..3d7ab10b8c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: used value of *-gap:normal on grid</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<meta assert="The used value of row-gap and column-gap normal for grids is 0"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +#grid { + colum-gap: normal; + row-gap: normal; + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + + position: absolute; +} +#grid * { background: green; } +#red { + width: 100px; + height: 100px; + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=grid><span></span><span></span><span></span><span></span></div> +<div id=red></div> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-002.html b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-002.html new file mode 100644 index 0000000000..0b40646e7c --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-normal-used-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: used value of *-gap:normal on flexbox</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<meta assert="The used value row-gap:normal and column:normal normal is 0px in flexbox"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" /> +<style> +#flex { + colum-gap: normal; + row-gap: normal; + display: flex; + flex-flow: wrap; + max-width: 145px; /* more than 100, less than 150, to force wrapping and get 2 items per line*/ + + position: absolute; +} +#flex * { + width: 50px; + height: 50px; + background: green +} +#red { + width: 100px; + height: 100px; + background: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id=flex><span></span><span></span><span></span><span></span></div> +<div id=red></div> diff --git a/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html new file mode 100644 index 0000000000..9ff3872114 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/gap-parsing-001.html @@ -0,0 +1,234 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap shorthand parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#row-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .gapPx { gap: 12px; } + #gapPxTwo { gap: 12px 8px; } + #gapPxPercent { gap: 12px 10%; } + #gapEm { gap: 2em; font: 10px/1 Monospace; } + #gapEmTwo { gap: 2em 4em; font: 10px/1 Monospace; } + #gapVw { gap: 2vw; } + #gapVwTwo { gap: 2vw 1vh; } + #gapPercent { gap: 15%; } + #gapPercentTwo { gap: 15% 10%; } + #gapCalc { gap: calc(10px + 4px); } + #gapCalcFixedPercent { gap: calc(5px + 10%); } + #gapCalcTwo { gap: calc(10px + 4px) calc(20px - 8px); } + .gapInitial { gap: initial; } + .gapInherit { gap: inherit; } + + #invalidGapNegative { gap: -10px; } + #invalidGapMaxContent { gap: max-content; } + #invalidGapNone { gap: none; } + #invalidGapAngle { gap: 3rad; } + #invalidGapResolution { gap: 2dpi; } + #invalidGapTime { gap: 200ms; } + #invalidGapThree { gap: 10px 1px 5px; } + #invalidGapSlash { gap: 10px / 5px; } + #invalidGapOneWrong { gap: 10px -5px; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="gapPx" class="gapPx"></div> + <div id="gapPxTwo"></div> + <div id="gapPxPercent"></div> + <div id="gapEm"></div> + <div id="gapEmTwo"></div> + <div id="gapVw"></div> + <div id="gapVwTwo"></div> + <div id="gapPercent"></div> + <div id="gapPercentTwo"></div> + <div id="gapCalc"></div> + <div id="gapCalcFixedPercent"></div> + <div id="gapCalcTwo"></div> + <div id="gapInitial" class="gapInitial"></div> + <div class="gapPx"> + <div id="gapInitialPx" class="gapInitial"></div> + </div> + <div id="gapInherit" class="gapInherit"></div> + <div class="gapPx"> + <div id="gapInheritPx" class="gapInherit"></div> + </div> + + <div id="invalidGapNegative"></div> + <div id="invalidGapMaxContent"></div> + <div id="invalidGapNone"></div> + <div id="invalidGapAngle"></div> + <div id="invalidGapResolution"></div> + <div id="invalidGapTime"></div> + <div id="invalidGapThree"></div> + <div id="invalidGapSlash"></div> + <div id="invalidGapOneWrong"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts pixels"); + test( + function(){ + var target = document.getElementById("gapPxTwo"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "8px"); + }, "gap accepts pixels 2"); + test( + function(){ + var target = document.getElementById("gapPxPercent"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts pixels combined with percentage"); + test( + function(){ + var target = document.getElementById("gapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "gap accepts em"); + test( + function(){ + var target = document.getElementById("gapEmTwo"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "40px"); + }, "gap accepts em 2"); + test( + function(){ + var target = document.getElementById("gapVw"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw"); + test( + function(){ + var target = document.getElementById("gapVwTwo"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap accepts vw and vh"); + test( + function(){ + var target = document.getElementById("gapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "gap accepts percentage"); + test( + function(){ + var target = document.getElementById("gapPercentTwo"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "gap accepts percentage 2"); + test( + function(){ + var target = document.getElementById("gapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "gap accepts calc()"); + test( + function(){ + var target = document.getElementById("gapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("gapCalcTwo"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap accepts calc() 2"); + test( + function(){ + var target = document.getElementById("gapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("gapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "gap is inheritable"); + + test( + function(){ + var target = document.getElementById("invalidGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapThree"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with three values is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapSlash"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with slash is invalid"); + test( + function(){ + var target = document.getElementById("invalidGapOneWrong"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "gap with one wrong value is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html new file mode 100644 index 0000000000..baec0641cd --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/grid-column-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: grid-column-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .columnGapPx { grid-column-gap: 12px; } + #columnGapEm { grid-column-gap: 2em; font: 10px/1 Monospace; } + #columnGapVw { grid-column-gap: 2vw; } + #columnGapPercent { grid-column-gap: 15%; } + #columnGapCalc { grid-column-gap: calc(10px + 4px); } + #columnGapCalcFixedPercent { grid-column-gap: calc(5px + 10%); } + .columnGapInitial { grid-column-gap: initial; } + .columnGapInherit { grid-column-gap: inherit; } + + #invalidColumnGapNegative { grid-column-gap: -10px; } + #invalidColumnGapMaxContent { grid-column-gap: max-content; } + #invalidColumnGapNone { grid-column-gap: none; } + #invalidColumnGapMultiple { grid-column-gap: 10px 1px; } + #invalidColumnGapAngle { grid-column-gap: 3rad; } + #invalidColumnGapResolution { grid-column-gap: 2dpi; } + #invalidColumnGapTime { grid-column-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="columnGapPx" class="columnGapPx"></div> + <div id="columnGapEm"></div> + <div id="columnGapVw"></div> + <div id="columnGapPercent"></div> + <div id="columnGapCalc"></div> + <div id="columnGapCalcFixedPercent"></div> + <div id="columnGapInitial" class="columnGapInitial"></div> + <div class="columnGapPx"> + <div id="columnGapInitialPx" class="columnGapInitial"></div> + </div> + <div id="columnGapInherit" class="columnGapInherit"></div> + <div class="columnGapPx"> + <div id="columnGapInheritPx" class="columnGapInherit"></div> + </div> + + <div id="invalidColumnGapNegative"></div> + <div id="invalidColumnGapMaxContent"></div> + <div id="invalidColumnGapNone"></div> + <div id="invalidColumnGapMultiple"></div> + <div id="invalidColumnGapAngle"></div> + <div id="invalidColumnGapResolution"></div> + <div id="invalidColumnGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default grid-column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-column-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("columnGapEm"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "grid-column-gap accepts em"); + test( + function(){ + var target = document.getElementById("columnGapVw"); + // The columnGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-column-gap accepts vw"); + test( + function(){ + var target = document.getElementById("columnGapPercent"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "grid-column-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("columnGapCalc"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "grid-column-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("columnGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "grid-column-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("columnGapInitial"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInitialPx"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-column-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("columnGapInherit"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited grid-column-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("columnGapInheritPx"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-column-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidColumnGapNegative"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMaxContent"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapNone"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapMultiple"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-column-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapAngle"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapResolution"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution grid-column-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidColumnGapTime"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time grid-column-gap is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html new file mode 100644 index 0000000000..fc10b620f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/grid-gap-parsing-001.html @@ -0,0 +1,234 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: gap shorthand parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .gapPx { grid-gap: 12px; } + #gapPxTwo { grid-gap: 12px 8px; } + #gapPxPercent { grid-gap: 12px 10%; } + #gapEm { grid-gap: 2em; font: 10px/1 Monospace; } + #gapEmTwo { grid-gap: 2em 4em; font: 10px/1 Monospace; } + #gapVw { grid-gap: 2vw; } + #gapVwTwo { grid-gap: 2vw 1vh; } + #gapPercent { grid-gap: 15%; } + #gapPercentTwo { grid-gap: 15% 10%; } + #gapCalc { grid-gap: calc(10px + 4px); } + #gapCalcFixedPercent { grid-gap: calc(5px + 10%); } + #gapCalcTwo { grid-gap: calc(10px + 4px) calc(20px - 8px); } + .gapInitial { grid-gap: initial; } + .gapInherit { grid-gap: inherit; } + + #invalidGridGapNegative { grid-gap: -10px; } + #invalidGridGapMaxContent { grid-gap: max-content; } + #invalidGridGapNone { grid-gap: none; } + #invalidGridGapAngle { grid-gap: 3rad; } + #invalidGridGapResolution { grid-gap: 2dpi; } + #invalidGridGapTime { grid-gap: 200ms; } + #invalidGridGapThree { grid-gap: 10px 1px 5px; } + #invalidGridGapSlash { grid-gap: 10px / 5px; } + #invalidGridGapOneWrong { grid-gap: 10px -5px; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="gapPx" class="gapPx"></div> + <div id="gapPxTwo"></div> + <div id="gapPxPercent"></div> + <div id="gapEm"></div> + <div id="gapEmTwo"></div> + <div id="gapVw"></div> + <div id="gapVwTwo"></div> + <div id="gapPercent"></div> + <div id="gapPercentTwo"></div> + <div id="gapCalc"></div> + <div id="gapCalcFixedPercent"></div> + <div id="gapCalcTwo"></div> + <div id="gapInitial" class="gapInitial"></div> + <div class="gapPx"> + <div id="gapInitialPx" class="gapInitial"></div> + </div> + <div id="gapInherit" class="gapInherit"></div> + <div class="gapPx"> + <div id="gapInheritPx" class="gapInherit"></div> + </div> + + <div id="invalidGridGapNegative"></div> + <div id="invalidGridGapMaxContent"></div> + <div id="invalidGridGapNone"></div> + <div id="invalidGridGapAngle"></div> + <div id="invalidGridGapResolution"></div> + <div id="invalidGridGapTime"></div> + <div id="invalidGridGapThree"></div> + <div id="invalidGridGapSlash"></div> + <div id="invalidGridGapOneWrong"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Default grid-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("gapPxTwo"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "8px"); + }, "grid-gap accepts pixels 2"); + test( + function(){ + var target = document.getElementById("gapPxPercent"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "grid-gap accepts pixels combined with percentage"); + test( + function(){ + var target = document.getElementById("gapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "20px"); + }, "grid-gap accepts em"); + test( + function(){ + var target = document.getElementById("gapEmTwo"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + assert_equals(getComputedStyle(target).columnGap, "40px"); + }, "grid-gap accepts em 2"); + test( + function(){ + var target = document.getElementById("gapVw"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap accepts vw"); + test( + function(){ + var target = document.getElementById("gapVwTwo"); + // The gap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + assert_not_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap accepts vw and vh"); + test( + function(){ + var target = document.getElementById("gapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "15%"); + }, "grid-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("gapPercentTwo"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + assert_equals(getComputedStyle(target).columnGap, "10%"); + }, "grid-gap accepts percentage 2"); + test( + function(){ + var target = document.getElementById("gapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "14px"); + }, "grid-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("gapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)"); + }, "grid-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("gapCalcTwo"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-gap accepts calc() 2"); + test( + function(){ + var target = document.getElementById("gapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial grid-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("gapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Initial inherited grid-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("gapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + assert_equals(getComputedStyle(target).columnGap, "12px"); + }, "grid-gap is inheritable"); + + test( + function(){ + var target = document.getElementById("invalidGridGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Negative grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'max-content' grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "'none' grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Angle grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Resolution grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "Time grid-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapThree"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap with three values is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapSlash"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap with slash is invalid"); + test( + function(){ + var target = document.getElementById("invalidGridGapOneWrong"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + assert_equals(getComputedStyle(target).columnGap, "normal"); + }, "grid-gap with one wrong value is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html new file mode 100644 index 0000000000..d3b44f4bd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/grid-row-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: grid-row-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .rowGapPx { grid-row-gap: 12px; } + #rowGapEm { grid-row-gap: 2em; font: 10px/1 Monospace; } + #rowGapVw { grid-row-gap: 2vw; } + #rowGapPercent { grid-row-gap: 15%; } + #rowGapCalc { grid-row-gap: calc(10px + 4px); } + #rowGapCalcFixedPercent { grid-row-gap: calc(5px + 10%); } + .rowGapInitial { grid-row-gap: initial; } + .rowGapInherit { grid-row-gap: inherit; } + + #invalidRowGapNegative { grid-row-gap: -10px; } + #invalidRowGapMaxContent { grid-row-gap: max-content; } + #invalidRowGapNone { grid-row-gap: none; } + #invalidRowGapMultiple { grid-row-gap: 10px 1px; } + #invalidRowGapAngle { grid-row-gap: 3rad; } + #invalidRowGapResolution { grid-row-gap: 2dpi; } + #invalidRowGapTime { grid-row-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="rowGapPx" class="rowGapPx"></div> + <div id="rowGapEm"></div> + <div id="rowGapVw"></div> + <div id="rowGapPercent"></div> + <div id="rowGapCalc"></div> + <div id="rowGapCalcFixedPercent"></div> + <div id="rowGapInitial" class="rowGapInitial"></div> + <div class="rowGapPx"> + <div id="rowGapInitialPx" class="rowGapInitial"></div> + </div> + <div id="rowGapInherit" class="rowGapInherit"></div> + <div class="rowGapPx"> + <div id="rowGapInheritPx" class="rowGapInherit"></div> + </div> + + <div id="invalidRowGapNegative"></div> + <div id="invalidRowGapMaxContent"></div> + <div id="invalidRowGapNone"></div> + <div id="invalidRowGapMultiple"></div> + <div id="invalidRowGapAngle"></div> + <div id="invalidRowGapResolution"></div> + <div id="invalidRowGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Default grid-row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "grid-row-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("rowGapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + }, "grid-row-gap accepts em"); + test( + function(){ + var target = document.getElementById("rowGapVw"); + // The rowGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + }, "grid-row-gap accepts vw"); + test( + function(){ + var target = document.getElementById("rowGapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + }, "grid-row-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("rowGapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + }, "grid-row-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("rowGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + }, "grid-row-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("rowGapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial grid-row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial grid-row-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("rowGapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial inherited grid-row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "grid-row-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidRowGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Negative grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'max-content' grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'none' grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMultiple"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "grid-row-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Angle grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Resolution grid-row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Time grid-row-gap is invalid"); + </script> +</body> + + diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-001.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-001.html new file mode 100644 index 0000000000..da4a235ded --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that row-gap property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-0-to-100 { + from { row-gap: 0px; } + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-0-to-100; + animation-timing-function: linear; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "50px"); + }, "row-gap is interpolable"); + </script> +</body> + diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-002.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-002.html new file mode 100644 index 0000000000..330e1054f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap normal test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that 'normal' value for row-gap property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-normal-to-100 { + from { row-gap: normal; } + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-normal-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + }, "row-gap: normal is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-003.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-003.html new file mode 100644 index 0000000000..574e3ff7c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-animation-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: Default row-gap test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes"> +<meta name="assert" content="This test checks that the default value for row-gap property, which is 'normal', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes row-gap-to-100 { + to { row-gap: 100px; } + } + + #target { + animation-name: row-gap-to-100; + animation-duration: 2s; + animation-delay: -1s; + animation-play-state: paused; + } +</style> +<body> + <div id="target"></div> + <div id="log"></div> + + <script> + test( + function(){ + var target = document.getElementById("target"); + assert_equals(getComputedStyle(target).rowGap, "100px"); + }, "Default row-gap is not interpolable"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html b/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html new file mode 100644 index 0000000000..59be718cee --- /dev/null +++ b/testing/web-platform/tests/css/css-align/gaps/row-gap-parsing-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Box Alignment Test: row-gap parsing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + .rowGapPx { row-gap: 12px; } + #rowGapEm { row-gap: 2em; font: 10px/1 Monospace; } + #rowGapVw { row-gap: 2vw; } + #rowGapPercent { row-gap: 15%; } + #rowGapCalc { row-gap: calc(10px + 4px); } + #rowGapCalcFixedPercent { row-gap: calc(5px + 10%); } + .rowGapInitial { row-gap: initial; } + .rowGapInherit { row-gap: inherit; } + + #invalidRowGapNegative { row-gap: -10px; } + #invalidRowGapMaxContent { row-gap: max-content; } + #invalidRowGapNone { row-gap: none; } + #invalidRowGapMultiple { row-gap: 10px 1px; } + #invalidRowGapAngle { row-gap: 3rad; } + #invalidRowGapResolution { row-gap: 2dpi; } + #invalidRowGapTime { row-gap: 200ms; } +</style> +<body> + <div id="log"></div> + + <div id="default"></div> + <div id="rowGapPx" class="rowGapPx"></div> + <div id="rowGapEm"></div> + <div id="rowGapVw"></div> + <div id="rowGapPercent"></div> + <div id="rowGapCalc"></div> + <div id="rowGapCalcFixedPercent"></div> + <div id="rowGapInitial" class="rowGapInitial"></div> + <div class="rowGapPx"> + <div id="rowGapInitialPx" class="rowGapInitial"></div> + </div> + <div id="rowGapInherit" class="rowGapInherit"></div> + <div class="rowGapPx"> + <div id="rowGapInheritPx" class="rowGapInherit"></div> + </div> + + <div id="invalidRowGapNegative"></div> + <div id="invalidRowGapMaxContent"></div> + <div id="invalidRowGapNone"></div> + <div id="invalidRowGapMultiple"></div> + <div id="invalidRowGapAngle"></div> + <div id="invalidRowGapResolution"></div> + <div id="invalidRowGapTime"></div> + + <script> + test( + function(){ + var target = document.getElementById("default"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Default row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap accepts pixels"); + test( + function(){ + var target = document.getElementById("rowGapEm"); + assert_equals(getComputedStyle(target).rowGap, "20px"); + }, "row-gap accepts em"); + test( + function(){ + var target = document.getElementById("rowGapVw"); + // The rowGap size would depend on the viewport width, so to make the test pass + // in any window size we just check it's not "normal". + assert_not_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap accepts vw"); + test( + function(){ + var target = document.getElementById("rowGapPercent"); + assert_equals(getComputedStyle(target).rowGap, "15%"); + }, "row-gap accepts percentage"); + test( + function(){ + var target = document.getElementById("rowGapCalc"); + assert_equals(getComputedStyle(target).rowGap, "14px"); + }, "row-gap accepts calc()"); + test( + function(){ + var target = document.getElementById("rowGapCalcFixedPercent"); + assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)"); + }, "row-gap accepts calc() mixing fixed and percentage values"); + test( + function(){ + var target = document.getElementById("rowGapInitial"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInitialPx"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial row-gap is 'normal' 2"); + test( + function(){ + var target = document.getElementById("rowGapInherit"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Initial inherited row-gap is 'normal'"); + test( + function(){ + var target = document.getElementById("rowGapInheritPx"); + assert_equals(getComputedStyle(target).rowGap, "12px"); + }, "row-gap is inheritable"); + + + test( + function(){ + var target = document.getElementById("invalidRowGapNegative"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Negative row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMaxContent"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'max-content' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapNone"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "'none' row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapMultiple"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "row-gap with multiple values is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapAngle"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Angle row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapResolution"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Resolution row-gap is invalid"); + test( + function(){ + var target = document.getElementById("invalidRowGapTime"); + assert_equals(getComputedStyle(target).rowGap, "normal"); + }, "Time row-gap is invalid"); + </script> +</body> + + |