--- a/layout/base/tests/bug1354478-1-ref.html
+++ b/layout/base/tests/bug1354478-1-ref.html
@@ -7,17 +7,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-1.html
+++ b/layout/base/tests/bug1354478-1.html
@@ -7,17 +7,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-2-ref.html
+++ b/layout/base/tests/bug1354478-2-ref.html
@@ -7,17 +7,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-2.html
+++ b/layout/base/tests/bug1354478-2.html
@@ -7,17 +7,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-3-ref.html
+++ b/layout/base/tests/bug1354478-3-ref.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-3.html
+++ b/layout/base/tests/bug1354478-3.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-4-ref.html
+++ b/layout/base/tests/bug1354478-4-ref.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-4.html
+++ b/layout/base/tests/bug1354478-4.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-5-ref.html
+++ b/layout/base/tests/bug1354478-5-ref.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-5.html
+++ b/layout/base/tests/bug1354478-5.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-6-ref.html
+++ b/layout/base/tests/bug1354478-6-ref.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/base/tests/bug1354478-6.html
+++ b/layout/base/tests/bug1354478-6.html
@@ -10,17 +10,17 @@
-moz-appearance: none;
appearance: none;
unicode-bidi: plaintext;
}
div {
inline-size: 200px;
block-size: 20px;
position: relative;
- offset-block-start: -20px;
+ inset-block-start: -20px;
background: silver;
}
</style>
<script>
function start() {
var textarea = document.querySelector("textarea");
textarea.selectionStart = 1; // place caret between the letters
textarea.selectionEnd = 1;--- a/layout/reftests/abs-pos/reftest.list
+++ b/layout/reftests/abs-pos/reftest.list
@@ -1,11 +1,11 @@
== font-size-wrap.html font-size-wrap-ref.html
== abs-pos-auto-margin-1.html abs-pos-auto-margin-1-ref.html
-fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated&&!azureSkia,73,1) == auto-offset-inline-block-1.html auto-offset-inline-block-1-ref.html # bug 696670
+fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated&&!azureSkia,73,1) == auto-inset-inline-block-1.html auto-inset-inline-block-1-ref.html # bug 696670
== fieldset-1.html fieldset-1-ref.html
== table-1.html table-1-ref.html
== table-2.html table-2-ref.html
== table-3.html table-3-ref.html
== table-caption-1.html table-internal-1-ref.html
== table-caption-2.html table-internal-2-ref.html
== table-caption-3.html table-internal-3-ref.html
== table-caption-4.html table-internal-8-ref.html
--- a/layout/reftests/css-grid/grid-align-content-001-ref.html
+++ b/layout/reftests/css-grid/grid-align-content-001-ref.html
@@ -40,30 +40,30 @@ item3 { grid-area: 3 / 3; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.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; }
.astretch4 { grid-template-rows: 11.33333px 13.33333px 15.33333px; }
</style>
</head>
<body>--- a/layout/reftests/css-grid/grid-item-align-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-align-001-ref.html
@@ -29,17 +29,17 @@ span {
position: relative;
z-index: 1;
width: 13px;
height: 9px;
background: grey;
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 {
position: absolute;
top:0;left:0;bottom:0;right:0;
background: white;
}
abs1 {
@@ -58,34 +58,34 @@ abs4 { display:none; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }
.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; }
.astretch2 { width:13px; height:auto; }
.astretch3 { height:auto; }
.astretch4 { width:0; }
.astretch5 { width:0; }
.astretch6 { height:9px; }
.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; }
.hl .vr {margin-left:6px; margin-top:3px; }
.hl .vr.aend, .hl .vr.aflexend {margin-left:12px; margin-top:9px; }
.hl .vr.acenter {margin-left:8px; margin-top:6px; }
.hl .vlr { margin-left:0px; margin-top:5px; }
@@ -110,17 +110,17 @@ abs4 { display:none; }
.hr .vlr {margin-top:5px; margin-right:5px; }
.hr .vlr.aend, .hr .vlr.aflexend {margin-top:11px; margin-right:11px; }
.hr .vlr.acenter {margin-top:8px; margin-right:7px; }
.hr .vrl {margin-top:3px; margin-right:-1px; }
.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; }
.vl .hl.aend, .vl .hl.aflexend { margin-left:4px; }
.vl .hl.acenter { margin-left:3px; margin-top:1px; }
.vl .astretch6, .vl .astretch7 { height:0px; }
.vl .hr.astretch6, .vl .hr.astretch7 { height:0px; }
--- a/layout/reftests/css-grid/grid-item-align-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-align-002-ref.html
@@ -23,17 +23,17 @@ separator { clear:both; display:block; h
inline-size: 36px;
block-size: 25px;
margin-right: 4px;
background: lightgrey;
}
wrap {
display: block;
position: relative;
- offset-inline-start:1px;
+ inset-inline-start:1px;
background: white;
block-size:20px;
inline-size:32px;
border-block-start: 3px solid lightgrey;
}
span {
display: block;--- a/layout/reftests/css-grid/grid-item-align-003-ref.html
+++ b/layout/reftests/css-grid/grid-item-align-003-ref.html
@@ -24,17 +24,17 @@ separator { clear:both; display:block; h
inline-size: 36px;
block-size: 25px;
margin-right: 20px;
margin-bottom: 20px;
}
wrap {
display: block;
position: relative;
- offset-inline-start:1px;
+ inset-inline-start:1px;
background: white;
block-size:20px;
inline-size:32px;
border-block-start: 3px solid lightgrey;
}
span {
display: block;
@@ -60,20 +60,20 @@ abs4 { right: 35px; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.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; }
.astretch5 { width:0; max-width:38px; }
.astretch6 { height:15px; max-height:30px; }
.astretch7 { width:0; height:15px; max-width:38px; max-height:30px; }
--- a/layout/reftests/css-grid/grid-item-justify-001-ref.html
+++ b/layout/reftests/css-grid/grid-item-justify-001-ref.html
@@ -24,17 +24,17 @@ separator { clear:both; display:block; h
block-size: 25px;
margin-right: 4px;
background: lightgrey;
}
wrap {
display: block;
position: relative;
- offset-inline-start: 1px;
+ inset-inline-start: 1px;
background: white;
block-size: 20px;
inline-size: 32px;
border-block-start: 3px solid lightgrey;
}
span {
display: block;--- a/layout/reftests/css-grid/grid-item-justify-002-ref.html
+++ b/layout/reftests/css-grid/grid-item-justify-002-ref.html
@@ -24,17 +24,17 @@ separator { clear:both; display:block; h
block-size: 25px;
margin-right: 4px;
background: lightgrey;
}
wrap {
display: block;
position: relative;
- offset-inline-start: 1px;
+ inset-inline-start: 1px;
background: white;
block-size: 20px;
inline-size: 32px;
border-block-start: 3px solid lightgrey;
}
span {
display: block;--- a/layout/reftests/css-grid/grid-justify-content-001-ref.html
+++ b/layout/reftests/css-grid/grid-justify-content-001-ref.html
@@ -40,31 +40,31 @@ item3 { grid-area: 3 / 3; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.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; }
.jstretch4 { grid-template-columns:16.66666px 12.66666px 10.66666px; }
</style>
</head>
<body>--- a/layout/reftests/css-grid/grid-row-gap-001-ref.html
+++ b/layout/reftests/css-grid/grid-row-gap-001-ref.html
@@ -40,30 +40,30 @@ item3 { grid-area: 5 / 3; }
.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.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; }
.astretch4 { grid-template-rows: 10.66666px 1px 12.66666px 1px 14.66666px; }
</style>
</head>
<body>--- 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
@@ -16,136 +16,136 @@ span {
background: lime;
border: 1px solid black;
box-sizing: border-box;
inline-size: 20px;
block-size: 20px;
}
.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;
}
</style>
</head>
<body dir=rtl>
<div class="grid test1">
<span class="a">a</span>
<span class="b">b</span>--- a/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html
+++ b/layout/reftests/css-grid/rtl-grid-placement-definite-001-ref.html
@@ -19,36 +19,36 @@ body,html { color:black; background:whit
span {
position: absolute;
background: lime;
border: 1px solid black;
box-sizing: border-box;
}
.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;
}
</style>
</head>
<body dir=rtl>
<div class=grid1>--- 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
@@ -20,136 +20,136 @@ span {
background: lime;
border: 1px solid black;
box-sizing: border-box;
inline-size: 20px;
block-size: 20px;
}
.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;
}
</style>
</head>
<body>
<div class="grid test1">
<span class="a">a</span>
<span class="b">b</span>--- 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
@@ -20,154 +20,154 @@ span {
background: lime;
border: 1px solid black;
box-sizing: border-box;
inline-size: 20px;
block-size: 20px;
}
.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;
}
</style>
</head>
<body>
<div class="grid test1">
<span class="a">a</span>
<span class="b">b</span>--- a/layout/reftests/font-features/1376231-vertical-gpos-adjustments-ref.html
+++ b/layout/reftests/font-features/1376231-vertical-gpos-adjustments-ref.html
@@ -22,17 +22,17 @@ span {
writing-mode: vertical-rl;
}
.green {
color: green;
background: green;
}
.overlay {
position: relative;
- offset-block-start: -3em;
+ inset-block-start: -3em;
}
</style>
</head>
<body>
There should be no red:
<div>
<p><span> </p>
<p class="overlay"><span class="green"> </p>--- a/layout/reftests/font-features/1376231-vertical-gpos-adjustments.html
+++ b/layout/reftests/font-features/1376231-vertical-gpos-adjustments.html
@@ -47,17 +47,17 @@ span {
background: red;
}
.green {
color: green;
background: green;
}
.overlay {
position: relative;
- offset-block-start: -3em;
+ inset-block-start: -3em;
}
</style>
</head>
<body>
There should be no red:
<div>
<!-- check that the red 'halt' span is entirely hidden by the green default span -->
<p><span class="halt red">やっほう、「世界」</p>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-005-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-005-ref.html
@@ -39,16 +39,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-006-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-006-ref.html
@@ -40,16 +40,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 128px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 128px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-007-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-007-ref.html
@@ -39,16 +39,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-008-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-008-ref.html
@@ -40,16 +40,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-009-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-009-ref.html
@@ -39,16 +39,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-010-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-010-ref.html
@@ -40,16 +40,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-011-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-011-ref.html
@@ -39,16 +39,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-012-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-border-box-border-radius-012-ref.html
@@ -40,16 +40,16 @@
inline-size: 200px;
block-size: 20px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="longbox" style="offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
- <div class="box" style="block-size: 24px; offset-block-start: 20px; offset-inline-start: 140px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 140px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 116px; offset-inline-start: 132px;"></div> <!-- Box at corner -->
- <div class="longbox" style="offset-block-start: 140px; offset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="longbox" style="inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 20px; inset-inline-start: 140px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 140px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 116px; inset-inline-start: 132px;"></div> <!-- Box at corner -->
+ <div class="longbox" style="inset-block-start: 140px; inset-inline-start: 0;"></div> <!-- Saturate the margin space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-048-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-048-ref.html
@@ -38,17 +38,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-049-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-049-ref.html
@@ -39,17 +39,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-050-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-050-ref.html
@@ -38,17 +38,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-051-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-051-ref.html
@@ -38,17 +38,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-052-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-052-ref.html
@@ -38,17 +38,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-053-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-053-ref.html
@@ -39,17 +39,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-054-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-054-ref.html
@@ -38,17 +38,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-055-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-circle-055-ref.html
@@ -39,17 +39,17 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 20px; offset-block-start: 0px; offset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
- <div class="box" style="block-size: 12px; offset-block-start: 20px; offset-inline-start: 96px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 12px; offset-block-start: 32px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 44px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 12px; offset-block-start: 116px; offset-inline-start: 108px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 20px; offset-block-start: 128px; offset-inline-start: 0;"></div>
+ <div class="long box" style="block-size: 20px; inset-block-start: 0px; inset-inline-start: 0;"></div> <!-- Fill the border area due to the circle shifted -->
+ <div class="box" style="block-size: 12px; inset-block-start: 20px; inset-inline-start: 96px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 12px; inset-block-start: 32px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 44px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 12px; inset-block-start: 116px; inset-inline-start: 108px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 20px; inset-block-start: 128px; inset-inline-start: 0;"></div>
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-046-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-046-ref.html
@@ -33,14 +33,14 @@
position: absolute;
inline-size: 80px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-047-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-047-ref.html
@@ -34,14 +34,14 @@
position: absolute;
inline-size: 80px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-048-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-048-ref.html
@@ -33,14 +33,14 @@
position: absolute;
inline-size: 80px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-049-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-049-ref.html
@@ -34,14 +34,14 @@
position: absolute;
inline-size: 80px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-050-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-050-ref.html
@@ -33,14 +33,14 @@
position: absolute;
inline-size: 80px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-051-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-ellipse-051-ref.html
@@ -34,14 +34,14 @@
position: absolute;
inline-size: 80px;
background-color: blue;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 0px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 24px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 96px; offset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 24px; inset-block-start: 0px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 24px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 96px; inset-inline-start: 72px;"></div> <!-- Box at corner -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-020-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-020-ref.html
@@ -36,16 +36,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-021-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-021-ref.html
@@ -37,16 +37,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-022-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-022-ref.html
@@ -36,16 +36,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-023-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-023-ref.html
@@ -37,16 +37,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-024-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-024-ref.html
@@ -36,16 +36,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-025-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-025-ref.html
@@ -37,16 +37,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-026-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-026-ref.html
@@ -36,16 +36,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-027-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-inset-027-ref.html
@@ -37,16 +37,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 10px; offset-block-start: 0px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
- <div class="box" style="block-size: 24px; offset-block-start: 10px; offset-inline-start: 90px;"></div> <!-- Box at corner -->
- <div class="box" style="block-size: 36px; offset-block-start: 34px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 36px; offset-block-start: 70px; offset-inline-start: 90px;"></div>
- <div class="box" style="block-size: 24px; offset-block-start: 106px; offset-inline-start: 82px;"></div> <!-- Box at corner -->
- <div class="long box" style="block-size: 10px; offset-block-start: 130px; offset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 0px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
+ <div class="box" style="block-size: 24px; inset-block-start: 10px; inset-inline-start: 90px;"></div> <!-- Box at corner -->
+ <div class="box" style="block-size: 36px; inset-block-start: 34px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 36px; inset-block-start: 70px; inset-inline-start: 90px;"></div>
+ <div class="box" style="block-size: 24px; inset-block-start: 106px; inset-inline-start: 82px;"></div> <!-- Box at corner -->
+ <div class="long box" style="block-size: 10px; inset-block-start: 130px; inset-inline-start: 0px;"></div> <!-- Fill the inset space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-020-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-020-ref.html
@@ -36,16 +36,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
- <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 100px;"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-021-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-021-ref.html
@@ -37,16 +37,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
- <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 100px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 80px;"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-022-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-022-ref.html
@@ -36,16 +36,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
- <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 100px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 80px;"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-023-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-023-ref.html
@@ -37,16 +37,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
- <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 100px;"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-024-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-024-ref.html
@@ -36,16 +36,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
- <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 100px;"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 100px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
</body>
</html>--- a/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-025-ref.html
+++ b/layout/reftests/w3c-css/submitted/shapes1/shape-outside-polygon-025-ref.html
@@ -37,16 +37,16 @@
.long {
inline-size: 200px;
}
</style>
<body class="container">
<div class="shape"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 0; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
- <div class="box" style="block-size: 30px; offset-block-start: 30px; offset-inline-start: 100px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 60px; offset-inline-start: 120px;"></div>
- <div class="box" style="block-size: 20px; offset-block-start: 80px; offset-inline-start: 80px;"></div>
- <div class="box" style="block-size: 30px; offset-block-start: 100px; offset-inline-start: 80px;"></div>
- <div class="long box" style="block-size: 30px; offset-block-start: 130px; offset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="long box" style="block-size: 30px; inset-block-start: 0; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
+ <div class="box" style="block-size: 30px; inset-block-start: 30px; inset-inline-start: 100px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 60px; inset-inline-start: 120px;"></div>
+ <div class="box" style="block-size: 20px; inset-block-start: 80px; inset-inline-start: 80px;"></div>
+ <div class="box" style="block-size: 30px; inset-block-start: 100px; inset-inline-start: 80px;"></div>
+ <div class="long box" style="block-size: 30px; inset-block-start: 130px; inset-inline-start: 0;"></div> <!-- Fill the margin and partial border space -->
</body>
</html>--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -814,18 +814,18 @@ details > summary:first-of-type > *|* {
/* Cancel "list-style-position: inside" inherited from summary. */
list-style-position: initial;
}
/* <dialog> element styles */
dialog {
position: absolute;
- offset-inline-start: 0;
- offset-inline-end: 0;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
color: black;
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: white;--- a/layout/style/test/gtest/example.css
+++ b/layout/style/test/gtest/example.css
@@ -2273,17 +2273,17 @@ html[dir="rtl"] .editor-mount {
}
:root.theme-dark .expression-container:hover {
background-color: var(--search-overlays-semitransparent);
}
.expression-container .close-btn {
position: absolute;
- offset-inline-end: 6px;
+ inset-inline-end: 6px;
top: 6px;
}
.expression-container .close {
display: none;
}
.expression-container:hover .close {
@@ -2406,17 +2406,17 @@ html .breakpoints-list .breakpoint.pause
overflow: hidden;
text-overflow: ellipsis;
padding-inline-start: 18px;
padding-inline-end: 18px;
}
.breakpoint .close-btn {
position: absolute;
- offset-inline-end: 6px;
+ inset-inline-end: 6px;
top: 12px;
}
.breakpoint .close {
display: none;
}
.breakpoint:hover .close {--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -5952,17 +5952,17 @@ var gCSSProperties = {
"calc(2px)",
"calc(50%)",
"calc(3*25px)",
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: [ "none", "5" ]
},
- "offset-block-end": {
+ "inset-block-end": {
domProp: "offsetBlockEnd",
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 */
@@ -5972,17 +5972,17 @@ var gCSSProperties = {
"calc(-2px)",
"calc(50%)",
"calc(3*25px)",
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: []
},
- "offset-block-start": {
+ "inset-block-start": {
domProp: "offsetBlockStart",
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 */
@@ -5992,17 +5992,17 @@ var gCSSProperties = {
"calc(-2px)",
"calc(50%)",
"calc(3*25px)",
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: []
},
- "offset-inline-end": {
+ "inset-inline-end": {
domProp: "offsetInlineEnd",
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 */
@@ -6012,17 +6012,17 @@ var gCSSProperties = {
"calc(-2px)",
"calc(50%)",
"calc(3*25px)",
"calc(25px*3)",
"calc(3*25px + 50%)",
],
invalid_values: []
},
- "offset-inline-start": {
+ "inset-inline-start": {
domProp: "offsetInlineStart",
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 */