| <!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> |
| |
| |
