<!DOCTYPE html>
<style>
#container {
    position: relative;
    width: 500px;
}

#dynamic-padding {
    position: absolute;
    left: 0;
    top: 0;

    box-sizing: border-box;
    width: 300px;
    height: 300px;
    padding: 10%;

    background-clip: content-box;
    background-color: yellow;
}
</style>
<div id="container">
    <div id="dynamic-padding"></div>
</div>
This test verifies an element with percentage padding and background-clip:content-box correctly repaints when its padding changes due to container layout.
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
    document.getElementById("container").style.width = "100px";
}, true);
</script>