all-shorthand.html | Explore in Territory

<!DOCTYPE html>
<style>
#target1 { color: red; background-color: currentColor; }
#target1 { all: initial; }
#target1 { color: green; }

#parent { color: green; }
#target2 { color: red; background-color: currentColor; }
#target2 { all: inherit; }

#target3 { color: green !important; }
#target3 { all: initial; }

#target4 { color: red !important; }
#target4 { all: initial !important; }
#target4 { background-color: red; }

#target5 { all: initial !important; }
#target5 { background-color: red; }
#target5 { color: green !important; }

#target6 { all: initial !important; }
#target6 { color: red !important; }
#target6 { all: initial !important; }

#target7 { all: initial !important; }
#target7 { direction: rtl; }

#target8 { all: initial !important; }
#target8 { direction: rtl !important; }
#target8 { all: initial !important; }

#parent9 { color: green; }
#target9 { all: unset; }
</style>
<!-- Test for crbug.com/172051: all shorthand property -->
<div id='target1'>green color, no background-color</div>

<div id='parent'>
  <div id='target2'>green color, no background-color</div>
</div>

<div id='target3'>green color</div>

<div id='target4'>not red color, no background-color</div>

<div id='target5'>green color, no background-color</div>

<div id='target6'>not red color</div>

<div id='target7'>direction is rtl</div>

<div id='target8'>direction is rtl</div>

<div id='parent9'>
  <div id='target9'>green color</div>
</div>
chromium/third_party/blink/web_tests/fast/css/all-shorthand.html
