Issue #2075 - Part 4: Update tests

* Update reftests to use inset-*
* Update property database
* Update logical properties test

layout/reftests/css-grid/grid-align-content-001-ref.html

@@ -45,20 +45,20 @@ item3 { grid-area: 3 / 3; }
 .vlr { writing-mode: vertical-lr; direction:rtl; }
 .vrl { writing-mode: vertical-rl; direction:ltr; }
 
-.aend *, .aflexend * { offset-block-start:25px; }
+.aend *, .aflexend * { inset-block-start:25px; }
-.acenter * { offset-block-start:12.5px;  }
+.acenter * { inset-block-start:12.5px;  }
 
 
-.aspace-between item2 { offset-block-start:12.5px; }
+.aspace-between item2 { inset-block-start:12.5px; }
-.aspace-between item3 { offset-block-start:25px; }
+.aspace-between item3 { inset-block-start:25px; }
 
-.aspace-around item1 { offset-block-start:4.1666px; }
+.aspace-around item1 { inset-block-start:4.1666px; }
-.aspace-around item2 { offset-block-start:12.5px; }
+.aspace-around item2 { inset-block-start:12.5px; }
-.aspace-around item3 { offset-block-start:20.8333px; }
+.aspace-around item3 { inset-block-start:20.8333px; }
 
-.aspace-evenly item1 { offset-block-start:6.25px; }
+.aspace-evenly item1 { inset-block-start:6.25px; }
-.aspace-evenly item2 { offset-block-start:12.5px; }
+.aspace-evenly item2 { inset-block-start:12.5px; }
-.aspace-evenly item3 { offset-block-start:18.75px; }
+.aspace-evenly item3 { inset-block-start:18.75px; }
 
 .astretch2 { grid-template-rows: 1fr 5px 7px; }
 .astretch3 { grid-template-rows: 15.5px 17.5px 7px; }

layout/reftests/css-grid/grid-item-align-001-ref.html

