Changeset 140480 in webkit


Ignore:
Timestamp:
Jan 22, 2013, 3:33:18 PM (13 years ago)
Author:
jchaffraix@webkit.org
Message:

[CSS Grid Layout] Add grid.css to hold the common grid testing code
​https://bugs.webkit.org/show_bug.cgi?id=107044

Reviewed by Tony Chang.

  • fast/css-grid-layout/containing-block-grids.html:

Removed 2 bad display: none rules that where overriden by
the inline style declaration.

  • fast/css-grid-layout/minmax-fixed-logical-height-only.html:
  • fast/css-grid-layout/breadth-size-resolution-grid.html:
  • fast/css-grid-layout/calc-resolution-grid-item.html:
  • fast/css-grid-layout/display-grid-set-get.html:
  • fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
  • fast/css-grid-layout/grid-columns-rows-get-set.html:
  • fast/css-grid-layout/grid-element-padding-margin.html:
  • fast/css-grid-layout/minmax-fixed-logical-width-only.html:
  • fast/css-grid-layout/minmax-min-content-column-resolution-columns.html:
  • fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
  • fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html:
  • fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html:
  • fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
  • fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html:
  • fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html:
  • fast/css-grid-layout/percent-resolution-grid-item.html:
  • fast/css-grid-layout/place-cell-by-index.html:

Updated all the files above to:

  • use grid.css.
  • rename 'a', 'b', 'c' and 'd' to more meaningful.
  • change the previous ids to be classes as we ended up having several divs with the same id.
  • fast/css-grid-layout/resources/grid.css: Added.
