Merge pull request #10032 from mrego/css-align-prefix-gutter

[css-align] Use actual prefixed properties in the grid-* gutter tests
web-platform-tests · Mar 14, 2018 · e3d85ce · e3d85ce
2 parents 93beb83 + 7278d99
commit e3d85ce
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 94 deletions.
diff --git a/css/css-align/gaps/grid-column-gap-parsing-001.html b/css/css-align/gaps/grid-column-gap-parsing-001.html
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
-<title>CSS Box Alignment Test: column-gap parsing</title>
+<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 { 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; }
+  .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 { 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; }
+  #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>
@@ -55,96 +55,96 @@
       function(){
         var target = document.getElementById("default");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Default column-gap is 'normal'");
+      }, "Default grid-column-gap is 'normal'");
     test(
       function(){
         var target = document.getElementById("columnGapPx");
         assert_equals(getComputedStyle(target).columnGap, "12px");
-      }, "column-gap accepts pixels");
+      }, "grid-column-gap accepts pixels");
     test(
       function(){
         var target = document.getElementById("columnGapEm");
         assert_equals(getComputedStyle(target).columnGap, "20px");
-      }, "column-gap accepts em");
+      }, "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");
-      }, "column-gap accepts vw");
+      }, "grid-column-gap accepts vw");
     test(
       function(){
         var target = document.getElementById("columnGapPercent");
         assert_equals(getComputedStyle(target).columnGap, "15%");
-      }, "column-gap accepts percentage");
+      }, "grid-column-gap accepts percentage");
     test(
       function(){
         var target = document.getElementById("columnGapCalc");
         assert_equals(getComputedStyle(target).columnGap, "14px");
-      }, "column-gap accepts calc()");
+      }, "grid-column-gap accepts calc()");
     test(
       function(){
         var target = document.getElementById("columnGapCalcFixedPercent");
         assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
-      }, "column-gap accepts calc() mixing fixed and percentage values");
+      }, "grid-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'");
+      }, "Initial grid-column-gap is 'normal'");
     test(
       function(){
         var target = document.getElementById("columnGapInitialPx");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Initial column-gap is 'normal' 2");
+      }, "Initial grid-column-gap is 'normal' 2");
     test(
       function(){
         var target = document.getElementById("columnGapInherit");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Initial inherited column-gap is 'normal'");
+      }, "Initial inherited grid-column-gap is 'normal'");
     test(
       function(){
         var target = document.getElementById("columnGapInheritPx");
         assert_equals(getComputedStyle(target).columnGap, "12px");
-      }, "column-gap is inheritable");
+      }, "grid-column-gap is inheritable");
 
 
     test(
       function(){
         var target = document.getElementById("invalidColumnGapNegative");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Negative column-gap is invalid");
+      }, "Negative grid-column-gap is invalid");
     test(
       function(){
         var target = document.getElementById("invalidColumnGapMaxContent");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "'max-content' column-gap is invalid");
+      }, "'max-content' grid-column-gap is invalid");
     test(
       function(){
         var target = document.getElementById("invalidColumnGapNone");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "'none' column-gap is invalid");
+      }, "'none' grid-column-gap is invalid");
     test(
       function(){
         var target = document.getElementById("invalidColumnGapMultiple");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "column-gap with multiple values is invalid");
+      }, "grid-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");
+      }, "Angle grid-column-gap is invalid");
     test(
       function(){
         var target = document.getElementById("invalidColumnGapResolution");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Resolution column-gap is invalid");
+      }, "Resolution grid-column-gap is invalid");
     test(
       function(){
         var target = document.getElementById("invalidColumnGapTime");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Time column-gap is invalid");
+      }, "Time grid-column-gap is invalid");
   </script>
 </body>
 

diff --git a/css/css-align/gaps/grid-gap-parsing-001.html b/css/css-align/gaps/grid-gap-parsing-001.html
@@ -72,162 +72,162 @@
         var target = document.getElementById("default");
         assert_equals(getComputedStyle(target).rowGap, "normal");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Default gap is '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");
-      }, "gap accepts pixels");
+      }, "grid-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");
+      }, "grid-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");
+      }, "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");
-      }, "gap accepts em");
+      }, "grid-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");
+      }, "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");
-      }, "gap accepts vw");
+      }, "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");
-      }, "gap accepts vw and vh");
+      }, "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%");
-      }, "gap accepts percentage");
+      }, "grid-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");
+      }, "grid-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()");
+      }, "grid-gap accepts calc()");
     test(
       function(){
         var target = document.getElementById("gapCalcFixedPercent");
         assert_equals(getComputedStyle(target).rowGap, "calc(5px + 10%)");
         assert_equals(getComputedStyle(target).columnGap, "calc(5px + 10%)");
-      }, "gap accepts calc() mixing fixed and percentage values");
+      }, "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");
-      }, "gap accepts calc() 2");
+      }, "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 gap is '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 gap is 'normal' 2");
+      }, "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 gap is '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");
-      }, "gap is inheritable");
+      }, "grid-gap is inheritable");
 
     test(
       function(){
         var target = document.getElementById("invalidGridGapNegative");
         assert_equals(getComputedStyle(target).rowGap, "normal");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "Negative gap is invalid");
+      }, "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' gap is invalid");
+      }, "'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' gap is invalid");
+      }, "'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 gap is invalid");
+      }, "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 gap is invalid");
+      }, "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 gap is invalid");
+      }, "Time grid-gap is invalid");
     test(
       function(){
         var target = document.getElementById("invalidGridGapThree");
         assert_equals(getComputedStyle(target).rowGap, "normal");
         assert_equals(getComputedStyle(target).columnGap, "normal");
-      }, "gap with three values is invalid");
+      }, "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");
-      }, "gap with slash is invalid");
+      }, "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");
-      }, "gap with one wrong value is invalid");
+      }, "grid-gap with one wrong value is invalid");
   </script>
 </body>