@@ -34,7 +34,7 @@ span {
   border-block-start: 2px solid blue;
   border-inline-start: 2px solid lime;
   margin: 1px 1px 2px 2px;
-  offset-inline-start: 1px;
+  inset-inline-start: 1px;
 }
 
 abs1,abs2,abs3,abs4 {
@@ -63,11 +63,11 @@ abs4 { display:none;  }
 
 .astart,.aflexstart,.aleft,.aright,.astretch1,.astretch2,.astretch2,.astretch3,
 .astretch4,.astretch5,.astretch6,.astretch7,.aauto {
-  offset-block-start: 3px;
+  inset-block-start: 3px;
 }
 
-.aend,.aflexend { offset-block-start: 9px; }
+.aend,.aflexend { inset-block-start: 9px; }
-.acenter {  offset-block-start: 5px; margin-block-start:2px; }
+.acenter {  inset-block-start: 5px; margin-block-start:2px; }
 
 .hl .astretch2, .hr .astretch2 { height: 15px; }
 .hl .astretch3, .hr .astretch3 { height: 15px; }
@@ -80,7 +80,7 @@ abs4 { display:none;  }
 .astretch7 { width:0; height:9px; }
 
 .hl .hr {margin-left:4px;}
-.hl .vl {offset-block-start: 1px; offset-inline-start:3px;}
+.hl .vl {inset-block-start: 1px; inset-inline-start:3px;}
 .hl .vl.aend, .hl .vl.aflexend { margin-top: 7px; }
 .hl .vl.acenter { margin-top:4px; }
 
@@ -115,7 +115,7 @@ abs4 { display:none;  }
 .hr .vrl.aend, .hr .vrl.aflexend {margin-top:9px; margin-right:-7px; }
 .hr .vrl.acenter {margin-top:6px; margin-right:-3px; }
 
-.vl span { offset-block-start: 1px; offset-inline-start: 3px; }
+.vl span { inset-block-start: 1px; inset-inline-start: 3px; }
 .vl .astretch4 { width:15px; }
 .vl .astretch5 { width:13px; }
 

layout/reftests/css-grid/grid-item-align-002-ref.html

@@ -28,7 +28,7 @@ separator { clear:both; display:block; height:6px; }
 wrap {
   display: block;
   position: relative;
-  offset-inline-start:1px;
+  inset-inline-start:1px;
   background: white;
   block-size:20px;
   inline-size:32px;

layout/reftests/css-grid/grid-item-align-003-ref.html

@@ -29,7 +29,7 @@ separator { clear:both; display:block; height:6px; }
 wrap {
   display: block;
   position: relative;
-  offset-inline-start:1px;
+  inset-inline-start:1px;
   background: white;
   block-size:20px;
   inline-size:32px;
@@ -65,10 +65,10 @@ abs4 { right: 35px; }
 .vlr { writing-mode: vertical-lr; direction:rtl; }
 .vrl { writing-mode: vertical-rl; direction:ltr; }
 
-.unsafe.hl.aend,  .unsafe.hl.aflexend  { offset-block-start:-15px; }
+.unsafe.hl.aend,  .unsafe.hl.aflexend  { inset-block-start:-15px; }
-.unsafe.vrl.aend, .unsafe.vrl.aflexend { offset-inline-start:-15px; }
+.unsafe.vrl.aend, .unsafe.vrl.aflexend { inset-inline-start:-15px; }
-.unsafe.hl.acenter { offset-block-start:-7px; }
+.unsafe.hl.acenter { inset-block-start:-7px; }
-.unsafe.vrl.acenter { offset-inline-start:-7px; }
+.unsafe.vrl.acenter { inset-inline-start:-7px; }
 .astretch2 { width:40px; height:15px; }
 .astretch3 { height:15px; }
 .astretch4 { width:0; }

layout/reftests/css-grid/grid-item-justify-001-ref.html

@@ -29,7 +29,7 @@ separator { clear:both; display:block; height:6px; }
 wrap {
   display: block;
   position: relative;
-  offset-inline-start: 1px;
+  inset-inline-start: 1px;
   background: white;
   block-size: 20px;
   inline-size: 32px;

layout/reftests/css-grid/grid-item-justify-002-ref.html

@@ -29,7 +29,7 @@ separator { clear:both; display:block; height:6px; }
 wrap {
   display: block;
   position: relative;
-  offset-inline-start: 1px;
+  inset-inline-start: 1px;
   background: white;
   block-size: 20px;
   inline-size: 32px;

layout/reftests/css-grid/grid-justify-content-001-ref.html

@@ -45,21 +45,21 @@ item3 { grid-area: 3 / 3; }
 .vlr { writing-mode: vertical-lr; direction:rtl; }
 .vrl { writing-mode: vertical-rl; direction:ltr; }
 
-.jend * , .jflexend * { offset-inline-start:17px; }
+.jend * , .jflexend * { inset-inline-start:17px; }
-.jcenter * {  offset-inline-start:8.5px; }
+.jcenter * {  inset-inline-start:8.5px; }
-.hr.jleft * , .vlr.jleft * { offset-inline-start:17px; }
+.hr.jleft * , .vlr.jleft * { inset-inline-start:17px; }
-.hl.jright * , .vrl.jright * , .vl.jright * , .vr.jright * { offset-inline-start:17px; }
+.hl.jright * , .vrl.jright * , .vl.jright * , .vr.jright * { inset-inline-start:17px; }
 
-.jspace-between item2 { offset-inline-start:8.5px; }
+.jspace-between item2 { inset-inline-start:8.5px; }
-.jspace-between item3 { offset-inline-start:17px; }
+.jspace-between item3 { inset-inline-start:17px; }
 
-.jspace-around item1 { offset-inline-start:2.85px;  }
+.jspace-around item1 { inset-inline-start:2.85px;  }
-.jspace-around item2 { offset-inline-start:8.5px;  }
+.jspace-around item2 { inset-inline-start:8.5px;  }
-.jspace-around item3 { offset-inline-start:14.16px;  }
+.jspace-around item3 { inset-inline-start:14.16px;  }
 
-.jspace-evenly item1 { offset-inline-start:4.25px;  }
+.jspace-evenly item1 { inset-inline-start:4.25px;  }
-.jspace-evenly item2 { offset-inline-start:8.5px;  }
+.jspace-evenly item2 { inset-inline-start:8.5px;  }
-.jspace-evenly item3 { offset-inline-start:12.75px;  }
+.jspace-evenly item3 { inset-inline-start:12.75px;  }
 
 .jstretch2 { grid-template-columns:1fr 7px 5px; }
 .jstretch3 { grid-template-columns:19.5px 15.5px 5px; }

layout/reftests/css-grid/grid-row-gap-001-ref.html

@@ -45,20 +45,20 @@ item3 { grid-area: 5 / 3; }
 .vlr { writing-mode: vertical-lr; direction:rtl; }
 .vrl { writing-mode: vertical-rl; direction:ltr; }
 
-.aend *, .aflexend * { offset-block-start:23px; }
+.aend *, .aflexend * { inset-block-start:23px; }
-.acenter * { offset-block-start:11.5px;  }
+.acenter * { inset-block-start:11.5px;  }
 
 
-.aspace-between item2 { offset-block-start:11.5px; }
+.aspace-between item2 { inset-block-start:11.5px; }
-.aspace-between item3 { offset-block-start:23px; }
+.aspace-between item3 { inset-block-start:23px; }
 
-.aspace-around item1 { offset-block-start:4.1666px; }
+.aspace-around item1 { inset-block-start:4.1666px; }
-.aspace-around item2 { offset-block-start:11.5px; }
+.aspace-around item2 { inset-block-start:11.5px; }
-.aspace-around item3 { offset-block-start:18.8333px; }
+.aspace-around item3 { inset-block-start:18.8333px; }
 
-.aspace-evenly item1 { offset-block-start:6.25px; }
+.aspace-evenly item1 { inset-block-start:6.25px; }
-.aspace-evenly item2 { offset-block-start:11.5px; }
+.aspace-evenly item2 { inset-block-start:11.5px; }
-.aspace-evenly item3 { offset-block-start:16.75px; }
+.aspace-evenly item3 { inset-block-start:16.75px; }
 
 .astretch2 { grid-template-rows: 1fr 1px 5px 1px 7px; }
 .astretch3 { grid-template-rows: 14.5px 1px 16.3333px 1px 7px; }

layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html

@@ -21,126 +21,126 @@ span {
 }
 
 .test1 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 20px;
   block-size: 20px;
 }
 .test1 .b {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test1 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 80px;
+  inset-inline-start: 80px;
   inline-size: 60px;
   block-size: 40px;
 }
 .test1 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
 }
 .test1 .d2 {
-  offset-block-start: 0px;
+  inset-block-start: 0px;
-  offset-inline-start: 40px;
+  inset-inline-start: 40px;
 }
 
 .test2 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test2 .b {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 20px;
   block-size: 20px;
 }
 .test2 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 80px;
+  inset-inline-start: 80px;
   inline-size: 60px;
   block-size: 40px;
 }
 .test2 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
 }
 .test2 .d2 {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 40px;
+  inset-inline-start: 40px;
 }
 
 .test3 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
   inline-size: 60px;
   block-size: 40px;
 }
 .test3 .b {
-  offset-block-start: 40px;
+  inset-block-start: 40px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test3 .c {
-  offset-block-start: 60px;
+  inset-block-start: 60px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
   inline-size: 60px;
   block-size: 40px;
 }
-.test3 .d { offset-block-start: 60px; offset-inline-start:60px; }
+.test3 .d { inset-block-start: 60px; inset-inline-start:60px; }
 .test3 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 .test3 .d2 {
-  offset-block-start: 80px;
+  inset-block-start: 80px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 
 .test4 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 40px;
 }
-.test4 .d { offset-block-start: 40px; }
+.test4 .d { inset-block-start: 40px; }
 .test4 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
 }
 .test4 .d2 {
-  offset-block-start: 40px;
+  inset-block-start: 40px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
 }
 
 .test5 .c {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
   inline-size: 60px;
   block-size: 20px;
 }
 .test5 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 .test5 .d2 {
-  offset-block-start: 0px;
+  inset-block-start: 0px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
 }
 