Location:
trunk/LayoutTests
Files:
1 added
19 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r140479 r140480  
     12013-01-22  Julien Chaffraix  <jchaffraix@webkit.org>
     2
     3        [CSS Grid Layout] Add grid.css to hold the common grid testing code
     4        https://bugs.webkit.org/show_bug.cgi?id=107044
     5
     6        Reviewed by Tony Chang.
     7
     8        * fast/css-grid-layout/containing-block-grids.html:
     9        Removed 2 bad display: none rules that where overriden by
     10        the inline style declaration.
     11
     12        * fast/css-grid-layout/minmax-fixed-logical-height-only.html:
     13        * fast/css-grid-layout/breadth-size-resolution-grid.html:
     14        * fast/css-grid-layout/calc-resolution-grid-item.html:
     15        * fast/css-grid-layout/display-grid-set-get.html:
     16        * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
     17        * fast/css-grid-layout/grid-columns-rows-get-set.html:
     18        * fast/css-grid-layout/grid-element-padding-margin.html:
     19        * fast/css-grid-layout/minmax-fixed-logical-width-only.html:
     20        * fast/css-grid-layout/minmax-min-content-column-resolution-columns.html:
     21        * fast/css-grid-layout/minmax-min-content-column-resolution-rows.html:
     22        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html:
     23        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html:
     24        * fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html:
     25        * fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html:
     26        * fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html:
     27        * fast/css-grid-layout/percent-resolution-grid-item.html:
     28        * fast/css-grid-layout/place-cell-by-index.html:
     29        Updated all the files above to:
     30        - use grid.css.
     31        - rename 'a', 'b', 'c' and 'd' to more meaningful.
     32        - change the previous ids to be classes as we ended up having several divs with the same id.
     33
     34        * fast/css-grid-layout/resources/grid.css: Added.
     35
    1362013-01-22  Ojan Vafai  <ojan@chromium.org>
    237

  • trunk/LayoutTests/fast/css-grid-layout/breadth-size-resolution-grid.html

    r136432 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: 100px 10vw;
    1211    -webkit-grid-rows: 10vh 100px;
    1312}
    1413
    15 #a {
    16     background-color: blue;
    17     -webkit-grid-column: 1;
    18     -webkit-grid-row: 1;
     14.firstRowFirstColumn {
    1915    width: 100%;
    2016    height: 100%;
    2117}
    2218
    23 #b {
    24     background-color: lime;
    25     -webkit-grid-column: 2;
    26     -webkit-grid-row: 1;
     19.firstRowSecondColumn {
    2720    width: 100%;
    2821    height: 100%;
    2922}
    3023
    31 #c {
    32     background-color: purple;
    33     -webkit-grid-column: 1;
    34     -webkit-grid-row: 2;
     24.secondRowFirstColumn {
    3525    width: 100%;
    3626    height: 100%;
    3727}
    3828
    39 #d {
    40     background-color: orange;
    41     -webkit-grid-column: 2;
    42     -webkit-grid-row: 2;
     29.secondRowSecondColumn {
    4330    width: 100%;
    4431    height: 100%;
    45 }
    46 
    47 .verticalRL {
    48     -webkit-writing-mode: vertical-rl;
    4932}
    5033</style>
    … …  
    5538
    5639<div class="grid">
    57     <div id="a" data-expected-width="100" data-expected-height="60"></div>
    58     <div id="b" data-expected-width="80" data-expected-height="60"></div>
    59     <div id="c" data-expected-width="100" data-expected-height="100"></div>
    60     <div id="d" data-expected-width="80" data-expected-height="100"></div>
     40    <div class="firstRowFirstColumn" data-expected-width="100" data-expected-height="60"></div>
     41    <div class="firstRowSecondColumn" data-expected-width="80" data-expected-height="60"></div>
     42    <div class="secondRowFirstColumn" data-expected-width="100" data-expected-height="100"></div>
     43    <div class="secondRowSecondColumn" data-expected-width="80" data-expected-height="100"></div>
    6144</div>
    6245
    6346<div class="grid verticalRL">
    64     <div id="a" data-expected-width="60" data-expected-height="100"></div>
    65     <div id="b" data-expected-width="60" data-expected-height="80"></div>
    66     <div id="c" data-expected-width="100" data-expected-height="100"></div>
    67     <div id="d" data-expected-width="100" data-expected-height="80"></div>
     47    <div class="firstRowFirstColumn" data-expected-width="60" data-expected-height="100"></div>
     48    <div class="firstRowSecondColumn" data-expected-width="60" data-expected-height="80"></div>
     49    <div class="secondRowFirstColumn" data-expected-width="100" data-expected-height="100"></div>
     50    <div class="secondRowSecondColumn" data-expected-width="100" data-expected-height="80"></div>
    6851</div>
    6952
    7053<div class="grid">
    71      <div id="a" class="verticalRL" data-expected-width="100" data-expected-height="60"></div>
    72      <div id="b" data-expected-width="80" data-expected-height="60"></div>
    73      <div id="c" class="verticalRL" data-expected-width="100" data-expected-height="100"></div>
    74      <div id="d" data-expected-width="80" data-expected-height="100"></div>
     54     <div class="firstRowFirstColumn" class="verticalRL" data-expected-width="100" data-expected-height="60"></div>
     55     <div class="firstRowSecondColumn" data-expected-width="80" data-expected-height="60"></div>
     56     <div class="secondRowFirstColumn" class="verticalRL" data-expected-width="100" data-expected-height="100"></div>
     57     <div class="secondRowSecondColumn" data-expected-width="80" data-expected-height="100"></div>
    7558</div>
    7659

  • trunk/LayoutTests/fast/css-grid-layout/calc-resolution-grid-item.html

    r135965 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: 100px 300px;
    1211    -webkit-grid-rows: 50px 150px;
    1312    height: 200px;
    1413    width: 400px;
    15 }
    16 
    17 #a {
    18     background-color: blue;
    19     -webkit-grid-column: 1;
    20     -webkit-grid-row: 1;
    21 }
    22 
    23 #b {
    24     background-color: lime;
    25     -webkit-grid-column: 2;
    26     -webkit-grid-row: 1;
    27 }
    28 
    29 #c {
    30     background-color: purple;
    31     -webkit-grid-column: 1;
    32     -webkit-grid-row: 2;
    33 }
    34 
    35 #d {
    36     background-color: orange;
    37     -webkit-grid-column: 2;
    38     -webkit-grid-row: 2;
    3914}
    4015
    … …  
    5328    height: -webkit-calc(70% + 30%);
    5429}
    55 
    56 .verticalRL {
    57     -webkit-writing-mode: vertical-rl;
    58 }
    5930</style>
    6031<script src="../../resources/check-layout.js"></script>
    … …  
    6435
    6536<div class="grid">
    66     <div id="a" class="calcWidth" data-expected-width="100" data-expected-height="15"></div>
    67     <div id="b" class="calcHeight" data-expected-width="15" data-expected-height="60"></div>
    68     <div id="c" class="calcHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
    69     <div id="d" class="calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
     37    <div class="firstRowFirstColumn calcWidth" data-expected-width="100" data-expected-height="15"></div>
     38    <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
     39    <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
     40    <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
    7041</div>
    7142
    7243<div class="grid verticalRL">
    73     <div id="a" class="calcWidth" data-expected-width="50" data-expected-height="15"></div>
    74     <div id="b" class="calcHeight" data-expected-width="15" data-expected-height="260"></div>
    75     <div id="c" class="calcHeightAndWidth" data-expected-width="140" data-expected-height="100"></div>
    76     <div id="d" class="calcHeightAndWidth" data-expected-width="140" data-expected-height="300"></div>
     44    <div class="firstRowFirstColumn calcWidth" data-expected-width="50" data-expected-height="15"></div>
     45    <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="260"></div>
     46    <div class="secondRowFirstColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="100"></div>
     47    <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="140" data-expected-height="300"></div>
    7748</div>
    7849
    7950<div class="grid">
    80     <div id="a" class="calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
    81     <div id="b" class="calcHeight verticalRL" data-expected-width="15" data-expected-height="60"></div>
    82     <div id="c" class="calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
    83     <div id="d" class="calcHeightAndWidth verticalRL" data-expected-width="260" data-expected-height="150"></div>
     51    <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
     52    <div class="firstRowSecondColumn calcHeight verticalRL" data-expected-width="15" data-expected-height="60"></div>
     53    <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
     54    <div class="secondRowSecondColumn calcHeightAndWidth verticalRL" data-expected-width="260" data-expected-height="150"></div>
    8455</div>
    8556
    8657<div class="grid">
    87     <div id="a" class="calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
    88     <div id="b" class="calcHeight" data-expected-width="15" data-expected-height="60"></div>
    89     <div id="c" class="calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
    90     <div id="d" class="calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
     58    <div class="firstRowFirstColumn calcWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
     59    <div class="firstRowSecondColumn calcHeight" data-expected-width="15" data-expected-height="60"></div>
     60    <div class="secondRowFirstColumn calcHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
     61    <div class="secondRowSecondColumn calcHeightAndWidth" data-expected-width="260" data-expected-height="150"></div>
    9162</div>
    9263</body>

  • trunk/LayoutTests/fast/css-grid-layout/containing-block-grids.html

    r122747 r140480  
    66            testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    77    </script>
     8    <link href="resources/grid.css" rel="stylesheet">
    89    <style>
    910        div { width: 100px; height: 100px; }
    10         .relative-positioned-grid { display: none; background-color: red; position:relative; }
    11         .relative-positioned-inline-grid { display: none; background-color: red; position: relative; }
     11        .relative-positioned-grid { background-color: red; position:relative; }
     12        .relative-positioned-inline-grid { background-color: red; position: relative; }
    1213    </style>
    1314</head>
    1415<body>
    1516<p>Grids can act as containing blocks for positioned content.</p>
    16 <div class="relative-positioned-grid" style="display: -webkit-grid"><div style="background-color: green; left: 0; top: 0"></div></div>
    17 <div class="relative-positioned-inline-grid" style="display: -webkit-inline-grid"><div style="background-color:green; left: 0; top: 0"></div></div>
     17<div class="relative-positioned-grid grid"><div style="background-color: green; left: 0; top: 0"></div></div>
     18<div class="relative-positioned-inline-grid inline-grid"><div style="background-color:green; left: 0; top: 0"></div></div>
    1819</body>
    1920</html>

  • trunk/LayoutTests/fast/css-grid-layout/display-grid-set-get.html

    r121464 r140480  
    66    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    77</script>
    8 <style>
    9 .grid { display: -webkit-grid; }
    10 .inlineGrid { display: -webkit-inline-grid; }
    11 </style>
     8<link href="resources/grid.css" rel="stylesheet">
    129<script src="../js/resources/js-test-pre.js"></script>
    1310</head>
    1411<body>
    1512<div class="grid" id="gridElement"></div>
    16 <div class="inlineGrid" id="inlineGridElement"></div>
     13<div class="inline-grid" id="inlineGridElement"></div>
    1714<script src="resources/display-grid-set-get.js"></script>
    1815<script src="../js/resources/js-test-post.js"></script>

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-multiple.html

    r137478 r140480  
    66    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    77</script>
     8<link href="resources/grid.css" rel="stylesheet">
    89<style>
    910.gridWithFixed {
    10     display: -webkit-grid;
    1111    -webkit-grid-columns: 7px 11px;
    1212    -webkit-grid-rows: 17px 2px;
    … …  
    1414
    1515.gridWithPercent {
    16     display: -webkit-grid;
    1716    -webkit-grid-columns: 53% 99%;
    1817    -webkit-grid-rows: 27% 52%;
    1918}
    2019.gridWithAuto {
    21     display: -webkit-grid;
    2220    -webkit-grid-columns: auto auto;
    2321    -webkit-grid-rows: auto auto;
    2422}
    2523.gridWithEM {
    26     display: -webkit-grid;
    2724    -webkit-grid-columns: 10em 12em;
    2825    -webkit-grid-rows: 15em 17em;
    … …  
    3027}
    3128.gridWithNoneAndAuto {
    32     display: -webkit-grid;
    3329    -webkit-grid-columns: none auto;
    3430    -webkit-grid-rows: none auto;
    3531}
    3632.gridNoneWithAndFixed {
    37     display: -webkit-grid;
    3833    -webkit-grid-columns: none 15px;
    3934    -webkit-grid-rows: none 22px;
    4035}
    4136.gridWithThreeItems {
    42     display: -webkit-grid;
    4337    -webkit-grid-columns: 15px auto 10em;
    4438    -webkit-grid-rows: 12em 18px auto;
    … …  
    4640}
    4741.gridWithPercentAndViewportPercent {
    48     display: -webkit-grid;
    4942    -webkit-grid-columns: 50% 15vw;
    5043    -webkit-grid-rows: 35% 28vh;
    5144}
    5245.gridWithFitContentAndFitAvailable {
    53     display: -webkit-grid;
    5446    -webkit-grid-columns: -webkit-content-available;
    5547    -webkit-grid-rows: -webkit-fitcontent -webkit-fit-available;
    5648}
    5749.gridWithMinMaxContent {
    58     display: -webkit-grid;
    5950    -webkit-grid-columns: -webkit-min-content -webkit-max-content;
    6051    -webkit-grid-rows: -webkit-max-content -webkit-min-content;
    6152}
    6253.gridWithMinMaxAndFixed {
    63     display: -webkit-grid;
    6454    -webkit-grid-columns: minmax(45px, 30%) 15px;
    6555    -webkit-grid-rows: 12em minmax(35%, 10px);
    … …  
    6757}
    6858.gridWithMinMaxAndMinMaxContent {
    69     display: -webkit-grid;
    7059    -webkit-grid-columns: minmax(-webkit-min-content, 30%) 15px;
    7160    -webkit-grid-rows: 12em minmax(35%, -webkit-max-content);
    … …  
    7665</head>
    7766<body>
    78 <div class="gridWithFixed" id="gridWithFixedElement"></div>
    79 <div class="gridWithPercent" id="gridWithPercentElement"></div>
    80 <div class="gridWithAuto" id="gridWithAutoElement"></div>
    81 <div class="gridWithEM" id="gridWithEMElement"></div>
    82 <div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
    83 <div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
    84 <div class="gridWithThreeItems" id="gridWithThreeItems"></div>
    85 <div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
    86 <div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
    87 <div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
    88 <div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
    89 <div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
     67<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
     68<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
     69<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
     70<div class="grid gridWithEM" id="gridWithEMElement"></div>
     71<div class="grid gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
     72<div class="grid gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
     73<div class="grid gridWithThreeItems" id="gridWithThreeItems"></div>
     74<div class="grid gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
     75<div class="grid gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
     76<div class="grid gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
     77<div class="grid gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
     78<div class="grid gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
    9079<script src="resources/grid-columns-rows-get-set-multiple.js"></script>
    9180<script src="../js/resources/js-test-post.js"></script>

  • trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set.html

    r137478 r140480  
    66    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    77</script>
     8<link href="resources/grid.css" rel="stylesheet">
    89<style>
    9 .grid {
    10     display: -webkit-grid;
    11 }
    1210.gridWithNone {
    1311    -webkit-grid-columns: none;

  • trunk/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.html

    r137560 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: 100px;
    1211    -webkit-grid-rows: 50px;
    … …  
    2322    border-color: green;
    2423    border-width: 10px 20px 30px 40px;
    25 }
    26 
    27 .verticalRL {
    28     -webkit-writing-mode: vertical-rl;
    2924}
    3025</style>

  • trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-height-only.html

    r139025 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    width: 100px;
    1211    height: 200px;
    … …  
    4948}
    5049
    51 #a {
    52     background-color: blue;
    53     -webkit-grid-column: 1;
    54     -webkit-grid-row: 1;
     50.firstRowFirstColumn {
    5551    width: 100%;
    5652    height: 100%;
    5753}
    5854
    59 #b {
    60     background-color: green;
    61     -webkit-grid-column: 1;
    62     -webkit-grid-row: 2;
     55.secondRowFirstColumn {
    6356    width: 100%;
    6457    height: 100%;
    6558}
    66 
    6759</style>
    6860<script src="../../resources/check-layout.js"></script>
    … …  
    7365
    7466<div class="grid" id="grid1" data-expected-width="100" data-expected-height="200">
    75     <div id="a" data-expected-height="40" data-expected-width="30"></div>
    76     <div id="b" data-expected-height="160" data-expected-width="30"></div>
     67    <div class="firstRowFirstColumn" data-expected-height="40" data-expected-width="30"></div>
     68    <div class="secondRowFirstColumn" data-expected-height="160" data-expected-width="30"></div>
    7769</div>
    7870
    7971<div class="grid" id="grid2" data-expected-width="100" data-expected-height="200">
    80     <div id="a" data-expected-height="120" data-expected-width="30"></div>
    81     <div id="b" data-expected-height="80" data-expected-width="30"></div>
     72    <div class="firstRowFirstColumn" data-expected-height="120" data-expected-width="30"></div>
     73    <div class="secondRowFirstColumn" data-expected-height="80" data-expected-width="30"></div>
    8274</div>
    8375
    8476<div class="grid" id="grid3" data-expected-width="100" data-expected-height="200">
    85     <div id="a" data-expected-height="90" data-expected-width="30"></div>
    86     <div id="b" data-expected-height="110" data-expected-width="30"></div>
     77    <div class="firstRowFirstColumn" data-expected-height="90" data-expected-width="30"></div>
     78    <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
    8779</div>
    8880
    8981<div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
    90     <div id="a" data-expected-height="30" data-expected-width="40"></div>
    91     <div id="b" data-expected-height="30" data-expected-width="60"></div>
     82    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
     83    <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="60"></div>
    9284</div>
    9385
    9486<div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
    95     <div id="a" data-expected-height="30" data-expected-width="90"></div>
    96     <div id="b" data-expected-height="30" data-expected-width="10"></div>
     87    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="90"></div>
     88    <div class="secondRowFirstColumn" data-expected-height="30" data-expected-width="10"></div>
    9789</div>
    9890
    9991<div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
    100     <div id="a" data-expected-height="90" data-expected-width="30"></div>
    101     <div id="b" data-expected-height="110" data-expected-width="30"></div>
     92    <div class="firstRowFirstColumn" data-expected-height="90" data-expected-width="30"></div>
     93    <div class="secondRowFirstColumn" data-expected-height="110" data-expected-width="30"></div>
    10294</div>
    10395

  • trunk/LayoutTests/fast/css-grid-layout/minmax-fixed-logical-width-only.html

    r139025 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    width: 100px;
    1211    height: 200px;
    … …  
    5049}
    5150
    52 #a {
    53     background-color: blue;
    54     -webkit-grid-column: 1;
    55     -webkit-grid-row: 1;
     51.firstRowFirstColumn {
    5652    width: 100%;
    5753    height: 100%;
    5854}
    5955
    60 #b {
    61     background-color: green;
    62     -webkit-grid-column: 2;
    63     -webkit-grid-row: 1;
     56.firstRowSecondColumn {
    6457    width: 100%;
    6558    height: 100%;
    6659}
    67 
    6860</style>
    6961<script src="../../resources/check-layout.js"></script>
    … …  
    7466
    7567<div class="grid" id="grid1" data-expected-width="100" data-expected-height="200">
    76     <div id="a" data-expected-height="30" data-expected-width="40"></div>
    77     <div id="b" data-expected-height="30" data-expected-width="60"></div>
     68    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
     69    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="60"></div>
    7870</div>
    7971
    8072<div class="grid" id="grid2" data-expected-width="100" data-expected-height="200">
    81     <div id="a" data-expected-height="30" data-expected-width="60"></div>
    82     <div id="b" data-expected-height="30" data-expected-width="40"></div>
     73    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="60"></div>
     74    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="40"></div>
    8375</div>
    8476
    8577<div class="grid" id="grid3" data-expected-width="100" data-expected-height="200">
    86     <div id="a" data-expected-height="30" data-expected-width="50"></div>
    87     <div id="b" data-expected-height="30" data-expected-width="50"></div>
     78    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="50"></div>
     79    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="50"></div>
    8880</div>
    8981
    9082<div class="grid" id="grid4" data-expected-width="100" data-expected-height="200">
    91     <div id="a" data-expected-height="40" data-expected-width="30"></div>
    92     <div id="b" data-expected-height="160" data-expected-width="30"></div>
     83    <div class="firstRowFirstColumn" data-expected-height="40" data-expected-width="30"></div>
     84    <div class="firstRowSecondColumn" data-expected-height="160" data-expected-width="30"></div>
    9385</div>
    9486
    9587<div class="grid" id="grid5" data-expected-width="100" data-expected-height="200">
    96     <div id="a" data-expected-height="100" data-expected-width="30"></div>
    97     <div id="b" data-expected-height="100" data-expected-width="30"></div>
     88    <div class="firstRowFirstColumn" data-expected-height="100" data-expected-width="30"></div>
     89    <div class="firstRowSecondColumn" data-expected-height="100" data-expected-width="30"></div>
    9890</div>
    9991
    10092<div class="grid" id="grid6" data-expected-width="100" data-expected-height="200">
    101     <div id="a" data-expected-height="30" data-expected-width="40"></div>
    102     <div id="b" data-expected-height="30" data-expected-width="60"></div>
     93    <div class="firstRowFirstColumn" data-expected-height="30" data-expected-width="40"></div>
     94    <div class="firstRowSecondColumn" data-expected-height="30" data-expected-width="60"></div>
    10395</div>
    10496

  • trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-columns.html

    r140198 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.gridMinMinContent {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: minmax(-webkit-min-content, 40px);
    1211    -webkit-grid-rows: 50px;
    … …  
    1413
    1514.gridMaxMinContent {
    16     display: -webkit-grid;
    17     background-color: grey;
    1815    -webkit-grid-columns: minmax(30px, -webkit-min-content);
    1916    -webkit-grid-rows: 20px;
    … …  
    2623}
    2724
    28 #a {
    29     background-color: blue;
    30     -webkit-grid-column: 1;
    31     -webkit-grid-row: 1;
     25.firstRowFirstColumn {
    3226    font: 10px/1 Ahem;
    3327    /* Make us fit our grid area. */
    … …  
    4236
    4337<div class="constrainedContainer">
    44     <div class="gridMinMinContent">
    45         <div id="a" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
     38    <div class="grid gridMinMinContent">
     39        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
    4640    </div>
    4741</div>
    4842
    4943<div class="constrainedContainer">
    50     <div class="gridMinMinContent">
     44    <div class="grid gridMinMinContent">
    5145        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    52         <div id="a" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
     46        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
    5347    </div>
    5448</div>
    5549
    5650<div class="constrainedContainer">
    57     <div class="gridMinMinContent">
    58         <div id="a" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX</div>
     51    <div class="grid gridMinMinContent">
     52        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX</div>
    5953    </div>
    6054</div>
    … …  
    6256<!-- Allow the extra logical space distribution to occur. -->
    6357<div style="width: 40px; height: 10px">
    64     <div class="gridMinMinContent">
    65         <div id="a" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
     58    <div class="grid gridMinMinContent">
     59        <div class="firstRowFirstColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
    6660    </div>
    6761</div>
    6862
    6963<div style="width: 100px; height: 10px;">
    70     <div class="gridMinMinContent">
     64    <div class="grid gridMinMinContent">
    7165        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    72         <div id="a" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
     66        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX</div>
    7367    </div>
    7468</div>
    7569
    7670<div class="constrainedContainer">
    77     <div class="gridMaxMinContent">
    78         <div id="a" data-expected-width="30" data-expected-height="20">XXX XXX XXX</div>
     71    <div class="grid gridMaxMinContent">
     72        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX XXX</div>
    7973    </div>
    8074</div>
    8175
    8276<div class="constrainedContainer">
    83     <div class="gridMaxMinContent">
    84         <div id="a" data-expected-width="30" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
     77    <div class="grid gridMaxMinContent">
     78        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
    8579    </div>
    8680</div>
    8781
    8882<div class="constrainedContainer">
    89     <div class="gridMaxMinContent">
    90         <div id="a" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
     83    <div class="grid gridMaxMinContent">
     84        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
    9185    </div>
    9286</div>
    … …  
    9589
    9690<div style="width: 100px; height: 20px">
    97     <div class="gridMaxMinContent">
    98         <div id="a" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
     91    <div class="grid gridMaxMinContent">
     92        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX</div>
    9993    </div>
    10094</div>
    10195
    10296<div style="width: 100px; height: 20px">
    103     <div class="gridMaxMinContent">
     97    <div class="grid gridMaxMinContent">
    10498        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    105         <div id="a" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
     99        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XX XX XX XX XX XX</div>
    106100    </div>
    107101</div>

  • trunk/LayoutTests/fast/css-grid-layout/minmax-min-content-column-resolution-rows.html

    r140198 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.gridMinMinContent {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: 30px;
    1211    -webkit-grid-rows: minmax(-webkit-min-content, 40px);
    … …  
    1413
    1514.gridMaxMinContent {
    16     display: -webkit-grid;
    17     background-color: grey;
    1815    -webkit-grid-columns: 30px;
    1916    -webkit-grid-rows: minmax(30px, -webkit-min-content);
    … …  
    2623}
    2724
    28 #a {
    29     background-color: blue;
    30     -webkit-grid-column: 1;
    31     -webkit-grid-row: 1;
     25.firstRowFirstColumn {
    3226    font: 10px/1 Ahem;
    3327    /* Make us fit our grid area. */
    … …  
    4236
    4337<div class="constrainedContainer">
    44     <div class="gridMinMinContent">
    45         <div id="a" data-expected-width="30" data-expected-height="20">XXX XXX</div>
     38    <div class="grid gridMinMinContent">
     39        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX</div>
    4640    </div>
    4741</div>
    4842
    4943<div class="constrainedContainer">
    50     <div class="gridMinMinContent">
    51         <div id="a" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
     44    <div class="grid gridMinMinContent">
     45        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
    5246    </div>
    5347</div>
    5448
    5549<div class="constrainedContainer">
    56     <div class="gridMinMinContent">
    57         <div id="a" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     50    <div class="grid gridMinMinContent">
     51        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
    5852    </div>
    5953</div>
    … …  
    6155<!-- Allow the extra logical space distribution to occur. -->
    6256<div style="width: 30px; height: 100px">
    63     <div class="gridMinMinContent">
    64         <div id="a" data-expected-width="30" data-expected-height="40">XXX XXX</div>
     57    <div class="grid gridMinMinContent">
     58        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
    6559    </div>
    6660</div>
    6761
    6862<div style="width: 30px; height: 100px">
    69     <div class="gridMinMinContent">
    70         <div id="a" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     63    <div class="grid gridMinMinContent">
     64        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
    7165    </div>
    7266</div>
    7367
    7468<div class="constrainedContainer">
    75     <div class="gridMaxMinContent">
     69    <div class="grid gridMaxMinContent">
    7670        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    77         <div id="a" data-expected-width="30" data-expected-height="30">XXX XXX</div>
     71        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
    7872    </div>
    7973</div>
    8074
    8175<div class="constrainedContainer">
    82     <div class="gridMaxMinContent">
    83         <div id="a" data-expected-width="30" data-expected-height="30">XXX XXX XXX</div>
     76    <div class="grid gridMaxMinContent">
     77        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX XXX</div>
    8478    </div>
    8579</div>
    … …  
    8882
    8983<div style="width: 30px; height: 100px">
    90     <div class="gridMaxMinContent">
    91         <div id="a" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
     84    <div class="grid gridMaxMinContent">
     85        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
    9286    </div>
    9387</div>
    9488
    9589<div style="width: 30px; height: 100px">
    96     <div class="gridMaxMinContent">
     90    <div class="grid gridMaxMinContent">
    9791        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
    98         <div id="a" data-expected-width="30" data-expected-height="30">XXX XXX</div>
     92        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
    9993    </div>
    10094</div>

  • trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-in-percent-grid.html

    r135965 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.container {
    … …  
    1314
    1415.grid {
    15     display: -webkit-grid;
    1616    -webkit-grid-columns: 40% 60%;
    1717    -webkit-grid-rows: 30% 70%;
    18     background-color: grey;
    1918    width: 80%;
    2019    height: 50%;
    2120}
    2221
    23 #a {
    24     background-color: blue;
    25     -webkit-grid-column: 1;
    26     -webkit-grid-row: 1;
     22.firstRowFirstColumn {
    2723    width: 100%;
    2824    height: 15px;
    2925}
    30 #b {
    31     background-color: green;
    32     -webkit-grid-column: 2;
    33     -webkit-grid-row: 1;
     26
     27.firstRowSecondColumn {
    3428    width: 15px;
    3529    height: 100%;
    3630}
    37 #c {
    38     background-color: red;
    39     -webkit-grid-column: 1;
    40     -webkit-grid-row: 2;
     31
     32.secondRowFirstColumn {
    4133    width: 50%;
    4234    height: 50%;
    4335}
    44 #d {
    45     background-color: orange;
    46     -webkit-grid-column: 2;
    47     -webkit-grid-row: 2;
     36
     37.secondRowSecondColumn {
    4838    width: -webkit-calc(100%);
    4939    height: -webkit-calc(100%);
    … …  
    5747<div class="container">
    5848<div class="grid" data-expected-width="400" data-expected-height="300">
    59     <div id="a" data-expected-width="160" data-expected-height="15"></div>
    60     <div id="b" data-expected-width="15" data-expected-height="90"></div>
    61     <div id="c" data-expected-width="80" data-expected-height="105"></div>
    62     <div id="d" data-expected-width="240" data-expected-height="210"></div>
     49    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     50    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     51    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
     52    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
    6353</div>
    6454</div>
    … …  
    6656<div class="container">
    6757<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
    68     <div id="a" data-expected-width="160" data-expected-height="15"></div>
    69     <div id="b" data-expected-width="15" data-expected-height="90"></div>
    70     <div id="c" data-expected-width="80" data-expected-height="105"></div>
    71     <div id="d" data-expected-width="240" data-expected-height="210"></div>
     58    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     59    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     60    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
     61    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
    7262</div>
    7363</div>
    … …  
    7565<div class="container">
    7666<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
    77     <div id="a" data-expected-width="120" data-expected-height="15"></div>
    78     <div id="b" data-expected-width="15" data-expected-height="180"></div>
    79     <div id="c" data-expected-width="140" data-expected-height="60"></div>
    80     <div id="d" data-expected-width="280" data-expected-height="180"></div>
     67    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
     68    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
     69    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
     70    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
    8171</div>
    8272</div>
    … …  
    8474<div class="container">
    8575<div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
    86     <div id="a" data-expected-width="120" data-expected-height="15"></div>
    87     <div id="b" data-expected-width="15" data-expected-height="180"></div>
    88     <div id="c" data-expected-width="140" data-expected-height="60"></div>
    89     <div id="d" data-expected-width="280" data-expected-height="180"></div>
     76    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
     77    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
     78    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
     79    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
    9080</div>
    9181</div>

  • trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track-update.html

    r140045 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    1010    -webkit-grid-columns: 70% 30%;
    1111    -webkit-grid-rows: 40% 60%;
    12     background-color: grey;
    1312    width: 400px;
    1413    height: 300px;
    1514}
    1615
    17 #a {
    18     background-color: blue;
    19     -webkit-grid-column: 1;
    20     -webkit-grid-row: 1;
     16.firstRowFirstColumn {
    2117    width: 100%;
    2218    height: 15px;
    2319}
    24 #b {
    25     background-color: green;
    26     -webkit-grid-column: 2;
    27     -webkit-grid-row: 1;
     20
     21.firstRowSecondColumn {
    2822    width: 15px;
    2923    height: 100%;
    3024}
    31 #c {
    32     background-color: purple;
    33     -webkit-grid-column: 1;
    34     -webkit-grid-row: 2;
     25
     26.secondRowFirstColumn {
    3527    width: 50%;
    3628    height: 50%;
    3729}
    38 #d {
    39     background-color: orange;
    40     -webkit-grid-column: 2;
    41     -webkit-grid-row: 2;
     30
     31.secondRowSecondColumn {
    4232    width: -webkit-calc(100%);
    4333    height: -webkit-calc(100%);
    … …  
    6959<div style="position: relative">
    7060<div class="grid" data-expected-width="400" data-expected-height="300">
    71     <div id="a" data-expected-width="160" data-expected-height="15"></div>
    72     <div id="b" data-expected-width="15" data-expected-height="120"></div>
    73     <div id="c" data-expected-width="80" data-expected-height="90"></div>
    74     <div id="d" data-expected-width="240" data-expected-height="180"></div>
     61    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     62    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="120"></div>
     63    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="90"></div>
     64    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="180"></div>
    7565</div>
    7666</div>
    … …  
    7868<div style="position: relative">
    7969<div class="grid" data-expected-width="400" data-expected-height="300">
    80     <div id="a" data-expected-width="280" data-expected-height="15"></div>
    81     <div id="b" data-expected-width="15" data-expected-height="90"></div>
    82     <div id="c" data-expected-width="140" data-expected-height="105"></div>
    83     <div id="d" data-expected-width="120" data-expected-height="210"></div>
     70    <div class="firstRowFirstColumn" data-expected-width="280" data-expected-height="15"></div>
     71    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     72    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="105"></div>
     73    <div class="secondRowSecondColumn" data-expected-width="120" data-expected-height="210"></div>
    8474</div>
    8575</div>
    … …  
    8777<div style="position: relative">
    8878<div class="grid" data-expected-width="400" data-expected-height="300">
    89     <div id="a" data-expected-width="160" data-expected-height="15"></div>
    90     <div id="b" data-expected-width="15" data-expected-height="90"></div>
    91     <div id="c" data-expected-width="80" data-expected-height="105"></div>
    92     <div id="d" data-expected-width="240" data-expected-height="210"></div>
     79    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     80    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     81    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
     82    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
    9383</div>
    9484</div>

  • trunk/LayoutTests/fast/css-grid-layout/percent-grid-item-in-percent-grid-track.html

    r135965 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    1010    -webkit-grid-columns: 40% 60%;
    1111    -webkit-grid-rows: 30% 70%;
    12     background-color: grey;
    1312    width: 400px;
    1413    height: 300px;
    1514}
    1615
    17 #a {
    18     background-color: blue;
    19     -webkit-grid-column: 1;
    20     -webkit-grid-row: 1;
     16.firstRowFirstColumn {
    2117    width: 100%;
    2218    height: 15px;
    2319}
    24 #b {
    25     background-color: green;
    26     -webkit-grid-column: 2;
    27     -webkit-grid-row: 1;
     20
     21.firstRowSecondColumn {
    2822    width: 15px;
    2923    height: 100%;
    3024}
    31 #c {
    32     background-color: red;
    33     -webkit-grid-column: 1;
    34     -webkit-grid-row: 2;
     25
     26.secondRowFirstColumn {
    3527    width: 50%;
    3628    height: 50%;
    3729}
    38 #d {
    39     background-color: orange;
    40     -webkit-grid-column: 2;
    41     -webkit-grid-row: 2;
     30
     31.secondRowSecondColumn {
    4232    width: -webkit-calc(100%);
    4333    height: -webkit-calc(100%);
    … …  
    5141<div style="position: relative">
    5242<div class="grid" data-expected-width="400" data-expected-height="300">
    53     <div id="a" data-expected-width="160" data-expected-height="15"></div>
    54     <div id="b" data-expected-width="15" data-expected-height="90"></div>
    55     <div id="c" data-expected-width="80" data-expected-height="105"></div>
    56     <div id="d" data-expected-width="240" data-expected-height="210"></div>
     43    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     44    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     45    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
     46    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
    5747</div>
    5848</div>
    … …  
    6050<div style="position: relative">
    6151<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="400" data-expected-height="300">
    62     <div id="a" data-expected-width="160" data-expected-height="15"></div>
    63     <div id="b" data-expected-width="15" data-expected-height="90"></div>
    64     <div id="c" data-expected-width="80" data-expected-height="105"></div>
    65     <div id="d" data-expected-width="240" data-expected-height="210"></div>
     52    <div class="firstRowFirstColumn" data-expected-width="160" data-expected-height="15"></div>
     53    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="90"></div>
     54    <div class="secondRowFirstColumn" data-expected-width="80" data-expected-height="105"></div>
     55    <div class="secondRowSecondColumn" data-expected-width="240" data-expected-height="210"></div>
    6656</div>
    6757</div>
    … …  
    6959<div style="position: relative">
    7060<div class="grid" style="-webkit-writing-mode: vertical-rl;" data-expected-width="400" data-expected-height="300">
    71     <div id="a" data-expected-width="120" data-expected-height="15"></div>
    72     <div id="b" data-expected-width="15" data-expected-height="180"></div>
    73     <div id="c" data-expected-width="140" data-expected-height="60"></div>
    74     <div id="d" data-expected-width="280" data-expected-height="180"></div>
     61    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
     62    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
     63    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
     64    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
    7565</div>
    7666</div>
    … …  
    7868<div style="position: relative">
    7969<div class="grid" style="-webkit-writing-mode: vertical-lr;" data-expected-width="400" data-expected-height="300">
    80     <div id="a" data-expected-width="120" data-expected-height="15"></div>
    81     <div id="b" data-expected-width="15" data-expected-height="180"></div>
    82     <div id="c" data-expected-width="140" data-expected-height="60"></div>
    83     <div id="d" data-expected-width="280" data-expected-height="180"></div>
     70    <div class="firstRowFirstColumn" data-expected-width="120" data-expected-height="15"></div>
     71    <div class="firstRowSecondColumn" data-expected-width="15" data-expected-height="180"></div>
     72    <div class="secondRowFirstColumn" data-expected-width="140" data-expected-height="60"></div>
     73    <div class="secondRowSecondColumn" data-expected-width="280" data-expected-height="180"></div>
    8474</div>
    8575</div>

  • trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html

    r140045 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: 200px 200px;
    1211    -webkit-grid-rows: 100px 100px;
    1312    height: 200px;
    1413    width: 400px;
    15 }
    16 
    17 #a {
    18     background-color: blue;
    19     -webkit-grid-column: 1;
    20     -webkit-grid-row: 1;
    21 }
    22 
    23 #b {
    24     background-color: lime;
    25     -webkit-grid-column: 2;
    26     -webkit-grid-row: 1;
    27 }
    28 
    29 #c {
    30     background-color: purple;
    31     -webkit-grid-column: 1;
    32     -webkit-grid-row: 2;
    33 }
    34 
    35 #d {
    36     background-color: orange;
    37     -webkit-grid-column: 2;
    38     -webkit-grid-row: 2;
    3914}
    4015
    … …  
    5732    margin: 20%;
    5833}
    59 
    60 .verticalRL {
    61     -webkit-writing-mode: vertical-rl;
    62 }
    6334</style>
    6435<script src="../../resources/check-layout.js"></script>
    … …  
    7950
    8051<div class="grid">
    81     <div id="a" class="percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
    82     <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
    83     <div id="c" class="percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
    84     <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
     52    <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
     53    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
     54    <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
     55    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
    8556</div>
    8657

  • trunk/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.html

    r136465 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: 100px 300px;
    1211    -webkit-grid-rows: 50px 150px;
    1312    height: 200px;
    1413    width: 400px;
    15 }
    16 
    17 #a {
    18     background-color: blue;
    19     -webkit-grid-column: 1;
    20     -webkit-grid-row: 1;
    21 }
    22 
    23 #b {
    24     background-color: lime;
    25     -webkit-grid-column: 2;
    26     -webkit-grid-row: 1;
    27 }
    28 
    29 #c {
    30     background-color: purple;
    31     -webkit-grid-column: 1;
    32     -webkit-grid-row: 2;
    33 }
    34 
    35 #d {
    36     background-color: orange;
    37     -webkit-grid-column: 2;
    38     -webkit-grid-row: 2;
    3914}
    4015
    … …  
    5732    margin: 20%;
    5833}
    59 
    60 .verticalRL {
    61     -webkit-writing-mode: vertical-rl;
    62 }
    6334</style>
    6435<script src="../../resources/check-layout.js"></script>
    … …  
    6839
    6940<div class="grid">
    70     <div id="a" class="percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
    71     <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
    72     <div id="c" class="percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
    73     <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
     41    <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
     42    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
     43    <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
     44    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
    7445</div>
    7546
    7647<div class="grid verticalRL">
    77     <div id="a" class="percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
    78     <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
    79     <div id="c" class="percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
    80     <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
     48    <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
     49    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
     50    <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
     51    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
    8152</div>
    8253
    8354<div class="grid">
    84     <div id="a" class="percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
    85     <div id="b" class="percentMargin verticalRL" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
    86     <div id="c" class="percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
    87     <div id="d" class="percentPaddingAndMargin verticalRL" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
     55    <div class="firstRowFirstColumn percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
     56    <div class="firstRowSecondColumn percentMargin verticalRL" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
     57    <div class="secondRowFirstColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
     58    <div class="secondRowSecondColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
    8859</div>
    8960
    9061<div class="grid">
    91     <div id="a" class="percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
    92     <div id="b" class="percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
    93     <div id="c" class="percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
    94     <div id="d" class="percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
     62    <div class="firstRowFirstColumn percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
     63    <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
     64    <div class="secondRowFirstColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
     65    <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
    9566</div>
    9667

  • trunk/LayoutTests/fast/css-grid-layout/percent-resolution-grid-item.html

    r135965 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    10     background-color: grey;
    1110    -webkit-grid-columns: 100px 300px;
    1211    -webkit-grid-rows: 50px 150px;
    1312    height: 200px;
    1413    width: 400px;
    15 }
    16 
    17 #a {
    18     background-color: blue;
    19     -webkit-grid-column: 1;
    20     -webkit-grid-row: 1;
    21 }
    22 
    23 #b {
    24     background-color: lime;
    25     -webkit-grid-column: 2;
    26     -webkit-grid-row: 1;
    27 }
    28 
    29 #c {
    30     background-color: purple;
    31     -webkit-grid-column: 1;
    32     -webkit-grid-row: 2;
    33 }
    34 
    35 #d {
    36     background-color: orange;
    37     -webkit-grid-column: 2;
    38     -webkit-grid-row: 2;
    3914}
    4015
    … …  
    5328    height: 100%;
    5429}
    55 
    56 .verticalRL {
    57     -webkit-writing-mode: vertical-rl;
    58 }
    5930</style>
    6031<script src="../../resources/check-layout.js"></script>
    … …  
    6435
    6536<div class="grid">
    66     <div id="a" class="percentWidth" data-expected-width="100" data-expected-height="15"></div>
    67     <div id="b" class="percentHeight" data-expected-width="15" data-expected-height="50"></div>
    68     <div id="c" class="percentHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
    69     <div id="d" class="percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
     37    <div class="firstRowFirstColumn percentWidth" data-expected-width="100" data-expected-height="15"></div>
     38    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
     39    <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="100" data-expected-height="150"></div>
     40    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
    7041</div>
    7142
    7243<div class="grid verticalRL">
    73     <div id="a" class="percentWidth" data-expected-width="50" data-expected-height="15"></div>
    74     <div id="b" class="percentHeight" data-expected-width="15" data-expected-height="300"></div>
    75     <div id="c" class="percentHeightAndWidth" data-expected-width="150" data-expected-height="100"></div>
    76     <div id="d" class="percentHeightAndWidth" data-expected-width="150" data-expected-height="300"></div>
     44    <div class="firstRowFirstColumn percentWidth" data-expected-width="50" data-expected-height="15"></div>
     45    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="300"></div>
     46    <div class="secondRowFirstColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="100"></div>
     47    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="150" data-expected-height="300"></div>
    7748</div>
    7849
    7950<div class="grid">
    80     <div id="a" class="percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
    81     <div id="b" class="percentHeight verticalRL" data-expected-width="15" data-expected-height="50"></div>
    82     <div id="c" class="percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
    83     <div id="d" class="percentHeightAndWidth verticalRL" data-expected-width="300" data-expected-height="150"></div>
     51    <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
     52    <div class="firstRowSecondColumn percentHeight verticalRL" data-expected-width="15" data-expected-height="50"></div>
     53    <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
     54    <div class="secondRowSecondColumn percentHeightAndWidth verticalRL" data-expected-width="300" data-expected-height="150"></div>
    8455</div>
    8556
    8657<div class="grid">
    87     <div id="a" class="percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
    88     <div id="b" class="percentHeight" data-expected-width="15" data-expected-height="50"></div>
    89     <div id="c" class="percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
    90     <div id="d" class="percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
     58    <div class="firstRowFirstColumn percentWidth verticalRL" data-expected-width="100" data-expected-height="15"></div>
     59    <div class="firstRowSecondColumn percentHeight" data-expected-width="15" data-expected-height="50"></div>
     60    <div class="secondRowFirstColumn percentHeightAndWidth verticalRL" data-expected-width="100" data-expected-height="150"></div>
     61    <div class="secondRowSecondColumn percentHeightAndWidth" data-expected-width="300" data-expected-height="150"></div>
    9162</div>
    9263</body>

  • trunk/LayoutTests/fast/css-grid-layout/place-cell-by-index.html

    r130979 r140480  
    55    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
    66</script>
     7<link href="resources/grid.css" rel="stylesheet">
    78<style>
    89.grid {
    9     display: -webkit-grid;
    1010    -webkit-grid-columns: 50px 60px;
    1111    -webkit-grid-rows: 20px 30px;
    12     background-color: grey;
    1312    max-width: 110px;
    1413}
    1514
    16 #a {
    17     background-color: blue;
    18     -webkit-grid-column: 1;
    19     -webkit-grid-row: 1;
     15.firstRowFirstColumn {
    2016    width: 10px;
    2117    height: 15px;
    2218}
    23 #b {
    24     background-color: green;
    25     -webkit-grid-column: 2;
    26     -webkit-grid-row: 1;
     19
     20.firstRowSecondColumn {
    2721    width: 10px;
    2822    height: 15px;
    2923}
    30 #c {
    31     background-color: red;
    32     -webkit-grid-column: 1;
    33     -webkit-grid-row: 2;
     24
     25.secondRowFirstColumn {
    3426    width: 10px;
    3527    height: 15px;
    3628}
    37 #d {
    38     background-color: orange;
    39     -webkit-grid-column: 2;
    40     -webkit-grid-row: 2;
     29
     30.secondRowSecondColumn {
    4131    width: 10px;
    4232    height: 15px;
    … …  
    5242<div style="position: relative">
    5343<div class="grid" data-expected-width="110" data-expected-height="50">
    54     <div id="a" data-offset-x="0" data-offset-y="0"></div>
    55     <div id="b" data-offset-x="50" data-offset-y="0"></div>
    56     <div id="c" data-offset-x="0" data-offset-y="20"></div>
    57     <div id="d" data-offset-x="50" data-offset-y="20"></div>
     44    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
     45    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
     46    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
     47    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
    5848</div>
    5949</div>
    … …  
    6151<div style="position: relative">
    6252<div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="110" data-expected-height="50">
    63     <div id="a" data-offset-x="0" data-offset-y="35"></div>
    64     <div id="b" data-offset-x="50" data-offset-y="35"></div>
    65     <div id="c" data-offset-x="0" data-offset-y="15"></div>
    66     <div id="d" data-offset-x="50" data-offset-y="15"></div>
     53    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="35"></div>
     54    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="35"></div>
     55    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="15"></div>
     56    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="15"></div>
    6757</div>
    6858</div>
    … …  
    7060<div style="position: relative">
    7161<div class="grid" style="-webkit-writing-mode: vertical-rl; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
    72     <div id="a" data-offset-x="40" data-offset-y="0"></div>
    73     <div id="b" data-offset-x="40" data-offset-y="50"></div>
    74     <div id="c" data-offset-x="20" data-offset-y="0"></div>
    75     <div id="d" data-offset-x="20" data-offset-y="50"></div>
     62    <div class="firstRowFirstColumn" data-offset-x="40" data-offset-y="0"></div>
     63    <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="50"></div>
     64    <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
     65    <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
    7666</div>
    7767</div>
    … …  
    7969<div style="position: relative">
    8070<div class="grid" style="-webkit-writing-mode: vertical-lr; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
    81     <div id="a" data-offset-x="0" data-offset-y="0"></div>
    82     <div id="b" data-offset-x="0" data-offset-y="50"></div>
    83     <div id="c" data-offset-x="20" data-offset-y="0"></div>
    84     <div id="d" data-offset-x="20" data-offset-y="50"></div>
     71    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
     72    <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50"></div>
     73    <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
     74    <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
    8575</div>
    8676</div>
Note: See TracChangeset for help on using the changeset viewer.