Index: LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html b/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..552cbe55b3c30aab1cdd6ec338ffb36e536da718 |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-item-order-paint-order.html |
@@ -0,0 +1,45 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<script> |
+if (window.testRunner) |
+ testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
+</script> |
+<link href="resources/grid.css" rel="stylesheet"> |
+<style> |
+.grid { |
+ grid-definition-rows: 100px; |
+ grid-definition-columns: 100px; |
+ width: -webkit-fit-content; |
+} |
+.sizedToGridArea { |
+ background-color: green; |
+} |
+ |
+.red { |
+ background-color: red; |
+} |
+ |
+.negativeOrder { |
+ order: -1; |
+} |
+ |
+.positiveOrder { |
+ order: 10; |
+} |
+</style> |
+</head> |
+<body> |
+ <p>This test checks that 'order' changes the paint ordering.</p> |
+ <p>There should be 2 green squares below.</p> |
+ <div class="grid"> |
+ <div class="sizedToGridArea firstRowFirstColumn"></div> |
+ <div class="sizedToGridArea firstRowFirstColumn negativeOrder red"></div> |
+ </div> |
+ |
+ <div class="grid"> |
+ <div class="sizedToGridArea firstRowFirstColumn positiveOrder"></div> |
+ <div class="sizedToGridArea firstRowFirstColumn red"></div> |
+ </div> |
+</body> |
+</html> |