-.test6 { offset-inline-start: 0px; offset-block-start: 20px;}
+.test6 { inset-inline-start: 0px; inset-block-start: 20px;}
 .test6d2 {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 140px;
+  inset-inline-start: 140px;
 }
 .test6e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 160px;
+  inset-inline-start: 160px;
 }
     </style>
 </head>

layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html

@@ -24,26 +24,26 @@ span {
 }
 
 .a {
-  offset-inline-start: 40px;
+  inset-inline-start: 40px;
-  offset-block-start: 0px;
+  inset-block-start: 0px;
   inline-size: 60px;
   block-size: 40px;
 }
 .b {
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
-  offset-block-start: 40px;
+  inset-block-start: 40px;
   inline-size: 60px;
   block-size: 20px;
 }
 .c {
-  offset-inline-start: 80px;
+  inset-inline-start: 80px;
-  offset-block-start: 40px;
+  inset-block-start: 40px;
   inline-size: 60px;
   block-size: 20px;
 }
 .d {
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
-  offset-block-start: 0px;
+  inset-block-start: 0px;
   inline-size: 20px;
   block-size: 60px;
 }

layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html

@@ -25,126 +25,126 @@ span {
 }
 
 .test1 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 20px;
   block-size: 20px;
 }
 .test1 .b {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test1 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 80px;
+  inset-inline-start: 80px;
   inline-size: 60px;
   block-size: 40px;
 }
 .test1 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
 }
 .test1 .d2 {
-  offset-block-start: 0px;
+  inset-block-start: 0px;
-  offset-inline-start: 40px;
+  inset-inline-start: 40px;
 }
 
 .test2 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test2 .b {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 20px;
   block-size: 20px;
 }
 .test2 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 80px;
