mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 07:30:19 +00:00
Tests: Import some WPT tests for the CSS gap properties
This commit is contained in:
Andreas Kling
Andreas Kling
parent
98b223b9df
commit
2a741f81c7
Notes:
github-actions[bot]
2024-11-09 18:23:35 +00:00
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/2a741f81c78 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2253
38 changed files with 1935 additions and 0 deletions
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Details
|
||||
Result Test Name MessagePass column-gap is interpolable
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Details
|
||||
Result Test Name MessagePass column-gap: normal is not interpolable
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Default column-gap is not interpolable
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 18 tests
|
||||
|
||||
5 Pass
|
||||
13 Fail
|
||||
Details
|
||||
Result Test Name MessageFail Default column-gap is 'normal'
|
||||
Pass column-gap accepts pixels
|
||||
Pass column-gap accepts em
|
||||
Pass column-gap accepts vw
|
||||
Pass column-gap accepts percentage
|
||||
Fail column-gap accepts calc()
|
||||
Fail column-gap accepts calc() mixing fixed and percentage values
|
||||
Fail Initial column-gap is 'normal'
|
||||
Fail Initial column-gap is 'normal' 2
|
||||
Fail Initial inherited column-gap is 'normal'
|
||||
Pass column-gap is inheritable
|
||||
Fail Negative column-gap is invalid
|
||||
Fail 'max-content' column-gap is invalid
|
||||
Fail 'none' column-gap is invalid
|
||||
Fail column-gap with multiple values is invalid
|
||||
Fail Angle column-gap is invalid
|
||||
Fail Resolution column-gap is invalid
|
||||
Fail Time column-gap is invalid
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Details
|
||||
Result Test Name MessageFail gap is interpolable
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Details
|
||||
Result Test Name MessageFail gap: normal is not interpolable
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Details
|
||||
Result Test Name MessageFail Default gap is not interpolable
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Details
|
||||
Result Test Name MessagePass gap is interpolable
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 6 tests
|
||||
|
||||
6 Fail
|
||||
Details
|
||||
Result Test Name MessageFail colum-gap:normal computes to normal on multicol elements
|
||||
Fail row-gap:normal computes to normal on multicol elements
|
||||
Fail colum-gap:normal computes to normal on grid
|
||||
Fail row-gap:normal computes to normal on grid
|
||||
Fail colum-gap:normal (main axis) computes to normal on flexbox
|
||||
Fail row-gap:normal (cross axis) computes to normal on flexbox
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 26 tests
|
||||
|
||||
10 Pass
|
||||
16 Fail
|
||||
Details
|
||||
Result Test Name MessageFail Default gap is 'normal'
|
||||
Pass gap accepts pixels
|
||||
Pass gap accepts pixels 2
|
||||
Pass gap accepts pixels combined with percentage
|
||||
Pass gap accepts em
|
||||
Pass gap accepts em 2
|
||||
Pass gap accepts vw
|
||||
Pass gap accepts vw and vh
|
||||
Pass gap accepts percentage
|
||||
Pass gap accepts percentage 2
|
||||
Fail gap accepts calc()
|
||||
Fail gap accepts calc() mixing fixed and percentage values
|
||||
Fail gap accepts calc() 2
|
||||
Fail Initial gap is 'normal'
|
||||
Fail Initial gap is 'normal' 2
|
||||
Fail Initial inherited gap is 'normal'
|
||||
Pass gap is inheritable
|
||||
Fail Negative gap is invalid
|
||||
Fail 'max-content' gap is invalid
|
||||
Fail 'none' gap is invalid
|
||||
Fail Angle gap is invalid
|
||||
Fail Resolution gap is invalid
|
||||
Fail Time gap is invalid
|
||||
Fail gap with three values is invalid
|
||||
Fail gap with slash is invalid
|
||||
Fail gap with one wrong value is invalid
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 16 tests
|
||||
|
||||
2 Pass
|
||||
14 Fail
|
||||
Details
|
||||
Result Test Name MessageFail e.style['gap'] = "normal" should set the property value
|
||||
Fail e.style['gap'] = "10px" should set the property value
|
||||
Fail e.style['gap'] = "normal normal" should set the property value
|
||||
Fail e.style['gap'] = "10px 10px" should set the property value
|
||||
Fail e.style['column-gap'] = "normal" should set the property value
|
||||
Pass e.style['column-gap'] = "10px" should set the property value
|
||||
Fail e.style['row-gap'] = "normal" should set the property value
|
||||
Pass e.style['row-gap'] = "10px" should set the property value
|
||||
Fail 'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'
|
||||
Fail getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'
|
||||
Fail 'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'
|
||||
Fail getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'
|
||||
Fail 'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'
|
||||
Fail getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'
|
||||
Fail 'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'
|
||||
Fail getPropertyValue for 'column-gap: normal; row-gap: 10px;' returns '10px normal'
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 18 tests
|
||||
|
||||
5 Pass
|
||||
13 Fail
|
||||
Details
|
||||
Result Test Name MessageFail Default grid-column-gap is 'normal'
|
||||
Pass grid-column-gap accepts pixels
|
||||
Pass grid-column-gap accepts em
|
||||
Pass grid-column-gap accepts vw
|
||||
Pass grid-column-gap accepts percentage
|
||||
Fail grid-column-gap accepts calc()
|
||||
Fail grid-column-gap accepts calc() mixing fixed and percentage values
|
||||
Fail Initial grid-column-gap is 'normal'
|
||||
Fail Initial grid-column-gap is 'normal' 2
|
||||
Fail Initial inherited grid-column-gap is 'normal'
|
||||
Pass grid-column-gap is inheritable
|
||||
Fail Negative grid-column-gap is invalid
|
||||
Fail 'max-content' grid-column-gap is invalid
|
||||
Fail 'none' grid-column-gap is invalid
|
||||
Fail grid-column-gap with multiple values is invalid
|
||||
Fail Angle grid-column-gap is invalid
|
||||
Fail Resolution grid-column-gap is invalid
|
||||
Fail Time grid-column-gap is invalid
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 26 tests
|
||||
|
||||
10 Pass
|
||||
16 Fail
|
||||
Details
|
||||
Result Test Name MessageFail Default grid-gap is 'normal'
|
||||
Pass grid-gap accepts pixels
|
||||
Pass grid-gap accepts pixels 2
|
||||
Pass grid-gap accepts pixels combined with percentage
|
||||
Pass grid-gap accepts em
|
||||
Pass grid-gap accepts em 2
|
||||
Pass grid-gap accepts vw
|
||||
Pass grid-gap accepts vw and vh
|
||||
Pass grid-gap accepts percentage
|
||||
Pass grid-gap accepts percentage 2
|
||||
Fail grid-gap accepts calc()
|
||||
Fail grid-gap accepts calc() mixing fixed and percentage values
|
||||
Fail grid-gap accepts calc() 2
|
||||
Fail Initial grid-gap is 'normal'
|
||||
Fail Initial grid-gap is 'normal' 2
|
||||
Fail Initial inherited grid-gap is 'normal'
|
||||
Pass grid-gap is inheritable
|
||||
Fail Negative grid-gap is invalid
|
||||
Fail 'max-content' grid-gap is invalid
|
||||
Fail 'none' grid-gap is invalid
|
||||
Fail Angle grid-gap is invalid
|
||||
Fail Resolution grid-gap is invalid
|
||||
Fail Time grid-gap is invalid
|
||||
Fail grid-gap with three values is invalid
|
||||
Fail grid-gap with slash is invalid
|
||||
Fail grid-gap with one wrong value is invalid
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 18 tests
|
||||
|
||||
5 Pass
|
||||
13 Fail
|
||||
Details
|
||||
Result Test Name MessageFail Default grid-row-gap is 'normal'
|
||||
Pass grid-row-gap accepts pixels
|
||||
Pass grid-row-gap accepts em
|
||||
Pass grid-row-gap accepts vw
|
||||
Pass grid-row-gap accepts percentage
|
||||
Fail grid-row-gap accepts calc()
|
||||
Fail grid-row-gap accepts calc() mixing fixed and percentage values
|
||||
Fail Initial grid-row-gap is 'normal'
|
||||
Fail Initial grid-row-gap is 'normal' 2
|
||||
Fail Initial inherited grid-row-gap is 'normal'
|
||||
Pass grid-row-gap is inheritable
|
||||
Fail Negative grid-row-gap is invalid
|
||||
Fail 'max-content' grid-row-gap is invalid
|
||||
Fail 'none' grid-row-gap is invalid
|
||||
Fail grid-row-gap with multiple values is invalid
|
||||
Fail Angle grid-row-gap is invalid
|
||||
Fail Resolution grid-row-gap is invalid
|
||||
Fail Time grid-row-gap is invalid
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 3 tests
|
||||
|
||||
2 Pass
|
||||
1 Fail
|
||||
Details
|
||||
Result Test Name MessagePass grid-row-gap is a legacy name alias for row-gap
|
||||
Pass grid-column-gap is a legacy name alias for column-gap
|
||||
Fail grid-gap is a legacy name alias for gap
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Details
|
||||
Result Test Name MessagePass row-gap is interpolable
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Details
|
||||
Result Test Name MessagePass row-gap: normal is not interpolable
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Pass
|
||||
Details
|
||||
Result Test Name MessagePass Default row-gap is not interpolable
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 18 tests
|
||||
|
||||
5 Pass
|
||||
13 Fail
|
||||
Details
|
||||
Result Test Name MessageFail Default row-gap is 'normal'
|
||||
Pass row-gap accepts pixels
|
||||
Pass row-gap accepts em
|
||||
Pass row-gap accepts vw
|
||||
Pass row-gap accepts percentage
|
||||
Fail row-gap accepts calc()
|
||||
Fail row-gap accepts calc() mixing fixed and percentage values
|
||||
Fail Initial row-gap is 'normal'
|
||||
Fail Initial row-gap is 'normal' 2
|
||||
Fail Initial inherited row-gap is 'normal'
|
||||
Pass row-gap is inheritable
|
||||
Fail Negative row-gap is invalid
|
||||
Fail 'max-content' row-gap is invalid
|
||||
Fail 'none' row-gap is invalid
|
||||
Fail row-gap with multiple values is invalid
|
||||
Fail Angle row-gap is invalid
|
||||
Fail Resolution row-gap is invalid
|
||||
Fail Time row-gap is invalid
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Align Gap Values: longhand and shorthand gap parsing for style attribute</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
|
||||
<link rel="author" title="Karl Dubost" href="mailto:karlcow@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("gap", "normal");
|
||||
test_valid_value("gap", "10px");
|
||||
test_valid_value("gap", "normal normal", "normal");
|
||||
test_valid_value("gap", "10px 10px", "10px");
|
||||
test_valid_value("column-gap", "normal");
|
||||
test_valid_value("column-gap", "10px");
|
||||
test_valid_value("row-gap", "normal");
|
||||
test_valid_value("row-gap", "10px");
|
||||
|
||||
const div = document.createElement("div");
|
||||
const style = div.style;
|
||||
|
||||
test(function() {
|
||||
style.cssText = "row-gap: normal; column-gap: normal;";
|
||||
assert_equals(style.cssText, "gap: normal;");
|
||||
}, "'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "row-gap: normal; column-gap: normal;";
|
||||
assert_equals(style.getPropertyValue('gap'), "normal");
|
||||
}, "getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "row-gap: 10px; column-gap: 10px;";
|
||||
assert_equals(style.cssText, "gap: 10px;");
|
||||
}, "'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "row-gap: 10px; column-gap: 10px;";
|
||||
assert_equals(style.getPropertyValue('gap'), "10px");
|
||||
}, "getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "row-gap: 10px; column-gap: normal;";
|
||||
assert_equals(style.cssText, "gap: 10px normal;");
|
||||
}, "'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "row-gap: 10px; column-gap: normal;";
|
||||
assert_equals(style.getPropertyValue('gap'), "10px normal");
|
||||
}, "getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "column-gap: normal; row-gap: 10px;";
|
||||
assert_equals(style.cssText, "gap: 10px normal;");
|
||||
}, "'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'");
|
||||
|
||||
test(function() {
|
||||
style.cssText = "column-gap: normal; row-gap: 10px;";
|
||||
assert_equals(style.getPropertyValue('gap'), "10px normal");
|
||||
}, "getPropertyValue for 'column-gap: normal; row-gap: 10px;' returns '10px normal'");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</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>
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=UTF-8>
|
||||
<title>CSS Box Alignment Test: legacy gap properties</title>
|
||||
<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>
|
||||
<script src="../../support/shorthand-testcommon.js"></script>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
test_is_legacy_name_alias("grid-row-gap", "row-gap");
|
||||
test_is_legacy_name_alias("grid-column-gap", "column-gap");
|
||||
test_is_legacy_name_alias("grid-gap", "gap");
|
||||
|
||||
</script>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in a new issue