From 1b22ef40f9b735fd661504ffd926c96bd8db503f Mon Sep 17 00:00:00 2001 From: Moonchild Date: Sat, 31 Dec 2022 01:32:15 +0000 Subject: [PATCH] Issue #2075 - Part 4: Update tests * Update reftests to use inset-* * Update property database * Update logical properties test --- .../css-grid/grid-align-content-001-ref.html | 20 +-- .../css-grid/grid-item-align-001-ref.html | 12 +- .../css-grid/grid-item-align-002-ref.html | 2 +- .../css-grid/grid-item-align-003-ref.html | 10 +- .../css-grid/grid-item-justify-001-ref.html | 2 +- .../css-grid/grid-item-justify-002-ref.html | 2 +- .../grid-justify-content-001-ref.html | 24 ++-- .../css-grid/grid-row-gap-001-ref.html | 20 +-- ...rid-placement-auto-row-sparse-001-ref.html | 98 ++++++------- .../rtl-grid-placement-definite-001-ref.html | 16 +-- ...rid-placement-auto-row-sparse-001-ref.html | 98 ++++++------- ...rid-placement-auto-row-sparse-001-ref.html | 114 +++++++-------- layout/style/test/property_database.js | 132 +++++++++++------- .../style/test/test_logical_properties.html | 4 +- 14 files changed, 295 insertions(+), 259 deletions(-) diff --git a/layout/reftests/css-grid/grid-align-content-001-ref.html b/layout/reftests/css-grid/grid-align-content-001-ref.html index f67baf5307..ab4ad2d298 100644 --- a/layout/reftests/css-grid/grid-align-content-001-ref.html +++ b/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; } -.acenter * { offset-block-start:12.5px; } +.aend *, .aflexend * { inset-block-start:25px; } +.acenter * { inset-block-start:12.5px; } -.aspace-between item2 { offset-block-start:12.5px; } -.aspace-between item3 { offset-block-start:25px; } +.aspace-between item2 { inset-block-start:12.5px; } +.aspace-between item3 { inset-block-start:25px; } -.aspace-around item1 { offset-block-start:4.1666px; } -.aspace-around item2 { offset-block-start:12.5px; } -.aspace-around item3 { offset-block-start:20.8333px; } +.aspace-around item1 { inset-block-start:4.1666px; } +.aspace-around item2 { inset-block-start:12.5px; } +.aspace-around item3 { inset-block-start:20.8333px; } -.aspace-evenly item1 { offset-block-start:6.25px; } -.aspace-evenly item2 { offset-block-start:12.5px; } -.aspace-evenly item3 { offset-block-start:18.75px; } +.aspace-evenly item1 { inset-block-start:6.25px; } +.aspace-evenly item2 { inset-block-start:12.5px; } +.aspace-evenly item3 { inset-block-start:18.75px; } .astretch2 { grid-template-rows: 1fr 5px 7px; } .astretch3 { grid-template-rows: 15.5px 17.5px 7px; } diff --git a/layout/reftests/css-grid/grid-item-align-001-ref.html b/layout/reftests/css-grid/grid-item-align-001-ref.html index 35bb263ac7..e1d9172304 100644 --- a/layout/reftests/css-grid/grid-item-align-001-ref.html +++ b/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; } -.acenter { offset-block-start: 5px; margin-block-start:2px; } +.aend,.aflexend { inset-block-start: 9px; } +.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; } diff --git a/layout/reftests/css-grid/grid-item-align-002-ref.html b/layout/reftests/css-grid/grid-item-align-002-ref.html index 73d60d4c20..de59dea26d 100644 --- a/layout/reftests/css-grid/grid-item-align-002-ref.html +++ b/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; diff --git a/layout/reftests/css-grid/grid-item-align-003-ref.html b/layout/reftests/css-grid/grid-item-align-003-ref.html index f83366cdaa..a2f14f869e 100644 --- a/layout/reftests/css-grid/grid-item-align-003-ref.html +++ b/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.vrl.aend, .unsafe.vrl.aflexend { offset-inline-start:-15px; } -.unsafe.hl.acenter { offset-block-start:-7px; } -.unsafe.vrl.acenter { offset-inline-start:-7px; } +.unsafe.hl.aend, .unsafe.hl.aflexend { inset-block-start:-15px; } +.unsafe.vrl.aend, .unsafe.vrl.aflexend { inset-inline-start:-15px; } +.unsafe.hl.acenter { inset-block-start:-7px; } +.unsafe.vrl.acenter { inset-inline-start:-7px; } .astretch2 { width:40px; height:15px; } .astretch3 { height:15px; } .astretch4 { width:0; } diff --git a/layout/reftests/css-grid/grid-item-justify-001-ref.html b/layout/reftests/css-grid/grid-item-justify-001-ref.html index 99c8536454..cfe1095546 100644 --- a/layout/reftests/css-grid/grid-item-justify-001-ref.html +++ b/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; diff --git a/layout/reftests/css-grid/grid-item-justify-002-ref.html b/layout/reftests/css-grid/grid-item-justify-002-ref.html index 39e7d26f0e..c723bc3915 100644 --- a/layout/reftests/css-grid/grid-item-justify-002-ref.html +++ b/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; diff --git a/layout/reftests/css-grid/grid-justify-content-001-ref.html b/layout/reftests/css-grid/grid-justify-content-001-ref.html index fa92e6cbf4..5e43a86bb4 100644 --- a/layout/reftests/css-grid/grid-justify-content-001-ref.html +++ b/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; } -.jcenter * { offset-inline-start:8.5px; } -.hr.jleft * , .vlr.jleft * { offset-inline-start:17px; } -.hl.jright * , .vrl.jright * , .vl.jright * , .vr.jright * { offset-inline-start:17px; } +.jend * , .jflexend * { inset-inline-start:17px; } +.jcenter * { inset-inline-start:8.5px; } +.hr.jleft * , .vlr.jleft * { inset-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 item3 { offset-inline-start:17px; } +.jspace-between item2 { inset-inline-start:8.5px; } +.jspace-between item3 { inset-inline-start:17px; } -.jspace-around item1 { offset-inline-start:2.85px; } -.jspace-around item2 { offset-inline-start:8.5px; } -.jspace-around item3 { offset-inline-start:14.16px; } +.jspace-around item1 { inset-inline-start:2.85px; } +.jspace-around item2 { inset-inline-start:8.5px; } +.jspace-around item3 { inset-inline-start:14.16px; } -.jspace-evenly item1 { offset-inline-start:4.25px; } -.jspace-evenly item2 { offset-inline-start:8.5px; } -.jspace-evenly item3 { offset-inline-start:12.75px; } +.jspace-evenly item1 { inset-inline-start:4.25px; } +.jspace-evenly item2 { inset-inline-start:8.5px; } +.jspace-evenly item3 { inset-inline-start:12.75px; } .jstretch2 { grid-template-columns:1fr 7px 5px; } .jstretch3 { grid-template-columns:19.5px 15.5px 5px; } diff --git a/layout/reftests/css-grid/grid-row-gap-001-ref.html b/layout/reftests/css-grid/grid-row-gap-001-ref.html index cfa815514a..34b8b1ddb4 100644 --- a/layout/reftests/css-grid/grid-row-gap-001-ref.html +++ b/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; } -.acenter * { offset-block-start:11.5px; } +.aend *, .aflexend * { inset-block-start:23px; } +.acenter * { inset-block-start:11.5px; } -.aspace-between item2 { offset-block-start:11.5px; } -.aspace-between item3 { offset-block-start:23px; } +.aspace-between item2 { inset-block-start:11.5px; } +.aspace-between item3 { inset-block-start:23px; } -.aspace-around item1 { offset-block-start:4.1666px; } -.aspace-around item2 { offset-block-start:11.5px; } -.aspace-around item3 { offset-block-start:18.8333px; } +.aspace-around item1 { inset-block-start:4.1666px; } +.aspace-around item2 { inset-block-start:11.5px; } +.aspace-around item3 { inset-block-start:18.8333px; } -.aspace-evenly item1 { offset-block-start:6.25px; } -.aspace-evenly item2 { offset-block-start:11.5px; } -.aspace-evenly item3 { offset-block-start:16.75px; } +.aspace-evenly item1 { inset-block-start:6.25px; } +.aspace-evenly item2 { inset-block-start:11.5px; } +.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; } diff --git a/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html index 205e718f95..9200835bfd 100644 --- a/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html +++ b/layout/reftests/css-grid/rtl-grid-placement-auto-row-sparse-001-ref.html @@ -21,126 +21,126 @@ span { } .test1 .a { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; inline-size: 20px; block-size: 20px; } .test1 .b { - offset-block-start: 20px; - offset-inline-start: 20px; + inset-block-start: 20px; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test1 .c { - offset-block-start: 0; - offset-inline-start: 80px; + inset-block-start: 0; + inset-inline-start: 80px; inline-size: 60px; block-size: 40px; } .test1 .e { - offset-block-start: 20px; - offset-inline-start: 0px; + inset-block-start: 20px; + inset-inline-start: 0px; } .test1 .d2 { - offset-block-start: 0px; - offset-inline-start: 40px; + inset-block-start: 0px; + inset-inline-start: 40px; } .test2 .a { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test2 .b { - offset-block-start: 20px; - offset-inline-start: 20px; + inset-block-start: 20px; + inset-inline-start: 20px; inline-size: 20px; block-size: 20px; } .test2 .c { - offset-block-start: 0; - offset-inline-start: 80px; + inset-block-start: 0; + inset-inline-start: 80px; inline-size: 60px; block-size: 40px; } .test2 .e { - offset-block-start: 20px; - offset-inline-start: 0px; + inset-block-start: 20px; + inset-inline-start: 0px; } .test2 .d2 { - offset-block-start: 20px; - offset-inline-start: 40px; + inset-block-start: 20px; + inset-inline-start: 40px; } .test3 .a { - offset-block-start: 0; - offset-inline-start: 0; + inset-block-start: 0; + inset-inline-start: 0; inline-size: 60px; block-size: 40px; } .test3 .b { - offset-block-start: 40px; - offset-inline-start: 20px; + inset-block-start: 40px; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test3 .c { - offset-block-start: 60px; - offset-inline-start: 0px; + inset-block-start: 60px; + 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; - offset-inline-start: 60px; + inset-block-start: 20px; + inset-inline-start: 60px; } .test3 .d2 { - offset-block-start: 80px; - offset-inline-start: 60px; + inset-block-start: 80px; + inset-inline-start: 60px; } .test4 .c { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + 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; - offset-inline-start: 0px; + inset-block-start: 20px; + inset-inline-start: 0px; } .test4 .d2 { - offset-block-start: 40px; - offset-inline-start: 20px; + inset-block-start: 40px; + inset-inline-start: 20px; } .test5 .c { - offset-block-start: 20px; - offset-inline-start: 0; + inset-block-start: 20px; + inset-inline-start: 0; inline-size: 60px; block-size: 20px; } .test5 .e { - offset-block-start: 20px; - offset-inline-start: 60px; + inset-block-start: 20px; + inset-inline-start: 60px; } .test5 .d2 { - offset-block-start: 0px; - offset-inline-start: 20px; + inset-block-start: 0px; + 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; - offset-inline-start: 140px; + inset-block-start: 20px; + inset-inline-start: 140px; } .test6e { - offset-block-start: 20px; - offset-inline-start: 160px; + inset-block-start: 20px; + inset-inline-start: 160px; } diff --git a/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html b/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html index 743b917efa..70287b3ab7 100644 --- a/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html +++ b/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html @@ -24,26 +24,26 @@ span { } .a { - offset-inline-start: 40px; - offset-block-start: 0px; + inset-inline-start: 40px; + inset-block-start: 0px; inline-size: 60px; block-size: 40px; } .b { - offset-inline-start: 20px; - offset-block-start: 40px; + inset-inline-start: 20px; + inset-block-start: 40px; inline-size: 60px; block-size: 20px; } .c { - offset-inline-start: 80px; - offset-block-start: 40px; + inset-inline-start: 80px; + inset-block-start: 40px; inline-size: 60px; block-size: 20px; } .d { - offset-inline-start: 0px; - offset-block-start: 0px; + inset-inline-start: 0px; + inset-block-start: 0px; inline-size: 20px; block-size: 60px; } diff --git a/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html index bc90a09556..4a1e6f81e0 100644 --- a/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html +++ b/layout/reftests/css-grid/vlr-grid-placement-auto-row-sparse-001-ref.html @@ -25,126 +25,126 @@ span { } .test1 .a { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; inline-size: 20px; block-size: 20px; } .test1 .b { - offset-block-start: 20px; - offset-inline-start: 20px; + inset-block-start: 20px; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test1 .c { - offset-block-start: 0; - offset-inline-start: 80px; + inset-block-start: 0; + inset-inline-start: 80px; inline-size: 60px; block-size: 40px; } .test1 .e { - offset-block-start: 20px; - offset-inline-start: 0px; + inset-block-start: 20px; + inset-inline-start: 0px; } .test1 .d2 { - offset-block-start: 0px; - offset-inline-start: 40px; + inset-block-start: 0px; + inset-inline-start: 40px; } .test2 .a { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test2 .b { - offset-block-start: 20px; - offset-inline-start: 20px; + inset-block-start: 20px; + inset-inline-start: 20px; inline-size: 20px; block-size: 20px; } .test2 .c { - offset-block-start: 0; - offset-inline-start: 80px; + inset-block-start: 0; + inset-inline-start: 80px; inline-size: 60px; block-size: 40px; } .test2 .e { - offset-block-start: 20px; - offset-inline-start: 0px; + inset-block-start: 20px; + inset-inline-start: 0px; } .test2 .d2 { - offset-block-start: 20px; - offset-inline-start: 40px; + inset-block-start: 20px; + inset-inline-start: 40px; } .test3 .a { - offset-block-start: 0; - offset-inline-start: 0; + inset-block-start: 0; + inset-inline-start: 0; inline-size: 60px; block-size: 40px; } .test3 .b { - offset-block-start: 40px; - offset-inline-start: 20px; + inset-block-start: 40px; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test3 .c { - offset-block-start: 60px; - offset-inline-start: 0px; + inset-block-start: 60px; + 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; - offset-inline-start: 60px; + inset-block-start: 20px; + inset-inline-start: 60px; } .test3 .d2 { - offset-block-start: 80px; - offset-inline-start: 60px; + inset-block-start: 80px; + inset-inline-start: 60px; } .test4 .c { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + 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; - offset-inline-start: 0px; + inset-block-start: 20px; + inset-inline-start: 0px; } .test4 .d2 { - offset-block-start: 40px; - offset-inline-start: 20px; + inset-block-start: 40px; + inset-inline-start: 20px; } .test5 .c { - offset-block-start: 20px; - offset-inline-start: 0; + inset-block-start: 20px; + inset-inline-start: 0; inline-size: 60px; block-size: 20px; } .test5 .e { - offset-block-start: 20px; - offset-inline-start: 60px; + inset-block-start: 20px; + inset-inline-start: 60px; } .test5 .d2 { - offset-block-start: 0px; - offset-inline-start: 20px; + inset-block-start: 0px; + 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; - offset-inline-start: 140px; + inset-block-start: 20px; + inset-inline-start: 140px; } .test6e { - offset-block-start: 20px; - offset-inline-start: 160px; + inset-block-start: 20px; + inset-inline-start: 160px; } diff --git a/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html index 7d2fe1e9e7..a495cceffc 100644 --- a/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html +++ b/layout/reftests/css-grid/vrl-grid-placement-auto-row-sparse-001-ref.html @@ -25,144 +25,144 @@ span { } .test1 .a { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; inline-size: 20px; block-size: 20px; } .test1 .b { - offset-block-start: 20px; - offset-inline-start: 20px; + inset-block-start: 20px; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test1 .c { - offset-block-start: 0; - offset-inline-start: 80px; + inset-block-start: 0; + inset-inline-start: 80px; inline-size: 60px; block-size: 40px; } .test1 .d { - offset-block-start: 0; - offset-inline-start: 0; + inset-block-start: 0; + inset-inline-start: 0; } .test1 .e { - offset-block-start: 20px; - offset-inline-start: 0; + inset-block-start: 20px; + inset-inline-start: 0; } .test1 .d2 { - offset-block-start: 0; - offset-inline-start: 40px; + inset-block-start: 0; + inset-inline-start: 40px; } .test2 .a { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test2 .b { - offset-block-start: 20px; - offset-inline-start: 20px; + inset-block-start: 20px; + inset-inline-start: 20px; inline-size: 20px; block-size: 20px; } .test2 .c { - offset-block-start: 0; - offset-inline-start: 80px; + inset-block-start: 0; + inset-inline-start: 80px; inline-size: 60px; block-size: 40px; } .test2 .d { - offset-block-start: 0; - offset-inline-start: 0; + inset-block-start: 0; + inset-inline-start: 0; } .test2 .e { - offset-block-start: 20px; - offset-inline-start: 0; + inset-block-start: 20px; + inset-inline-start: 0; } .test2 .d2 { - offset-block-start: 20px; - offset-inline-start: 40px; + inset-block-start: 20px; + inset-inline-start: 40px; } .test3 .a { - offset-block-start: 0; - offset-inline-start: 0; + inset-block-start: 0; + inset-inline-start: 0; inline-size: 60px; block-size: 40px; } .test3 .b { - offset-block-start: 40px; - offset-inline-start: 20px; + inset-block-start: 40px; + inset-inline-start: 20px; inline-size: 60px; block-size: 20px; } .test3 .c { - offset-block-start: 60px; - offset-inline-start: 0; + inset-block-start: 60px; + 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; - offset-inline-start: 60px; + inset-block-start: 20px; + inset-inline-start: 60px; } .test3 .d2 { - offset-block-start: 80px; - offset-inline-start: 60px; + inset-block-start: 80px; + inset-inline-start: 60px; } .test4 .c { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; inline-size: 60px; block-size: 40px; } .test4 .d { - offset-block-start: 40px; - offset-inline-start: 0; + inset-block-start: 40px; + inset-inline-start: 0; } .test4 .e { - offset-block-start: 20px; - offset-inline-start: 0px; + inset-block-start: 20px; + inset-inline-start: 0px; } .test4 .d2 { - offset-block-start: 40px; - offset-inline-start: 20px; + inset-block-start: 40px; + inset-inline-start: 20px; } .test5 .c { - offset-block-start: 20px; - offset-inline-start: 0; + inset-block-start: 20px; + inset-inline-start: 0; inline-size: 60px; block-size: 20px; } .test5 .d { - offset-block-start: 0; - offset-inline-start: 0; + inset-block-start: 0; + inset-inline-start: 0; } .test5 .e { - offset-block-start: 20px; - offset-inline-start: 60px; + inset-block-start: 20px; + inset-inline-start: 60px; } .test5 .d2 { - offset-block-start: 0; - offset-inline-start: 20px; + inset-block-start: 0; + inset-inline-start: 20px; } .test6 { - offset-inline-start: 0; - offset-block-start: 20px; + inset-inline-start: 0; + inset-block-start: 20px; } .test6d2 { - offset-block-start: 20px; - offset-inline-start: 140px; + inset-block-start: 20px; + inset-inline-start: 140px; } .test6e { - offset-block-start: 20px; - offset-inline-start: 160px; + inset-block-start: 20px; + inset-inline-start: 160px; } diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js index 0abe930832..9eb7efc38c 100644 --- a/layout/style/test/property_database.js +++ b/layout/style/test/property_database.js @@ -5403,8 +5403,68 @@ var gCSSProperties = { ], invalid_values: [ "none", "5" ] }, - "offset-block-end": { - domProp: "offsetBlockEnd", + "inset-block-end": { + 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 */ - 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: [] + alias_for: "inset-block-start", + subproperties: [ "inset-block-start" ], }, - "offset-inline-end": { - domProp: "offsetInlineEnd", + "offset-block-end": { + 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 */ - 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: [] + alias_for: "inset-block-end", + subproperties: [ "inset-block-end" ], }, "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 */ - 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: [] + alias_for: "inset-inline-start", + subproperties: [ "inset-inline-start" ], + }, + "offset-inline-end": { + domProp: "offsetInlineEnd", + inherited: false, + type: CSS_TYPE_SHORTHAND_AND_LONGHAND, + logical: true, + get_computed: logical_box_prop_get_computed, + alias_for: "inset-inline-end", + subproperties: [ "inset-inline-end" ], }, "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)) { - property = property.substring(7); // we want "top" not "offset-top", e.g. + } else if (/^(offset|inset)-(block|inline)-(start|end)/.test(property)) { + 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)) { diff --git a/layout/style/test/test_logical_properties.html b/layout/style/test/test_logical_properties.html index f1265496dc..a6947791cb 100644 --- a/layout/style/test/test_logical_properties.html +++ b/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";