+  inset-inline-start: 80px;
   inline-size: 60px;
   block-size: 40px;
 }
 .test2 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
 }
 .test2 .d2 {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 40px;
+  inset-inline-start: 40px;
 }
 
 .test3 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
   inline-size: 60px;
   block-size: 40px;
 }
 .test3 .b {
-  offset-block-start: 40px;
+  inset-block-start: 40px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test3 .c {
-  offset-block-start: 60px;
+  inset-block-start: 60px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
   inline-size: 60px;
   block-size: 40px;
 }
-.test3 .d { offset-block-start: 60px; offset-inline-start:60px; }
+.test3 .d { inset-block-start: 60px; inset-inline-start:60px; }
 .test3 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 .test3 .d2 {
-  offset-block-start: 80px;
+  inset-block-start: 80px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 
 .test4 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 40px;
 }
-.test4 .d { offset-block-start: 40px; }
+.test4 .d { inset-block-start: 40px; }
 .test4 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
 }
 .test4 .d2 {
-  offset-block-start: 40px;
+  inset-block-start: 40px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
 }
 
 .test5 .c {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
   inline-size: 60px;
   block-size: 20px;
 }
 .test5 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 .test5 .d2 {
-  offset-block-start: 0px;
+  inset-block-start: 0px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
 }
 
-.test6 { offset-inline-start: 0px; offset-block-start: 20px;}
+.test6 { inset-inline-start: 0px; inset-block-start: 20px;}
 .test6d2 {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 140px;
+  inset-inline-start: 140px;
 }
 .test6e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 160px;
+  inset-inline-start: 160px;
 }
     </style>
 </head>

layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html

@@ -25,144 +25,144 @@ span {
 }
 
 .test1 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 20px;
   block-size: 20px;
 }
 .test1 .b {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test1 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 80px;
+  inset-inline-start: 80px;
   inline-size: 60px;
   block-size: 40px;
 }
 .test1 .d {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
 }
 .test1 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
 }
 .test1 .d2 {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 40px;
+  inset-inline-start: 40px;
 }
 
 .test2 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test2 .b {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 20px;
   block-size: 20px;
 }
 .test2 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 80px;
+  inset-inline-start: 80px;
   inline-size: 60px;
   block-size: 40px;
 }
 .test2 .d {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
 }
 .test2 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
 }
 .test2 .d2 {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 40px;
+  inset-inline-start: 40px;
 }
 
 .test3 .a {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
   inline-size: 60px;
   block-size: 40px;
 }
 .test3 .b {
-  offset-block-start: 40px;
+  inset-block-start: 40px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 20px;
 }
 .test3 .c {
-  offset-block-start: 60px;
+  inset-block-start: 60px;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
   inline-size: 60px;
   block-size: 40px;
 }
-.test3 .d { offset-block-start: 60px; offset-inline-start:60px; }
+.test3 .d { inset-block-start: 60px; inset-inline-start:60px; }
 .test3 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 .test3 .d2 {
-  offset-block-start: 80px;
+  inset-block-start: 80px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 
 .test4 .c {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
   inline-size: 60px;
   block-size: 40px;
 }
 .test4 .d {
-  offset-block-start: 40px;
+  inset-block-start: 40px;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
 }
 .test4 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0px;
+  inset-inline-start: 0px;
 }
 .test4 .d2 {
-  offset-block-start: 40px;
+  inset-block-start: 40px;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
 }
 
 .test5 .c {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
   inline-size: 60px;
   block-size: 20px;
 }
 .test5 .d {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 0;
+  inset-inline-start: 0;
 }
 .test5 .e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 60px;
+  inset-inline-start: 60px;
 }
 .test5 .d2 {
-  offset-block-start: 0;
+  inset-block-start: 0;
-  offset-inline-start: 20px;
+  inset-inline-start: 20px;
 }
 
 .test6 {
-  offset-inline-start: 0;
+  inset-inline-start: 0;
-  offset-block-start: 20px;
+  inset-block-start: 20px;
 }
 .test6d2 {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 140px;
+  inset-inline-start: 140px;
 }
 .test6e {
-  offset-block-start: 20px;
+  inset-block-start: 20px;
-  offset-inline-start: 160px;
+  inset-inline-start: 160px;
 }
     </style>
 </head>

layout/style/test/property_database.js

@@ -5403,8 +5403,68 @@ var gCSSProperties = {
     ],
     invalid_values: [ "none", "5" ]
   },
-  "offset-block-end": {
+  "inset-block-end": {
-    domProp: "offsetBlockEnd",
+    domProp: "insetBlockEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    get_computed: logical_box_prop_get_computed,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { "position": "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: [ "auto" ],
+    other_values: [ "32px", "-3em", "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: []
+  },
+  "inset-block-start": {
+    domProp: "insetBlockStart",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    get_computed: logical_box_prop_get_computed,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { "position": "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: [ "auto" ],
+    other_values: [ "32px", "-3em", "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: []
+  },
+  "inset-inline-end": {
+    domProp: "insetInlineEnd",
+    inherited: false,
+    type: CSS_TYPE_LONGHAND,
+    logical: true,
+    get_computed: logical_box_prop_get_computed,
+    /* FIXME: run tests with multiple prerequisites */
+    prerequisites: { "position": "relative" },
+    /* XXX 0 may or may not be equal to auto */
+    initial_values: [ "auto" ],
+    other_values: [ "32px", "-3em", "12%",
+      "calc(2px)",
+      "calc(-2px)",
+      "calc(50%)",
+      "calc(3*25px)",
+      "calc(25px*3)",
+      "calc(3*25px + 50%)",
+    ],
+    invalid_values: []
+  },
+  "inset-inline-start": {
+    domProp: "insetInlineStart",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
     logical: true,
@@ -5426,62 +5486,38 @@ var gCSSProperties = {
   "offset-block-start": {
     domProp: "offsetBlockStart",
     inherited: false,
-    type: CSS_TYPE_LONGHAND,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     logical: true,
     get_computed: logical_box_prop_get_computed,
-    /* FIXME: run tests with multiple prerequisites */
+    alias_for: "inset-block-start",
-    prerequisites: { "position": "relative" },
+    subproperties: [ "inset-block-start" ],
-    /* XXX 0 may or may not be equal to auto */
-    initial_values: [ "auto" ],
-    other_values: [ "32px", "-3em", "12%",
-      "calc(2px)",
-      "calc(-2px)",
-      "calc(50%)",
-      "calc(3*25px)",
-      "calc(25px*3)",
-      "calc(3*25px + 50%)",
-    ],
-    invalid_values: []
   },
-  "offset-inline-end": {
+  "offset-block-end": {
-    domProp: "offsetInlineEnd",
+    domProp: "offsetBlockEnd",
     inherited: false,
-    type: CSS_TYPE_LONGHAND,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     logical: true,
     get_computed: logical_box_prop_get_computed,
-    /* FIXME: run tests with multiple prerequisites */
+    alias_for: "inset-block-end",
-    prerequisites: { "position": "relative" },
+    subproperties: [ "inset-block-end" ],
-    /* XXX 0 may or may not be equal to auto */
-    initial_values: [ "auto" ],
-    other_values: [ "32px", "-3em", "12%",
-      "calc(2px)",
-      "calc(-2px)",
-      "calc(50%)",
-      "calc(3*25px)",
-      "calc(25px*3)",
-      "calc(3*25px + 50%)",
-    ],
-    invalid_values: []
   },
   "offset-inline-start": {
     domProp: "offsetInlineStart",
     inherited: false,
-    type: CSS_TYPE_LONGHAND,
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
     logical: true,
     get_computed: logical_box_prop_get_computed,
-    /* FIXME: run tests with multiple prerequisites */
+    alias_for: "inset-inline-start",
-    prerequisites: { "position": "relative" },
+    subproperties: [ "inset-inline-start" ],
-    /* XXX 0 may or may not be equal to auto */
+  },
-    initial_values: [ "auto" ],
+  "offset-inline-end": {
-    other_values: [ "32px", "-3em", "12%",
+    domProp: "offsetInlineEnd",
-      "calc(2px)",
+    inherited: false,
-      "calc(-2px)",
+    type: CSS_TYPE_SHORTHAND_AND_LONGHAND,
-      "calc(50%)",
+    logical: true,
-      "calc(3*25px)",
+    get_computed: logical_box_prop_get_computed,
-      "calc(25px*3)",
+    alias_for: "inset-inline-end",
-      "calc(3*25px + 50%)",
+    subproperties: [ "inset-inline-end" ],
-    ],
-    invalid_values: []
   },
   "padding-block-end": {
     domProp: "paddingBlockEnd",
@@ -5635,8 +5671,8 @@ function logical_box_prop_get_computed(cs, property)
 
   if (/^-moz-/.test(property)) {
     property = physicalize(property.substring(5), inlineMapping, "");
-  } else if (/^offset-(block|inline)-(start|end)/.test(property)) {
+  } else if (/^(offset|inset)-(block|inline)-(start|end)/.test(property)) {
-    property = property.substring(7);  // we want "top" not "offset-top", e.g.
+    property = property.replace("offset-", "").replace("inset-", "");  // we want "top" not "offset-top", e.g.
     property = physicalize(property, blockMapping, "block-");
     property = physicalize(property, inlineMapping, "inline-");
   } else if (/-(block|inline)-(start|end)/.test(property)) {

layout/style/test/test_logical_properties.html

@@ -94,7 +94,7 @@ function init() {
          type == CSS_TYPE_LONGHAND && gCSSProperties[p].logical) &&
         /-inline-end/.test(p)) {
       var valueType;
-      if (/margin|padding|width|offset/.test(p)) {
+      if (/margin|padding|width|inset|offset/.test(p)) {
         valueType = "length";
       } else if (/color/.test(p)) {
         valueType = "color";
@@ -110,7 +110,7 @@ function init() {
         blockEnd:    p.replace("-inline-end", "-block-end"),
         type:        valueType
       };
-      if (/^offset/.test(p)) {
+      if (/^(offset|inset)/.test(p)) {
         group.left   = "left";
         group.right  = "right";
         group.top    = "top";